Flutter基础组建使用- Container
2021-05-17 本文已影响0人
Thelastgame
1、添加圆角
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.teal,
borderRadius: BorderRadius.circular(20), // 也可以上下左右单独设置,如下
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15),
),
),
)
2、添加阴影
Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.teal,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.red, // 阴影颜色
blurRadius: 4, // 阴影模糊层度(大就更透明更扩散)
offset: Offset(4, 8), // 阴影起始位置
spreadRadius: 2, //阴影模糊大小
),
],
),
)
3、添加渐变
Container(
width: 500,
height: 500,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
gradient: LinearGradient(
colors: [
Colors.red, // 渐变颜色 从red->amber
Colors.amber,
],
begin: Alignment.topLeft, // 开始位置
begin: Alignment(10,20), // 也可以是具体的坐标值
end: Alignment.bottomRight, // 结束位置 同上
),
),
child: Text('container'),
),
4、形状(shape)
Container(
width: 500,
height: 500,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle, // 默认BoxShape.rectangle(此属性和borderRadius不可共存)
),
child: Text('container'),
),
5、容器限定
Container(
width: 500,
height: 500,
alignment: Alignment.center,
constraints: BoxConstraints(
maxHeight: 200, // 最大高度
maxWidth: 260, // 最大宽度
minWidth: 100, // 最小宽度
minHeight: 100 // 最小高度
),
)