Flutter 圆角矩形中的阴影

Posted 2023-02-23

【中文标题】Flutter 圆角矩形中的阴影

【英文标题】：Shadows in a rounded rectangle in Flutter

【发布时间】：2020-12-31 07:18:58

【问题描述】：

我尝试向圆形容器添加阴影，但 Flutter 会添加阴影，就好像容器是垂直矩形一样，这是我不想要的。我在 Google 上查找了这个问题，但找不到任何合适的解决方案，请帮助我。

容器代码

Container(
  width: MediaQuery.of(context).size.width * 0.82,
  height: MediaQuery.of(context).size.height * 0.28,
  padding: const EdgeInsets.symmetric(horizontal: 12),
  decoration: BoxDecoration(
    color: Color(0xFFF9D276),
    borderRadius: BorderRadius.circular(35),
    boxShadow: [
      BoxShadow(
        offset: Offset(0, 4),
        color: Color(0xFFF9D276).withOpacity(0.15),
        spreadRadius: 4,
        blurRadius: 50
      )
    ]
  ),
)

更新 @HardikKumar 的回答以及我真正想要的方式

【问题讨论】：

你想要什么样的影子？你希望影子只在一侧？

【参考方案1】：

我从你的第一张图片中得到了一些想法，你可以检查下面的代码。

    Center(
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15),
            color: Color(0xff000000),
            boxShadow: <BoxShadow>[
              new BoxShadow(
                color: Color(0x73000000),
                blurRadius: 5.0,
                spreadRadius: 1,
                offset: new Offset(-10.0, 0.0),
              ),
            ],
          ),
          width: MediaQuery.of(context).size.width * 0.82,
          height: MediaQuery.of(context).size.height * 0.25,
          child: Padding(
            padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
            child: Container(
              width: MediaQuery.of(context).size.width * 0.82,
              height: MediaQuery.of(context).size.height * 0.28,
//            padding: const EdgeInsets.symmetric(horizontal: 12),
              decoration: BoxDecoration(
                color: Color(0xFFF9D276),
                boxShadow: <BoxShadow>[
                  new BoxShadow(
                    color: Color(0xff000000),
                    blurRadius: 0.0,
                    spreadRadius: -2,
                    offset: new Offset(2.0, 0.0),
                  ),
                ],
                borderRadius: BorderRadius.circular(35),
              ),
            ),
          ),
        ),
      )

【参考方案2】：

代码中的问题：

blurRadius 为 50，当您更改 spreadRadius 或 offset 时，您不会看到阴影有任何差异

使用 0.15 的 opacity，您几乎看不到任何阴影（无论是黑色还是白色背景色）

试试这个代码：

Container(
  width: MediaQuery.of(context).size.width * 0.82,
  height: MediaQuery.of(context).size.height * 0.28,
  padding: const EdgeInsets.symmetric(horizontal: 12),
  decoration: BoxDecoration(
    color: Color(0xFFF9D276),
    borderRadius: BorderRadius.circular(35),
    boxShadow: [
      BoxShadow(
        //offset: Offset(0, 4),
        color: Color(0xFFF9D276), //edited
        spreadRadius: 4,
        blurRadius: 10  //edited
      )
    
  ),
),

它的样子：

如果您还需要什么，请告诉我。

【讨论】：

您使用的是listView？您发布的图像没有任何阴影。正确指定您的问题，您真正需要什么？

一个微微发光的阴影，只散开一点

【参考方案3】：

对不起，我测试了你的代码，阴影形状与装饰框的边框相同

Image

我只是将阴影的颜色编辑为黑色，以便看得更清楚。

也许你想使用这样的按钮，你需要使用 ButtonTheme 来使用高度和宽度，

最终版：

使用Material，它有elev​​ation属性，shapeBorder和BorderRadiusGeometry，你可以使用一个容器作为Material的宽度和高度的父级。

Link to Material Widget on Flutter

【讨论】：

很难理解你想要什么，我想你想要的是使用容器的阴影在容器周围创建模糊效果。您提供的第二张照片与第一张照片的不同之处在于阴影甚至不明显，并且颜色稍浅。如果您想要的是提升效果，也许您应该使用平面按钮并使用其高度参数，因为我认为您想使用阴影来创建该效果，所以我建议使用允许“高度”的小部件

你知道这样的小部件吗？

【参考方案4】：

您可以从此代码中使用圆角矩形:)

Container(
   width: MediaQuery.of(context).size.width * 0.82,
   height: MediaQuery.of(context).size.height * 0.28,
   decoration: BoxDecoration(
      color: Colors.green[700],
      shape: BoxShape.rectangle,
      borderRadius:BorderRadius.all(
          Radius.circular(25)
          )
      ),
       margin: EdgeInsets.only(right: 8,top: 8),
       child: IconButton(
         icon: Icon(
            Icons.send,
            color: Colors.yellow[600],
            ),
         onPressed:() 
        ),
  )