Flutter:折叠带有固定 tabBar 的应用栏

M.A*_*Ali 2 flutter flutter-layout

如何在 Flutter 中添加带有固定 tabBar 的构建折叠应用栏,就像在这个 GIF 中一样 动图

M.A*_*Ali 6

我设法像这样构建它

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

  }
}
Run Code Online (Sandbox Code Playgroud)