Flutter 常用的单个子控件的容器 Container Padding Center Align FittedBox AspectRatio ConstrainedBox

Flutter 系列文章 总体目录

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,
          ),
        ),