Question

我真的很喜欢使用Sliver，但是SliverAppBar确实存在问题：通常，我使用SliverAppBar窗口小部件来创建一个具有带视差效果的背景图像的AppBar。因此，我所使用的只是灵活的空间，不幸的是，当您向下滚动时，它会被AppBar部分阻塞。我尝试通过将颜色值设置为透明来使AppBar部分透明，但是它所做的只是使整个事物（包括flexiblespace）透明。

是否有一种方法可以只使用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>[

                      ],
                    ),
                  ),
                ),

              ],
            ),
          ),

        ),

希望这些图片有助于解释我的问题：弹性空间如下所示：Image 1 但是一旦您向下滚动，灵活的空间就会消失，如下图所示：Image 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);
  }

SliverAppBar不会在AppBar中消失

1 个答案: