时间戳

首页 > 解决方案 > 如何将 SliverAppBar 与 SliverFixedExtentList 以及带有可滚动选项卡的 Scaffold 集成到 CustomScrollView 中？

flutter - 如何将 SliverAppBar 与 SliverFixedExtentList 以及带有可滚动选项卡的 Scaffold 集成到 CustomScrollView 中？

问题描述

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

SliverAppBar我可以在 a内构建一个CustomScrollView以配置文件部分（块 A）作为其background属性，并设置expandedHeight更大以查看配置文件部分。但是在这个解决方案中，我不知道如何将SliverFixedExtentList部件变成可滚动的 tabviews 以及如何使 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'),
            );
          },
        ),
      ),
    ],
  ),

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

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

任何帮助表示赞赏，谢谢！

标签： flutterflutter-layout

解决方案

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

滚动前：

滚动前

滚动后：

滚动后

推荐阅读