Flutter：使用固定的 tabBar 折叠应用栏答案

【问题标题】：Flutter: collapsing app bar with pinned tabBarFlutter：使用固定的 tabBar 折叠应用栏
【发布时间】：2019-09-03 12:30:29
【问题描述】：

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

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

我设法像这样构建它

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

  }
}

【讨论】：

伙计，接受你自己的答案。

【解决方案2】：

您可以使用 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: () { /* ... */ },
        ),
      ]
    )

参考文献

【讨论】：

我知道 slivvers，但我无法像 gif 那样折叠应用栏并固定到标签栏

【解决方案3】：

将TabBarView 与SliverAppBar 分开。

通过将SliverAppBar 的elevation 设置为0 并使用shadow 或elevation 作为elevation，使其看起来连续。

【讨论】：