时间戳

首页 > 解决方案 > Flutter - 如何在 sliverappbar 中添加自定义标签栏？

flutter - Flutter - 如何在 sliverappbar 中添加自定义标签栏？

问题描述

我正在尝试在 SliverAppBar 中实现自定义标签栏小部件。到目前为止，我已经尝试将我的 CustomTabBar 包装在 PreferredSize 小部件中。

这是我的代码：

Widget _buildBody(){
   return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            leading: Container(),
            backgroundColor: Colors.transparent,
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.pin,
              background: Column(
                children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Text(
                      "Item 1"
                    ),
                    Text(
                      "Item 2"
                    ),
                    Text(
                      "Item 3"
                    )
                  ],
                )
              ]),
            ),
          bottom: PreferredSize(
           preferredSize: Size.fromHeight(kToolbarHeight),
           child: CustomTabWidget(
           items: ['Challenge', 'My friends'],
           activeColor: secondaryColor,
           currentIndex: currentIndex,
           backgroundColor: tabColor,
           activeTextColor: Colors.white,
           backgroundTextColor: Colors.white,
           onTabSelect: (int index) {
            onLeaderboardTabSelect(index);
          },
        ),
       ),];
      },
      body: ListView.separated(
        itemCount: 50,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('row $index'),
          );
        },
        separatorBuilder: (context, index) {
          return Divider();
        },
      ) // should return listview depending on the tab
    );
}

自定义标签小部件

Widget build(BuildContext context) {
    return Container(
      height: height,
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(
          30.0,
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: _buildItems(context),
      ),
    );
  }

该代码成功显示了我的自定义标签栏小部件，但每当我向下滚动或点击另一个标签时，它就会消失。

我可能忽略了代码中的某些内容。

谁能帮我？

标签： flutterdart

解决方案

这项工作在我的项目上 

 class TabBarInSliverAppbar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
              title: Text("Tabbar in SliverAppbar Example"),
              pinned: true,
              floating: true,
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(
                    text: "First Tab",
                  ),
                  Tab(
                    text: "Second Tab",
                  ),
                ],
              ),
            ),
            SliverToBoxAdapter(
              child: TabBarView(
                children: <Widget>[
                  Center(
                    child: Text("First Tab"),
                  ),
                  Center(
                    child: Text("Second Tab"),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

您还可以查看此链接：向下滚动时隐藏的 Flutter TabBar 和 SliverAppBar

推荐阅读