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

只需使用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),
        ),
      ],
    ),

Answer 2

可能是一个错误：

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

因此您可以使用此package，它解决了此问题。