将自定义 boxshadow 添加到 Flutter 卡

Posted 2023-02-23

【中文标题】将自定义 boxshadow 添加到 Flutter 卡

【英文标题】：add custom boxshadow to Flutter card

【发布时间】：2018-09-11 00:11:33

【问题描述】：

我在 Flutter 应用中实现了卡片。我需要为每张卡自定义BoxShadow。如何做到这一点？

到目前为止，我尝试的是将 BoxShadow 属性添加到 Card() 构造函数中，这不起作用...

【参考方案1】：

Card 小部件没有装饰属性，因此您需要在Container 内制作卡片，然后将BoxShadow 应用于容器，

示例：

class MyCard extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new Container(
      child: new Card(
        child: new Center(
          child: new Icon(
            Icons.refresh,
            size: 150.0,
          ),
        ),
      ),
      decoration: new BoxDecoration(
        boxShadow: [
          new BoxShadow(
            color: Colors.black,
            blurRadius: 20.0,
          ),
        ],
      ),
    );
  

【讨论】：

谢谢，我想要的另一件事是，标题文本周围的边距，以便字幕和标题之间有间隙，你能帮我吗？

我不明白你的意思，但如果你想添加一些边距，你可以轻松地将其添加到容器中：margin: const EdgeInsets.all(10.0)

我正在使用这个。

【参考方案2】：

查看卡片小部件

      @override
      Widget build(BuildContext context) 
        return Scaffold(
            backgroundColor: Color(0xFFdde0e3),
            body: SingleChildScrollView(
              child: Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Card(
                      elevation:5,
                      margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 16.0),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(0.0),
                      ),
                      child: Container(
                        height: 200,
                      ),
                    )
                  ],
                ),
              ),
            ));
      

【参考方案3】：

通过获取 boxShadow 属性，只需将卡片包装在容器中，即可将阴影应用到卡片小部件。

new Container(
  width: 100,
  height: 100,
  decoration: new BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(.5),
        blurRadius: 20.0, // soften the shadow
        spreadRadius: 0.0, //extend the shadow
        offset: Offset(
          5.0, // Move to right 10  horizontally
          5.0, // Move to bottom 10 Vertically
        ),
      )
    ],
  ),
),

【参考方案4】：

主要讨论阴影时，可以通过调整blurness 和color 来改变阴影的外观。

因此，您无需编写额外的代码行即可执行此类操作。

Card(
  elevation: 4,  // Change this 
  shadowColor: Colors.black12,  // Change this 
  child: Center(child: Text('Hey, dude.')),
),

【讨论】：

elevation 和 shadowColor 仅在您希望应用阴影效果而不应用偏移和模糊效果时才有效。 offset和blurRadius可以在BoxShadow对象中定义，这不能通过调整这两个参数来实现。