Question

我正在尝试在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
    );
}

CustomTabWidget

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),
      ),
    );
  }

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

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

有人可以帮助我吗？

Answer 1

此项目在我的项目上

 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 and SliverAppBar that hides when you scroll down

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

1 个答案: