【问题标题】:how can we add bottomnavigationbar in Sliver App widget我们如何在 Sliver App 小部件中添加底部导航栏
【发布时间】:2020-02-08 16:57:17
【问题描述】:

我想在 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'),
        ),
      ],


 )

【问题讨论】:

    标签: android flutter dart flutter-layout flutter-sliver


    【解决方案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),),
              ),
            ],
          ),
        );
    

    希望这能回答你的问题。

    【讨论】:

    • 另外,我需要在底部导航图标中添加导航路线,怎么做?例如:主页图标应该导航到登陆页面,交易图标应该导航到交易页面等等
    • 查看此链接(从第 3 步开始),了解如何将导航路线添加到每个导航栏项目。 willowtreeapps.com/ideas/…
    • 如果您的原始问题得到了回答,请接受/点赞,这样对其他人也有帮助。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-12-07
    • 1970-01-01
    • 2020-11-22
    • 2019-10-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多