Question

我正在处理抖动，以显示顶部和底部渐变叠加的图像。图像顶部和底部的某些部分应显示阴影，并被其他颜色（如灰色）覆盖。

请找到我绘制的图片作为参考。

我已将Container与CachedNetworkImage一起使用。并尝试使用BoxDecoration。这没有给我预期的结果。以下代码的效果仅在图像下方应用阴影。但是我想以重叠的顶部和底部渐变效果显示在图像顶部。

请给我建议。

代码参考：

 Container(
  height: 174.0,
  width: 116.0,
    decoration: new BoxDecoration(
    boxShadow: [
    BoxShadow(
    color: Colors.red,
    blurRadius: 20.0, // has the effect of softening the shadow
    spreadRadius: 5.0, // has the effect of extending the shadow
    offset: Offset(
    10.0, // horizontal, move right 10
    10.0, // vertical, move down 10
),
)
],),
child: CachedNetworkImage(...),

代表期望的图像：

Answer 1

我在下面写下了用于顶部和底部阴影框装饰的代码，这意味着将有两个容器。您可以通过两种方式使用此解决方案，

嵌套容器，用于将图像放入Container（topShadow）=> Container（bottomShadow）=>图片
将2个容器和图像放入Stack中，将容器的顶部和底部对齐，并为容器设置固定的高度，如图片中标记的区域。（确保容器位于堆栈内部图像项的下面，否则阴影将被图像覆盖）

 decoration: new BoxDecoration(
                gradient: new LinearGradient(
                  end: const Alignment(0.0, -1),
                  begin: const Alignment(0.0, 0.6),
                  colors: <Color>[
                    const Color(0x8A000000),
                    Colors.black12.withOpacity(0.0)
                  ],
                ),

              ),


decoration: new BoxDecoration(
                gradient: new LinearGradient(
                  end: const Alignment(0.0, -1),
                  begin: const Alignment(0.0, 0.6),
                  colors: <Color>[
                    const Color(0x8A000000),
                    Colors.black12.withOpacity(0.0)
                  ],
                ),

              ),

第二种方法（第2点）的工作代码：

Stack(
            children: <Widget>[
            //image code
            Image(..),
            //top grey shadow
            Align(
                alignment: Alignment.topCenter,
                child: Container(
                  height: 50,
                  width: double.infinity,
                  decoration: new BoxDecoration(
                    gradient: new LinearGradient(
                      end: const Alignment(0.0, 0.4),
                      begin: const Alignment(0.0, -1),
                      colors: <Color>[
                        const Color(0x8A000000),
                        Colors.black12.withOpacity(0.0)
                      ],
                    ),

                  ),
                ),
              ),
              //bottom grey shadow
              Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  height: 50,
                  width: double.infinity,
                  decoration: new BoxDecoration(
                    gradient: new LinearGradient(
                      end: const Alignment(0.0, -1),
                      begin: const Alignment(0.0, 0.4),
                      colors: <Color>[
                        const Color(0x8A000000),
                        Colors.black12.withOpacity(0.0)
                      ],
                    ),

                  ),
                ),
              ),
            
            ],),

Answer 2

作为一种选择，您可以通过更改def foo(x=None): if x is None: x = [] # do stuff值来控制黑色扩散

stops

如何在抖动中显示带有顶部和底部渐变阴影的图像？

2 个答案: