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

Posted 2023-03-25

【中文标题】如何在颤动中显示具有顶部和底部渐变阴影的图像？

【英文标题】：How to display image with top and bottom gradient shadow in flutter?

【发布时间】：2020-07-12 01:39:51

【问题描述】：

我正在研究颤振以显示具有顶部和底部渐变叠加的图像。 图像顶部和底部的某些部分应显示阴影，如灰色等其他颜色覆盖。

请找到我绘制的附图以供参考。

我使用了带有 CachedNetworkImage 的 Container。并尝试使用 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(...),

代表期望的图片：

【参考方案1】：

作为一个选项，您可以通过更改 stops 值来控制黑色扩散

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 116.0,
            height: 174.0,
            foregroundDecoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.black, Colors.transparent, Colors.transparent, Colors.black],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: [0, 0.2, 0.8, 1],
              ),
            ),
            child: Image.network('https://i.picsum.photos/id/200/400/600.jpg'),
          ),
        ),
      ),
    );
  

【讨论】：

我已经实现了@Henok 建议的方式。是的，您的方法也将起作用。感谢您的回复。

【参考方案2】：

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

嵌套容器，就是把你的图片放到Container(topShadow) => Container(bottomShadow)=> Image

将您的 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)
                      ],
                    ),

                  ),
                ),
              ),
            
            ],),

【讨论】：

感谢@Henok 的宝贵回复。它完美地为我工作。你节省了我很多时间。

对于顶部容器，我使用了以下值 "end: const Alignment(0.0, 0.6), begin: const Alignment(0.0, -1),"

我很高兴它成功了，你可以玩弄位置和颜色，你用的是第一个还是第二个？

我使用了第二种方法，使用堆栈来保存 imageview 和我的 2 个容器（顶部和底部），其中 Align() 作为父级。所以我将它设置在 topCenter 上，另一个设置在 bottomCenter 上。

感谢编辑，我也更喜欢第二种方法。