如何使用材料设计卡制作阴影?

Posted

技术标签:

【中文标题】如何使用材料设计卡制作阴影?【英文标题】:How can I make a shadow with a material design card? 【发布时间】:2019-04-20 05:32:26 【问题描述】:

这是我想要的结果:

【问题讨论】:

你试过CardMaterial吗? 【参考方案1】:

制作自定义卡片

///custom cards

  Widget card(String image) 
    return  Container(
        child:  Image.asset(
              image,
              fit: BoxFit.cover,
            ),

        decoration: BoxDecoration(
          border: Border.all(color: Colors.blue, width: 2.0),
          color: Colors.white,
          borderRadius: BorderRadius.all(
            Radius.circular(5.0),
          ),
          boxShadow: <BoxShadow>[
            new BoxShadow(
              color: Colors.blue,
              blurRadius: 3.0,
              offset: new Offset(0.0, 3.0),
            ),
          ],
        ),
        margin: EdgeInsets.all(5.0),
        height: 150.0,
        width: 100.0,

    );
  

Box Shadow 是您所需要的。我希望这会有所帮助。

【讨论】:

【参考方案2】:

我知道用阴影制作卡片的两种方法。一种是内置Card Widget,另一种是使用Container Widget

1.使用卡片小部件

SizedBox.expand(
          child: Card(
            margin: EdgeInsets.all(10),
            elevation: 3.0,// this field changes the shadow of the card 1.0 is default
            shape: RoundedRectangleBorder(
                side: BorderSide(width: 0.2),
                borderRadius: BorderRadius.circular(20)),
          ),
        )

    使用容器小部件
 Container(
           margin: EdgeInsets.all(10),
           decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(width: 0.2),
              boxShadow: [
                BoxShadow(
                    blurRadius: 2.0,
                    spreadRadius: 0.4,
                    offset: Offset(0.1, 0.5)),
              ],
              color: Colors.white),
              )

修改 BlurRadius 和偏移量以改变容器的阴影

【讨论】:

以上是关于如何使用材料设计卡制作阴影?的主要内容,如果未能解决你的问题,请参考以下文章

如何在android材料设计风格中创建按钮阴影

Android L FAB 按钮阴影

Android L FAB 按钮阴影

使用 mdc 高程时如何添加白框阴影?

css3如何实现边框阴影

如何使用三个角和阴影制作图像视图