1、Container
alignment | 对齐方式:https://blog.csdn.net/mengks1987/article/details/84852235 |
padding | padding |
width | width |
height | height |
margin | margin |
color | 背景颜色 |
decoration | 背景的各种样式:https://blog.csdn.net/mengks1987/article/details/84856456 |
foregroundDecoration | 样式绘制在子控件的前面,用法同 decoration,如果设置的颜色或者过度色不透明将挡住子控件 |
constraints | 最大/小 宽/高的约束 |
transform | 旋转、平移等3D操作 |
child | 子控件 |
Center(
child: Container(
width: 300,
height: 100,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Color(0x330000FF),
border:
Border.all(color: Colors.red, width: 2, style: BorderStyle.solid),
borderRadius: BorderRadius.all(Radius.circular(10)),
boxShadow: [BoxShadow(color: Colors.blue, offset: Offset(5, 5))],
gradient: LinearGradient(colors: [Colors.blue, Colors.yellow]),
backgroundBlendMode: BlendMode.srcATop,
shape: BoxShape.rectangle
),
foregroundDecoration: FlutterLogoDecoration(),
transform: Matrix4.rotationZ(1),
child: new Text(
"TextDirection.rtl topStart",
textDirection: TextDirection.rtl,
style: TextStyle(),
),
alignment: AlignmentDirectional.topStart,
));
2、Padding
Padding 非常简单就2属性:
1、设置padding值
2、子控件
demo
Padding(
padding: EdgeInsets.all(100),
child: Container(
color: Colors.blue,
),
);
3、Center
Center就是子控件在中间
属性 | 说明 |
---|---|
widthFactor | 如果不为null,Center的width = 子控件的width* widthFactor |
heightFactor | 如果不为null,Center的 height = 子控件的 height* heightFactor |
注意如果2个都不设置,Center则尽可能的大。
Column(
children: <Widget>[
Center(
heightFactor: 2,
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
),
Container(
height: 100,
width: 100,
color: Colors.blue,
)
],
);
效果:
4、Align
可以自定义子控件的位置
属性 | 说明 |
---|---|
alignment | 默认:Alignment.center 对齐方式:https://blog.csdn.net/mengks1987/article/details/84852235 |
widthFactor | 如果不为null,Center的width = 子控件的width* widthFactor |
heightFactor | 如果不为null,Center的 height = 子控件的 height* heightFactor |
demo
Align(
alignment: Alignment.bottomCenter,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
);
效果:
5、FittedBox
属性 | 说明 | |
---|---|---|
BoxFit.fill | 按照比例填充 | |
BoxFit.cover | 尽可能小的填充 | |
BoxFit.fitWidth | 按照宽来填充 | |
BoxFit.fitHeight | 按照高来填充 | |
BoxFit.none | ||
BoxFit.scaleDown | ||
alignment | 默认:Alignment.center 对齐方式:https://blog.csdn.net/mengks1987/article/details/84852235 |
6、AspectRatio
固定宽高比的控件。
AspectRatio(
aspectRatio: 5 / 4,
child: Container(
color: Colors.red,
),
);
7、ConstrainedBox
对子控件施加约束。
如下:子控件最小高度80,即使子控件设置了高度为30,其高度依然是80.
ConstrainedBox(
constraints: BoxConstraints(minHeight: 80),
child: Container(
height: 30,
color: Colors.blue,
),
),