水平listview颤动的模糊版

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,
        ),
      ),
    );
  }

示例的某些部分经过硬编码，因此可以根据需要随意调整。