Question

目标是设计一个类似于Twitter的个人资料页面的UI，您可以在其中查看用户的个人资料（方框A），然后具有一个标签栏（方框B）和无限滚动的Tabview（方框C）。标签栏的作用类似于SliverAppBar，当您向上滚动到A块的末尾时可以“固定”。

我可以在SliverAppBar内构建一个CustomScrollView，并将轮廓部分（块A）作为其background属性，并设置expandedHeight较大以查看轮廓部分。但是，在此解决方案中，我不知道如何使SliverFixedExtentList部分成为可滚动的Tabview，以及如何使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作为应用栏来构建块A。

问题是如何集成这些小部件，一个SliverAppBar，一个脚手架和可滚动的选项卡？

感谢您的帮助，谢谢！

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

滚动之前：

滚动后：

如何将SliverAppBar与SliverFixedExtentList和Scaffold与可滚动选项卡集成在CustomScrollView中？

1 个答案: