水平列表视图颤动的模糊边缘

Question

我想模糊水平 ListView 的左右边缘。 现在我得到的就是这个：

可以吗？

Answer 1

可以通过以下几种方式完成：

• 将 Stack 与 3 个 Positioned 小部件一起使用（左模糊，定义宽度，z=1，全宽列表，z = 0，右模糊，定义宽度，z=1）
• 使用ShaderMask

我将为第二种方法提出一个示例代码。这就是您的 BlurredHorizontalListView 构建方法的样子：

@override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      child: ShaderMask(
        shaderCallback: (Rect bounds) {
          return LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: <Color>[
              Colors.transparent,
              Colors.white,
              Colors.transparent
            ],
          ).createShader(bounds);
        },
        blendMode: BlendMode.dstIn,
        child: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            
            return Card(
              child: Container(
                width: 220,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Image.network(
                      YOUR_URL,
                      height: 190,
                      fit: BoxFit.cover,
                    ),
                  ],
                ),
              ),
            );
          },
          scrollDirection: Axis.horizontal,
          itemCount: 3,
        ),
      ),
    );
  }

示例的部分内容是硬编码的，因此请随时根据需要进行调整。