SliverAppBar - SliverList 一直滚动到顶部

Question

我目前正在使用 SliverAppBar，在滚动 sliverList 时遇到问题。

在上图中，我的TabBar一直延伸到通知栏。当 sliverAppBar 崩溃时，我希望我的 Tabbar 粘在 AppBar 的底部。

这是我正在尝试的代码...

    return Scaffold(
  body: CustomScrollView(

    slivers: <Widget>[
      SliverAppBar(
        //backgroundColor: Colors.transparent,
        actions: <Widget>[
          IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
          IconButton(icon: Icon(Icons.share), onPressed: () {})
        ],
        floating: false,
        pinned: true,
        expandedHeight: getHeight(context),
        flexibleSpace: FlexibleSpaceBar(
          title: Text("text"),
          background: Container(
            height: double.infinity,
            width: double.infinity,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(currentImage),
                    fit: BoxFit.cover)),
          ),
        ),
      ),
      SliverList(
        delegate: SliverChildListDelegate(bottomListView),
      ),
    ],
  )
  ,
);

Answer 1

可能是bug：

https://github.com/flutter/flutter/issues/22393

所以你可以使用这个 package，它解决了这个问题。

Answer 2

只需使用 SliverAppBar 的 bottom 参数并将 TabBar 传递给它。在 FlexibleSpaceBar 中添加 titlePadding 以从 TabBar 添加填充。如果需要改变TabBar的颜色，可以勾选this question.

请注意 FlexibleSpaceBar 中的标题和 AppBar 中的操作图标，因为长标题会导致最小化的 appbar 重叠。

    child: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          //backgroundColor: Colors.transparent,
          actions: <Widget>[
            IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
            IconButton(icon: Icon(Icons.share), onPressed: () {})
          ],
          floating: false,
          pinned: true,
          expandedHeight: getHeight(context),
          flexibleSpace: FlexibleSpaceBar(
            title: Text("text"),
            // Adding padding from TabBar
            titlePadding: EdgeInsets.only(bottom: 64, left: 60),
            background: Container(
              height: double.infinity,
              width: double.infinity,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage(currentImage),
                      fit: BoxFit.cover)),
            ),
          ),
          // Adding TabBar to the bottom of SliverAppBar
          bottom: TabBar(
            tabs: [
              for (var i = 0; i < 3; i++)
                Tab(
                  text: 'test $i',
                ),
            ]
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(bottomListView),
        ),
      ],
    ),

SliverAppBar - SliverList 一直滚动到顶部

SliverAppBar - SliverList is Scrolling all the way to the top

flutter

dart

flutter-layout

flutter-sliver

flutter-appbar