Flutter：使用固定的tabBar折叠应用程序栏

Question

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

Answer 1

您可以使用SilverAppBar

SliverAppBar(
  expandedHeight: 150.0,
  floating:true,
  pinned: true,
  flexibleSpace: const FlexibleSpaceBar(
    title: Text('Available seats'),
  ),
  actions: <Widget>[
    IconButton(
      icon: const Icon(Icons.add_circle),
      tooltip: 'Add new entry',
      onPressed: () { /* ... */ },
        ),
      ]
    )

参考

• SliverAppBar Class
• SliverAppBar Widget of the week

Answer 2

我设法如此构建

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

  }
}

Answer 3

将TabBarView与SliverAppBar分开。

通过将SliverAppBar的{​​{1}}设置为0，并使elevation使用shadow或elevation来使其看起来连续，