我们如何在 Sliver App 小部件中添加 bottomnavigationbar

Question

我想在 Scrollable sliver App Widget 中添加这个固定的 bottomNavigationbar，有没有什么办法可以做到这一点，或者有什么替代方法可以做到这一点

BottomNavigationBar(

        items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.card_giftcard),
          title: Text('Deals'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.favorite),
          title: Text('Favourites'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.portrait),
          title: Text('Profile'),
        ),
      ],


 )

Answer 1

您当然可以使用 NestedScrollView 将上述 bottomNavigationBar 添加到 SliverAppBar 并在其外部添加 bottomNavigationBar。这是工作代码：

return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text("Sliver with bottomnavbar",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      )),
                  background: Image.network(
                    "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                    fit: BoxFit.cover,
                  )),
            ),
          ];
        },
        body: Center(
          child: Text("Text"),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home', style: TextStyle(color: Colors.black),),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.card_giftcard),
            title: Text('Deals',style: TextStyle(color: Colors.black),),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text('Favourites',style: TextStyle(color: Colors.black),),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.portrait),
            title: Text('Profile',style: TextStyle(color: Colors.black),),
          ),
        ],
      ),
    );

希望这能回答您的问题。

我们如何在 Sliver App 小部件中添加 bottomnavigationbar

how can we add bottomnavigationbar in Sliver App widget

android

flutter

dart

flutter-layout

flutter-sliver