Flutter Container BoxShadow 不显示

Posted 2023-02-23

【中文标题】Flutter Container BoxShadow 不显示

【英文标题】：Flutter Container BoxShadow doesn't show

【发布时间】：2019-09-21 03:34:21

【问题描述】：

这是我此刻的代码：

ClipRRect(
  borderRadius: BorderRadius.circular(11),
  child: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: FractionalOffset.bottomLeft,
        end: FractionalOffset.topRight,
        colors: <Color>[Colors.purple, AppBaseColors.orange],
      ),
      boxShadow: [BoxShadow(color: Colors.yellow)]
    ),
    child: Material(
      child: InkWell(
        onTap: () 
          print("tapped");
        ,
        child: Container(
          width: ButtonTheme.of(context).minWidth,
          height: ButtonTheme.of(context).height,
          child: Center(
            child: Text(
              "log in",
              style: TextStyle(
                  color: Colors.white, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
      color: Colors.transparent,
    ),
  ),
),

我做了什么：

在第一个

Container

中添加

boxShadow

在第二个

Container

中添加

boxShadow

添加另一个

Container

，其中

boxShadow

作为

ClipRRect

的父级 将

Material

中的

boxShadow

添加为 shadowColor（ofc 不起作用，因为我没有任何类型的阴影） 在上面的所有情况下，还添加了

spreadRadius

和

blurRadius

，但没有任何改变。

知道我做错了什么吗？

【问题讨论】：

我认为材质小部件隐藏了盒子阴影效果我建议删除容器并为材质添加高程或删除材质小部件

我不能这样做，或者至少我不知道如何... .此外，如果我要删除第一个容器并在第二个容器上添加 BoxDecoration，我也会告别点击效果，因为。因此，至少就我目前所掌握的知识而言，这对我来说并不是一个解决方案。

点击效果由 inkewell 小部件保证，所以我认为您不必担心

【参考方案1】：

您需要进行以下更改：

删除ClipRRect 小部件。 在BoxDecoration 中添加borderRadius。

将Offset 添加到您的BoxShadow。

Container(
          decoration: BoxDecoration(
              color: Colors.blue,
              gradient: LinearGradient(
                begin: FractionalOffset.bottomLeft,
                end: FractionalOffset.topRight,
                colors: <Color>[Colors.purple, Colors.orange],
              ),
              borderRadius: BorderRadius.circular(11),
              boxShadow: [
                BoxShadow(color: Colors.yellow, offset: Offset(5.0, 5.0))
              ]),
          child: Material(
            borderRadius: BorderRadius.circular(11),
            clipBehavior: Clip.hardEdge,
            child: InkWell(
              onTap: () 
                print("tapped");
              ,
              child: Container(
                width: ButtonTheme.of(context).minWidth,
                height: ButtonTheme.of(context).height,
                child: Center(
                  child: Text(
                    "log in",
                    style: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ),
            color: Colors.transparent,
          ),
        ),

【讨论】：

实际上，这几乎是正确的，使用此解决方案您会遇到问题，如果您单击按钮，则单击效果不会有圆角。你能不能也解决这个最后的细节？

done ，在 Material 小部件中添加了 borderRadius 和 clipBehavior。不要忘记使用热重启

【参考方案2】：

我通过删除clipBehavior 或将其设置为Clip.none 来修复我的问题。