flutter - Flutter:另一个屏幕中的BottomAppBar导航
问题描述
我在另一个屏幕内使用BottomAppBar导航时遇到问题。就我而言,我有一个抽屉来导航名为Profil info的屏幕。在Profil Info中,我需要具有导航功能的BottomAppBar 。
问题是,我希望在Profil Info屏幕中仍然显示内容但有BottomAppBar,但是如果我单击BottomAppBar中的菜单,它将导航到单击的菜单。
没有 BottomAppBar 的配置文件信息:
带有 BottomAppBar 的配置文件信息
我认为这是因为在 BottomAppBar 我有body,所以如果我在另一个屏幕中包含BottomAppBar,它将覆盖。但我希望我的BottomAppBar具有与BottomNavigationBar相同的行为
你能帮我解决我的案子吗?
谢谢
BottomAppBar 自定义
import 'package:flutter/material.dart';
class BottomNavigationBarCustom extends StatefulWidget {
@override
_BottomNavigationBarCustomState createState() =>
_BottomNavigationBarCustomState();
}
class _BottomNavigationBarCustomState extends State<BottomNavigationBarCustom> {
PageController _myPage = PageController(initialPage: 0);
@override
Widget build(BuildContext context) {
final mqHeight = MediaQuery.of(context).size.height;
return Scaffold(
body: PageView(
controller: _myPage,
onPageChanged: (indexScreen) {
print('Screen to $indexScreen');
},
children: <Widget>[
Text('Page 0'),
Text('Page 1'),
Text('Page 2'),
Text('Page 3'),
Text('Page 4'),
],
),
bottomNavigationBar: BottomAppBar(
child: Container(
height: mqHeight / 12,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
BottomAppBarItem(
nameItem: "Beranda",
iconItem: Icons.home,
onTap: () => setState(() => _myPage.jumpToPage(0)),
),
BottomAppBarItem(
nameItem: "Berita",
iconItem: Icons.surround_sound,
onTap: () => setState(() => _myPage.jumpToPage(1)),
),
BottomAppBarItem(
nameItem: "Produk",
iconItem: Icons.category,
onTap: () => setState(() => _myPage.jumpToPage(2)),
),
BottomAppBarItem(
nameItem: "Kegiatan",
iconItem: Icons.calendar_today,
onTap: () => setState(() => _myPage.jumpToPage(3)),
),
BottomAppBarItem(
nameItem: "Kontak",
iconItem: Icons.contact_mail,
onTap: () => setState(() => _myPage.jumpToPage(4)),
),
],
),
),
color: Colors.red,
),
);
}
}
class BottomAppBarItem extends StatefulWidget {
final String nameItem;
final IconData iconItem;
final Function onTap;
BottomAppBarItem({
this.nameItem = "Beranda",
this.iconItem = Icons.home,
this.onTap,
});
@override
_BottomAppBarItemState createState() => _BottomAppBarItemState();
}
class _BottomAppBarItemState extends State<BottomAppBarItem> {
@override
Widget build(BuildContext context) {
return InkWell(
onTap: widget.onTap,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(widget.iconItem, color: Colors.white),
Text(widget.nameItem, style: TextStyle(color: Colors.white)),
],
),
);
}
}
简介信息
class _ProfilInfoScreenState extends State<ProfilInfoScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(
centerTitle: true,
title: Text('Profil Info'),
),
body: FutureBuilder(
future: userList,
builder:
(BuildContext context, AsyncSnapshot<List<UserModel>> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
return Center(
child: Text(
snapshot.error.toString(),
),
);
} else {
final user = snapshot.data[0];
return SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Flexible(
child: Column(
children: <Widget>[
SizedBox(height: 20),
CircleAvatar(
backgroundColor: Colors.red,
radius: 50,
),
SizedBox(height: 10),
Text(user.namaUser),
SizedBox(height: 10),
Text(user.namaGroup),
],
),
),
Flexible(
child: Container(
child: Card(
margin: const EdgeInsets.all(8.0),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
initialValue: user.username,
enabled: false,
decoration: InputDecoration(
labelText: "Username",
labelStyle: TextStyle(color: Colors.grey),
),
onSaved: (value) {
usernameController.text = value;
},
),
TextFormField(
enabled: false,
initialValue: user.namaUser,
decoration: InputDecoration(
labelText: "Nama Lengkap",
labelStyle: TextStyle(color: Colors.grey),
),
onSaved: (value) {
fullnameController.text = value;
},
),
TextFormField(
initialValue: user.hp,
inputFormatters: [
WhitelistingTextInputFormatter.digitsOnly
],
decoration: InputDecoration(
labelText: "Nomor Telepon",
labelStyle: TextStyle(color: Colors.grey),
),
keyboardType: TextInputType.number,
onSaved: (value) {
nohandphoneController.text = value;
},
),
TextFormField(
initialValue: user.email,
decoration: InputDecoration(
labelText: "Alamat Email",
labelStyle: TextStyle(color: Colors.grey),
),
keyboardType: TextInputType.emailAddress,
onSaved: (value) {
emailController.text = value;
},
),
],
),
),
),
),
),
),
Flexible(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: _validate,
child: Text('UPDATE DATA'),
color: Theme.of(context).primaryColor,
textTheme: ButtonTextTheme.primary,
),
),
)
],
),
);
}
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
bottomNavigationBar: BottomNavigationBarCustom(),
);
}
}
解决方案
推荐阅读
- azure-devops - Azure DevOps yaml 管道:如何知道正在签出哪个分支?
- c# - 如何判断用户何时从 Windows 的 Ctrl-Alt-Del 屏幕返回
- javascript - 为什么在没有浏览器的情况下可以在本地找到 DOM 元素,但在 CI 中运行时却找不到?
- python-3.x - 无法使用 numpy 的 `full()` 方法和 python 列表创建 numpy 数组
- c# - Microsoft Dynamics 365 身份验证方法
- python - 我应该在 virtualenv 中安装 python 吗?
- r - 经过特定数量的循环后,我的结果出乎意料
- reactjs - 保持反应组件的先前状态
- angular - Angular 中的 NDEFReader
- c# - 如何在 xamarin.ios 中将图像从 UIImageView 转换为 base64?