Flutter：在另一个屏幕中导航BottomAppBar

Question

我在另一个屏幕上使用 BottomAppBar 进行导航时遇到问题。就我而言，我有一个抽屉来浏览名为配置文件信息的屏幕。在配置文件信息中，我需要具有导航功能的 BottomAppBar 。

问题是，我想在配置文件信息屏幕上仍然显示内容，但是具有 BottomAppBar ，但是如果我单击 BottomAppBar 中的菜单，它将导航到点击菜单。

没有BottomAppBar的配置文件信息：

使用BottomAppBar配置信息

我认为这是因为在BottomAppBar中我具有 body ，因此，如果我在另一个屏幕中包含 BottomAppBar ，它将被覆盖。 但我希望我的 BottomAppBar 具有与 BottomNavigationBar

相同的行为

您能帮我解决我的问题吗？

谢谢

BottomAppBarCustom

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(),
    );
  }
}