Flutter教学目录持续更新中

Github源代码持续更新中

1.Align介绍

一个widget，它可以将其子widget对齐，并可以根据子widget的大小自动调整大小。

2.Align属性

alignment = Alignment.center：
widthFactor：宽度因子
heightFactor：高度因子
child：

3.Alignment属性

Alignment.topLeft = Alignment(-1.0, -1.0)：
Alignment.topCenter = Alignment(0.0, -1.0)：
Alignment.topRight = Alignment(1.0, -1.0)：
Alignment.centerLeft = Alignment(-1.0, 0.0)：
Alignment.center = Alignment(0.0, 0.0)：
Alignment.centerRight = Alignment(1.0, 0.0)：
Alignment.bottomLeft = Alignment(-1.0, 1.0)：
Alignment.bottomCenter = Alignment(0.0, 1.0)：
Alignment.bottomRight = Alignment(1.0, 1.0)：
Alignment()
Alignment.lerp()
这个属性之前在讲Container已经讲过了，传送门：Flutter（44）：Layout组件之Container

4.Align尺寸调节（约束）

这个跟Center是一样的，其实就是Center扩展，可以指定alignment而已。

widthFactor、heightFactor都为空，宽度会尽可能的大，高度则刚好包裹子控件
widthFactor（heightFactor）不为空，Center的宽度（高度） = 因子*子控件的宽度（高度）
注意：因子要么为空，要么>=0

5.例子

1602469473421.jpg

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Align'),
      ),
      body: Column(
        children: [
          Container(
            color: Colors.amber,
            child: Align(
              alignment: Alignment.center,
              child: Container(
                width: 50,
                height: 50,
                color: Colors.red,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10),
            color: Colors.amber,
            child: Align(
              alignment: Alignment.center,
              widthFactor: 2,
              child: Container(
                width: 50,
                height: 50,
                color: Colors.red,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10),
            color: Colors.amber,
            child: Align(
              alignment: Alignment.center,
              heightFactor: 2,
              child: Container(
                width: 50,
                height: 50,
                color: Colors.red,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10),
            color: Colors.amber,
            child: Align(
              alignment: Alignment.center,
              widthFactor: 2,
              heightFactor: 2,
              child: Container(
                width: 50,
                height: 50,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }

下一节：Layout组件之FittedBox