Flutter中如何实现带上下渐隐效果的滚动列表视图？

这里给你两种最实用的实现思路，都是用Flutter原生组件就能搞定，无需额外依赖：

方法一：用ShaderMask实现内容遮罩（推荐） #

ShaderMask可以直接给子组件添加渐变遮罩，让列表内容本身在上下边缘逐渐透明，适配任何背景色，代码示例：

ShaderMask(
  blendMode: BlendMode.dstOut,
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [
        Colors.transparent,
        Colors.black,
        Colors.black,
        Colors.transparent,
      ],
      stops: const [0.0, 0.05, 0.95, 1.0], // 调整数值控制渐隐范围
    ).createShader(bounds);
  },
  child: ListView.builder(
    itemCount: 50,
    itemBuilder: (context, index) {
      return ListTile(title: Text('列表项 $index'));
    },
  ),
)

• 关键参数说明：
  • blendMode: BlendMode.dstOut：让渐变透明区域把列表内容"挖掉"，实现渐隐效果
  • stops数组：0.0-0.05是顶部渐隐区，0.95-1.0是底部渐隐区，中间0.05-0.95是完全可见的内容区
  • 修改stops数值可调整渐隐宽度，比如把0.05改成0.1，顶部渐隐区会更宽

方法二：用Stack叠加渐变层 #

如果你的列表背景是纯色，可以用Stack在列表顶部和底部各放一个渐变容器，模拟渐隐效果：

Stack(
  children: [
    ListView.builder(
      itemCount: 50,
      itemBuilder: (context, index) {
        return ListTile(title: Text('列表项 $index'));
      },
    ),
    // 顶部渐变层
    Positioned(
      top: 0,
      left: 0,
      right: 0,
      height: 30, // 渐变层高度
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.white, Colors.transparent], // 颜色需和页面背景一致
          ),
        ),
      ),
    ),
    // 底部渐变层
    Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      height: 30,
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.bottomCenter,
            end: Alignment.topCenter,
            colors: [Colors.white, Colors.transparent],
          ),
        ),
      ),
    ),
  ],
)

• 注意点：渐变容器的颜色必须和页面背景色完全一致，否则会出现违和色块

优先推荐第一种ShaderMask的实现方式，适配场景更多，无需考虑背景色匹配问题。

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