【问题标题】:How to show only the TabView in a SilverAppBar如何在 SilverAppBar 中仅显示 TabView
【发布时间】:2019-02-05 00:13:27
【问题描述】:

我基本上希望在我的页面中间有一个 TabView 导航。 为此,我在 NestedScrollView 中使用了 SliverAppBar。 我的 SliverAppBar 仅由我的 TabView 组成,我将 TabView 包裹在 SliverAppBar 内,以便使用 pinned: 真正的适当性。

return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
      ),
      body: NestedScrollView(

        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
          return <Widget>[
            SliverToBoxAdapter(
                child: Container(
              height: 500,
              color: Colors.red,
            )),

          SliverAppBar(
              pinned: true,
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(
                    text: "Home",
                    icon: Icon(Icons.home),
                  ),
                  Tab(
                    text: "Example page",
                    icon: Icon(Icons.help),
                  )
                ],
                controller: _tabController,
              )),

          ];
        },
        body: TabBarView(
          children: <Widget>[
            PageExample(),
            PageExample(),
          ],
          controller: _tabController,
        ),
      ),
    );

它成功了,我的问题是我想隐藏/删除这个包裹我的 TabBar 的 SliverAppBar:

【问题讨论】:

    标签: flutter tabbar tabview nestedscrollview flutter-appbar


    【解决方案1】:

    我需要将 expandHeight 设置为 0:

    返回脚手架( 应用栏:应用栏( 标题:文本('标题'), ), 正文:NestedScrollView(

        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
          return <Widget>[
            SliverToBoxAdapter(
                child: Container(
              height: 500,
              color: Colors.red,
            )),
    
          SliverAppBar(
              expandedHeight: 0,
              pinned: true,
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(
                    text: "Home",
                    icon: Icon(Icons.home),
                  ),
                  Tab(
                    text: "Example page",
                    icon: Icon(Icons.help),
                  )
                ],
                controller: _tabController,
              )),
    
          ];
        },
        body: TabBarView(
          children: <Widget>[
            PageExample(),
            PageExample(),
          ],
          controller: _tabController,
        ),
      ),
    );
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-02-09
      • 2022-07-05
      • 2016-10-28
      • 1970-01-01
      • 2023-04-03
      • 2021-01-27
      相关资源
      最近更新 更多