Flutter:使用固定的tabBar折叠应用程序栏 [英] Flutter: collapsing app bar with pinned tabBar

问题描述

如何在Flutter中添加带有固定的tabBar的构建折叠应用程序栏，如此GIF所示

How add build collapsing app bar with pinned tabBar in Flutter like in this GIF

推荐答案

我设法如此构建

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (context, value) {
            return [
              SliverAppBar(
                floating: true,
                pinned: true,
                title: Text('Test'),
                bottom: TabBar(
                  tabs: [
                    Tab( text: "Call"),
                    Tab( text: "Message"),
                  ],
                ),
              ),
            ];
          },
          body: TabBarView(
            children: [
              Container(child: ListView.builder(
                  itemCount: 100,
                  itemBuilder: (context,index){
                return Text("Item $index");
              })),
              Container(child: ListView.builder(
                  itemCount: 100,
                  itemBuilder: (context,index){
                    return Text("Item $index");
                  })),
            ],
          ),
        ),
      ),
    );

  }
}

这篇关于Flutter:使用固定的tabBar折叠应用程序栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！