如何将底部导航栏添加到此颤动代码

Posted 2023-02-23

【中文标题】如何将底部导航栏添加到此颤动代码

【英文标题】：How to add bottom navigation bar to this flutter code

【发布时间】：2020-10-14 23:11:12

【问题描述】：

我使用了背景导航，现在我无法在此代码中添加底部导航栏，请我是 Flutter 新手，谁能帮助我。

这是我的网格视图，它用作背景导航栏的前层。

var myGridView = new GridView.builder(
  itemCount: spacecrafts.length,
  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    // childAspectRatio: (itemWidth / itemHeight),
  ),
  itemBuilder: (BuildContext context, int index) 
    return new GestureDetector(
      child: new Card(
        elevation: 5.0,
        child: new Container(
          alignment: Alignment.centerLeft,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Image.asset(
                  images[index],
                  color: Colors.blue,
                ),
                Text(
                  spacecrafts[index],
                  style: TextStyle(color: Colors.blue),
                )
              ],
            ),
          ),
        ),
      ),
    );
  ,
);

int _currentIndex = 0;
final List<Widget> _pages = [
  Profile(),
  AboutUs(),
  TermsAndConditions(),
  SignOut()
];

这是我的背景导航条码

return new BackdropScaffold(
  appBar: new BackdropAppBar(
    title: new Text("Flutter GridView"),
  ),
  stickyFrontLayer: true,
  frontLayer: myGridView,
  backLayer: BackdropNavigationBackLayer(
    items: [
      ListTile(leading: Image.asset("images/user.png", color: Colors.white),
          title: Text("YOUR PROFILE",
            style: TextStyle(color: Colors.white),)),
      ListTile(leading: Image.asset("images/logout.png",
          color: Colors.white), title: Text("LOGOUT",
          style: TextStyle(color: Colors.white))),
    ],
    onTap: (int position) => setState(() => _currentIndex = position),
  ),
);

【参考方案1】：

Flutter Scaffolds 有一个内置的底部导航栏，您可以像使用 appbar 和 body 一样使用它。这是一个例子。

Scaffold(

appbar: Appbar( 


)

body: Container()



 bottomNavigationBar: BottomNavigationBar(items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('FooBar'),
          
        )

)

【讨论】：

但是当我们使用背景导航栏时，是否可以添加底部导航？？