SliverAppBar 不会在 AppBar 中淡出

Question

我真的很喜欢使用 Slivers，但 SliverAppBar 确实有一个问题：通常，我使用 SliverAppBar Widget 来创建一个具有视差效果背景图像的 AppBar。所以我只使用灵活的空间，不幸的是，每当你向下滚动时，它就会被 AppBar 部分挡住。我尝试通过将颜色值设置为透明来使 AppBar 部分透明，但它所做的只是使整个事物（包括弹性空间）透明。

有没有一种方法可以仅使用 SliverAppBar 的弹性空间，而不会在向下滚动时淡入 AppBar 部分？

这是我使用的代码：

SliverAppBar(
          expandedHeight: 220,
          pinned: false,
          forceElevated: true,
          backgroundColor: Colors.transparent,
          stretch: true,
          leading: Container(),
          flexibleSpace: FlexibleSpaceBar(
            collapseMode: CollapseMode.pin,
            background:Stack(
              children: <Widget>[
                Image(
                  fit: BoxFit.cover,
                  width: MediaQuery.of(context).size.width,
                  image: AssetImage('assets/images/image2.png'),
                ),
                Positioned(
                  bottom: 0,
                  child: Container(
                    height: 110,
                    width: MediaQuery.of(context).size.width,
                    color: Colors.grey,
                  ),
                ),
                Positioned(
                  bottom: 10,
                  left: 10,
                  child: CircleAvatar(
                    radius: 45,
                    backgroundImage: AssetImage('assets/images/image.png'),
                  ),
                ),
                Positioned(
                  bottom: 77,
                  left: 110,
                  child: Container(
                    width: MediaQuery.of(context).size.width -110 -60,

                    child: Text(
                      'Name...',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: TextStyle(
                          fontSize: 20,
                          color: Colors.white
                      ),
                    ),
                  ),
                ),
                Positioned(
                  bottom: 63,
                  left: 110,
                  child: Container(
                    width: MediaQuery.of(context).size.width -110 -60,

                    child: Text(
                      'description...',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: TextStyle(
                          fontSize: 14,
                          color: Colors.white70
                      ),
                    ),
                  ),
                ),

                Positioned(
                  bottom: 5,
                  left: 110,
                  child: Container(
                    width: MediaQuery.of(context).size.width-110,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,

                      children: <Widget>[

                      ],
                    ),
                  ),
                ),

              ],
            ),
          ),

        ),

希望这些图像有助于解释我的问题： 灵活空间如下所示：图 1 但一旦向下滚动，灵活空间就会消失，如下图所示：图 2 我不想灵活空间消失。

Answer 1

您可能已经找到了答案，但我想如果像我这样的人遇到您的问题，这可能就是您正在寻找的答案。

FlexibleSpaceBar 包含淡出动画，排除它的唯一方法是编写自己的 LayoutBuilder 来处理折叠。

以下是如何使用 LayoutBuilder 创建自定义的flexibleSpace Widget 的代码示例。

NestedScrollView(
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          SliverAppBar(
            titleSpacing: 0,
            pinned: false,
            backgroundColor: Colors.transparent,
            automaticallyImplyLeading: false,
            elevation: 0.0,
            actions: [
              IconButton(
                splashRadius: 20,
                icon: Icon(
                  FontAwesomeIcons.cog,
                  color: Colors.grey[200],
                ),
                onPressed: () {
                 
                },
              ),
            ],
            toolbarHeight: kToolbarHeight,
            expandedHeight: maxExtent,
            flexibleSpace: LayoutBuilder(
              builder: (context, constraints) {
                double currentExtent = constraints.maxHeight;
                final double deltaExtent = maxExtent - minExtent;
                // 0.0 -> Expanded
                // 1.0 -> Collapsed to toolbar
                final double t =
                    (1.0 - (currentExtent - minExtent) / deltaExtent)
                        .clamp(0.0, 1.0) as double;

                return Stack(
                  fit: StackFit.loose,
                  overflow: Overflow.clip,
                  children: [
                    Positioned(
                      top: _getCollapsePadding(t),
                      left: 0.0,
                      right: 0.0,
                      height: maxExtent,
                      child: Wrap(
                        crossAxisAlignment: WrapCrossAlignment.start,
                        children: [
                          //Insert Widgets add to your flexible space
                        ],
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
        ];
      },
      body: Container() 
    ),

  double get maxExtent => 300;
  double get minExtent => kToolbarHeight;

  double _getCollapsePadding(double t) {
    final double deltaExtent = maxExtent - minExtent;
    return -Tween<double>(begin: 0.0, end: deltaExtent / 4).transform(t);
  }