Flutter SliverAppBar拉伸时Android出现条纹伪影求助

我使用带有flexibleSpace的SliverAppBar，代码如下：

SliverAppBar(
            expandedHeight: 280,
            pinned: true,
            leadingWidth: 44,
            stretch: true,
            elevation: 0,
            backgroundColor: context.colors.colorClubSectionAppBar,
            actions: [
              ...
            ],
            leading: GestureDetector(
              ...
            ),
            flexibleSpace: LayoutBuilder(
              builder: (context, constraints) {
                const maxExtent = 322.0;
                final currentExtent = constraints.biggest.height;

                _iconScale = currentExtent / maxExtent;

                return Stack(
                  children: [
                    FlexibleSpaceBar(
                      centerTitle: true,
                      collapseMode: CollapseMode.pin,
                      title: InvisibleExpandedHeader(
                        child: Text(
                          widget.section.name,
                          style: title3SemiBold.copyWith(
                            color: context.colors.colorTextWhiteFixed,
                          ),
                        ),
                      ),
                      background: Stack(
                        fit: StackFit.expand,
                        alignment: Alignment.bottomCenter,
                        children: [
                          CachedNetworkImage(
                            imageUrl: widget.section.background,
                            fit: BoxFit.cover,
                          ),
                          Positioned(
                            right: 0,
                            bottom: _iconScale <= 1 ? 80 : 80 * _iconScale,
                            child: Transform.scale(
                              scale: _iconScale <= 1 ? 1 : _iconScale,
                              alignment: Alignment.topRight,
                              child: CachedNetworkImage(
                                imageUrl: widget.section.extraIcon,
                                width: 170,
                                height: 170,
                              ),
                            ),
                          ),
                          Positioned(
                            bottom: 0,
                            left: 0,
                            right: 0,
                            child: Stack(
                              children: [
                                ClipRRect(
                                  borderRadius: const BorderRadius.only(
                                    topLeft: Radius.circular(16),
                                    topRight: Radius.circular(16),
                                  ),
                                  child: Container(
                                    padding: const EdgeInsets.fromLTRB(16, 12, 16, 20),
                                    decoration: BoxDecoration(
                                      color: context.colors.colorBase,
                                    ),
                                    child: Column(
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: [
                                        Text(widget.section.name, style: title25Semibold),
                                        Padding(
                                          padding: const EdgeInsets.symmetric(vertical: 12),
                                          child: Text(
                                            widget.section.description,
                                            maxLines: 3,
                                            overflow: TextOverflow.ellipsis,
                                            style: textRegular.copyWith(
                                              color: context.colors.colorTextAccentSecondary,
                                            ),
                                          ),
                                        ),
                                        Divider(
                                          height: 0,
                                          color: context.colors.colorOutlineStrong,
                                        ),
                                  ...
                       
          ),

当向上滚动出现过度滚动导致AppBar“拉伸”时，仅Android端会出现条纹状伪影（iOS端运行正常），推测该问题可能与LayoutBuilder有关，恳请提供解决方案。

（条纹伪影示意图：Android端拉伸AppBar时界面出现横向条纹状异常绘制）

解决方案 #

• 限制缩放比例最大值
  过度拉伸时_iconScale会超出预期范围，导致绘制错位。给缩放值添加上限：

  _iconScale = min(currentExtent / maxExtent, 1.2); // 限制最大缩放比例为1.2，可根据需求调整
  

• 添加抗锯齿与高质量过滤
  Android端拉伸时的像素对齐问题可通过提升图片和变换的过滤质量解决：

  // 背景图片添加过滤质量
  CachedNetworkImage(
    imageUrl: widget.section.background,
    fit: BoxFit.cover,
    filterQuality: FilterQuality.high,
  )
  
  // 缩放组件添加过滤质量
  Transform.scale(
    scale: _iconScale <= 1 ? 1 : _iconScale,
    alignment: Alignment.topRight,
    filterQuality: FilterQuality.high,
    child: CachedNetworkImage(...),
  )
  

• 替换LayoutBuilder为滚动监听
  LayoutBuilder在拉伸时会频繁触发重建，改用NotificationListener监听滚动事件计算缩放值，减少不必要的UI重建：

  NotificationListener<ScrollNotification>(
    onNotification: (notification) {
      double newScale = _iconScale;
      if (notification is OverscrollNotification && notification.overscroll < 0) {
        // 处理向上过度拉伸
        final stretchOffset = -notification.overscroll;
        newScale = (280 + stretchOffset) / 322.0;
      } else if (notification is ScrollUpdateNotification) {
        // 正常滚动时获取AppBar当前高度计算缩放
        final renderObject = context.findRenderObject() as RenderSliver;
        final currentExtent = renderObject.geometry!.maxPaintExtent;
        newScale = currentExtent / 322.0;
      }
      if (newScale != _iconScale) {
        setState(() => _iconScale = newScale);
      }
      return true;
    },
    child: CustomScrollView(
      slivers: [
        SliverAppBar(
          expandedHeight: 280,
          pinned: true,
          stretch: true,
          // 移除flexibleSpace内的LayoutBuilder，直接使用Stack
          flexibleSpace: Stack(
            children: [
              // 原FlexibleSpaceBar内容
            ],
          ),
          // 其他属性不变
        ),
        // 其他Sliver组件
      ],
    ),
  )
  

• 添加背景色覆盖空白
  在flexibleSpace的最外层Stack添加背景色，避免拉伸时出现透明区域导致的绘制异常：

  Stack(
    children: [
      // 添加与AppBar一致的背景色
      Container(color: context.colors.colorClubSectionAppBar),
      FlexibleSpaceBar(...),
      // 其他子组件
    ],
  )
  

内容的提问来源于stack exchange，提问作者arcthurus