Flutter实现Widget上方白至透明渐变效果遇问题求助

你的代码存在两个核心问题：

• Stack 中使用 Expanded 完全无效，Stack 不遵循 Flex 布局约束，这会导致遮罩容器的尺寸计算异常。
• 遮罩容器设置了 width: double.infinity，会覆盖整个列表区域，同时渐变的范围和对齐方式不符合需求。

修正后的代码 #

Stack(
  alignment: Alignment.center,
  children: [
    SizedBox(
      height: 30,
      child: ListView.builder(
        scrollDirection: Axis.horizontal, // 标签列表应为横向滚动，你可能写错了滚动方向
        itemCount: 20,
        itemBuilder: (context, index) => Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          child: Chip(label: Text("标签$index")),
        ),
      ),
    ),
    // 右侧渐变遮罩
    Align(
      alignment: Alignment.centerRight,
      child: IgnorePointer(
        child: Container(
          width: 40, // 遮罩宽度可根据需求调整
          height: 30,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.white, Colors.transparent],
              begin: Alignment.centerRight,
              end: Alignment.centerLeft,
            ),
          ),
        ),
      ),
    ),
  ],
)

关键调整说明 #

• 移除无效的 Expanded，改用 Align 将遮罩固定在列表右侧。
• 给遮罩容器设置固定宽度，避免覆盖整个列表区域。
• 简化渐变颜色组，若需要更平缓的过渡效果，可添加 stops 参数，比如 stops: [0, 0.8]，让白色区域占比更大。
• 确认 ListView 的滚动方向为横向（Axis.horizontal），这是标签列表的常规布局，你之前的垂直滚动设置也可能导致效果异常。

另一种实现方式：使用 ShaderMask #

如果想要更灵活的遮罩效果，可以用 ShaderMask 包裹列表，无需额外的 Stack：

SizedBox(
  height: 30,
  child: ShaderMask(
    shaderCallback: (rect) {
      return const LinearGradient(
        begin: Alignment.centerRight,
        end: Alignment.centerLeft,
        colors: [Colors.transparent, Colors.white],
        stops: [0.8, 1], // 控制遮罩的起始位置
      ).createShader(rect);
    },
    blendMode: BlendMode.dstIn,
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: 20,
      itemBuilder: (context, index) => Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8),
        child: Chip(label: Text("标签$index")),
      ),
    ),
  ),
)

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