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

Flutter（48）：Layout组件之FittedBox

Flutter教学目录持续更新中

Github源代码持续更新中