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

目标是设计一个看起来像Twitter个人资料页面的UI，在这里你可以查看用户的个人资料（块A），然后你有一个选项卡栏（块B）和无限滚动的选项卡视图（块C）。选项卡栏的作用应类似于

SliverAppBar

，当您向上滚动到块a的末尾时，可以将其“固定”

我可以在

CustomScrollView

中构建一个

SliveAppBar

，将轮廓部分（块a）作为其

background

属性，并将

expandedHeight

设置为Biger以查看轮廓部分。但是，在这个解决方案中，我不知道如何将

SliverFixedExtentList

部分设置为可滚动的选项卡视图，以及如何将SliverAppBar设置为选项卡栏

此解决方案的代码：

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

CustomScrollView(
条子：[
滑杆(
对,，
扩展高度：450.0，
flexibleSpace:FlexibleSpaceBar(
collapseMode:collapseMode.pin，
背景：Profile（），//Profile类显示用户名、图片和个人简历等。
标题：文本（“演示”），
),
),
SliverFixedExtentList(
项目范围：50.0，
代表：SliverChildBuilderDelegate(
（BuildContext上下文，int索引）{
返回容器(
对齐：对齐.center，
颜色：颜色。浅蓝色[100*（索引%9）]，
子项：文本（“列表项$index”），
);
},
),
),
],
),

另一个解决方案：如果我开始构建选项卡栏和选项卡视图以及脚手架，那么我不知道如何将

SliverAppBar

集成为appbar来构建块a

问题是如何将这些小部件、滑动应用条、支架和可滚动选项卡集成在一起

---

感谢您的帮助，谢谢

我设法在他的帮助下建造了它

滚动前：

滚动后：

---

你所说的“整合”是什么意思？你的代码现在看起来是什么样子？我所说的集成是指结合它们的特性来实现设计目标。我刚刚添加了代码。

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