如何在 CustomScrollView 中集成 SliverAppBar 以及 SliverFixedExtentList，以及带有可滚动选项卡的 Scaffold？答案

【问题标题】：How to integrate SliverAppBar within CustomScrollView along with a SliverFixedExtentList, and Scaffold with scrollable tabs?如何在 CustomScrollView 中集成 SliverAppBar 以及 SliverFixedExtentList，以及带有可滚动选项卡的 Scaffold？
【发布时间】：2020-09-04 06:01:07
【问题描述】：

我们的目标是设计一个类似于 Twitter 个人资料页面的 UI，您可以在其中检查用户的个人资料（块 A），然后您有一个标签栏（块 B）和无限可滚动的标签视图（块 C）。标签栏应该像SliverAppBar，当您向上滚动到块 A 的末尾时可以“固定”它。

我可以在CustomScrollView 中构建一个SliverAppBar，并将配置文件部分（块A）作为其background 属性，并将expandedHeight 设置为更大以查看配置文件部分。但是在这个解决方案中，我不知道如何将SliverFixedExtentList 部分制作成可滚动的选项卡视图以及如何将 SliverAppBar 制作成 TabBar。

此解决方案的代码：

  CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        pinned: true,
        expandedHeight: 450.0,
        flexibleSpace: FlexibleSpaceBar(
          collapseMode: CollapseMode.pin,
          background: Profile(), // Profile class show's the users name, picture, and bio, etc.
          title: Text('Demo'),
        ),
      ),
      SliverFixedExtentList(
        itemExtent: 50.0,
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.lightBlue[100 * (index % 9)],
              child: Text('List Item $index'),
            );
          },
        ),
      ),
    ],
  ),

另一种解决方案：如果我从构建标签栏和标签视图以及脚手架开始，那么我不知道如何将 SliverAppBar 集成为 appbar 来构建块 A。

问题是如何将这些小部件、SliverAppBar、Scaffold 和可滚动选项卡集成在一起？

感谢任何帮助，谢谢！

【问题讨论】：

“整合”是什么意思？你的代码现在是什么样子的？
整合我的意思是结合他们的特点来实现设计目标。我刚刚添加了代码。

标签： flutter flutter-layout

【解决方案1】：

我在Flutter: collapsing app bar with pinned tabBar 的帮助下成功构建了它。

      Scaffold(
        body: DefaultTabController(
          length: 2,
          child: NestedScrollView(
            headerSliverBuilder: (context, value) {
              return [
                SliverAppBar(
                  floating: true,
                  pinned: true,
                  bottom: TabBar(
                    tabs: [
                      Tab(text: "Posts"),
                      Tab(text: "Likes"),
                    ],
                  ),
                  expandedHeight: 450,
                  flexibleSpace: FlexibleSpaceBar(
                    collapseMode: CollapseMode.pin,
                    background: Profile(),
                  ),
                ),
              ];
            },
            body: TabBarView(
              children: [
                Container(
                  child: ListView.builder(
                    itemCount: 100,
                    itemBuilder: (context, index) {
                      return Container(
                        height: 40,
                        alignment: Alignment.center,
                        color: Colors.lightBlue[100 * (index % 9)],
                        child: Text('List Item $index'),
                      );
                    },
                  ),
                ),
                Container(
                  child: ListView.builder(
                    itemCount: 100,
                    itemBuilder: (context, index) {
                      return Container(
                        height: 40,
                        alignment: Alignment.center,
                        color: Colors.lightBlue[100 * (index % 9)],
                        child: Text('List Item $index'),
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

滚动前：

滚动后：

【讨论】：