如何使用材料设计卡制作阴影?
Posted
技术标签:
【中文标题】如何使用材料设计卡制作阴影?【英文标题】:How can I make a shadow with a material design card? 【发布时间】:2019-04-20 05:32:26 【问题描述】:这是我想要的结果:
【问题讨论】:
你试过Card
或Material
吗?
【参考方案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 和偏移量以改变容器的阴影
【讨论】:
以上是关于如何使用材料设计卡制作阴影?的主要内容,如果未能解决你的问题,请参考以下文章