1 布局及装饰组件说明

2 基础布局处理

2.1 Container(容器布局)

Container在Flutter里使用非常多，是一个组合Widget，内部有绘制Widget、定位Widget和尺寸Widget。

2.2 Center(居中布局)

居中布局，子元素处于水平和垂直方向的中间。

2.3 Padding(填充布局)

用于处理容器和子元素间的间距。

2.4 Align(对齐布局)

将子组件按指定方式对齐，并根据子组件的大小调整自己的大小。

2.5 Row(水平布局)

水平方向是主轴，垂直方向是交叉轴。

2.6 Column(垂直布局)

垂直方向是主轴，水平方向是交叉轴。

2.7 FittedBox(缩放布局)

FittedBox会在自己的尺寸范围内缩放并调整child位置。
两个重要属性：
fit：缩放方式。默认值是BoxFix.contain，即child在FittedBox范围内，尽可能大。contain是在保证child宽高比的前提下，尽可能填满。
alignment：对齐方式。默认值是Alignment.center，居中显示child。

2.8 Stack/Alignment

Stack常用属性

对齐方式有以下几种：

• bottomCenter 底部居中
• bottomLeft 底部居左
• bottomRight 底部居右
• center 正中
• centerLeft 中间居左
• centerRight 中间居右
• topCenter 顶部居中
• topLeft 顶部居左
• topRight 顶部居右

2.9 Stack/Positioned

Positioned组件用来定位的。Stack里使用Positioned布局主要是因为在Stack组件里通常需要定位。

Positioned常用属性

2.10 IndexedStack

继承自Stack，用于显示第index个child，其他child不可见，所以它的尺寸与child中最大尺寸一致。

2.11 OverFlowBox

允许child超出父容器范围显示。
常用属性

3 宽高尺寸处理

3.1 SizedBox

特定大小的盒子，强制child有特定的宽度和高度。如果宽度或高度为null，该组件会调整自身大小以匹配child的尺寸。

3.2 ConstrainedBox

用于限定child的最大、最小宽高。如果child为null，会尽可能缩小尺寸。
常用属性

3.3 LimitedBox

用于限定最大宽高，与ConstainedBox类似，只是LimitedBox没有最小宽高限制。
常用属性

3.4 AspectRatio

用于设置调整child的宽高比。适用于需要固定组件宽高比的情景。aspectRatio属性不能为null，必须大于0且必须是有限的。

3.5 FractionallySizedBox

会根据现有空间调整child的尺寸，适用在一个区域里取百分比尺寸时。如果宽高因子为null，则child的宽高会尽可能充满整个区域。

常用属性

4 列表及表格布局

4.1 ListView

4.2 GridView

4.3 Table

表格布局，每一行的高度由内容决定，每一列的宽度由列数决定。

常用属性

5 其他布局

5.1 Transform

矩阵转换。可以对child做平移、旋转、缩放等操作。

常用属性

5.2 Baseline

基准线布局，将所有元素底部放在同一水平线上。

常用属性

5.3 Offstage

用于控制child是否显示。

常用属性

5.4 Wrap

跟row和column有些相似。单行的Wrap跟Row一样，单列的Wrap跟Column一样。适用于需要按宽度或高度让child自动换行的场景。

常用属性

6 示例

6.1 Align示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Align(
            alignment: Alignment.topRight,
            child: Container(
              width: 200.0,
              height: 200.0,
              color: Color(0xffff0000),
            ),
          ),
        ),
      ),
    );
  }
}

效果显示：

6.2 Stack示例

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
//        child: buildPositionedStack(),
//        child: buildAlignmentStack(),
        child: buildIndexedStack(),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        setState(() {
          _index = Random().nextInt(2) % 2;
        });
      }),
    );
  }

  Stack buildIndexedStack() {
    return IndexedStack(
      index: _index,
      alignment: Alignment(1.2, -1.2),
      children: <Widget>[
        Container(
          color: Color(0xff0000ff),
          width: 200.0,
          height: 200.0,
        ),
        CircleAvatar(
          radius: 20.0,
          backgroundColor: Color(0xffff0000),
        ),
      ],
    );
  }

  Stack buildAlignmentStack() {
    return Stack(
      alignment: Alignment(1.2, -1.2),
      children: <Widget>[
        Container(
          color: Color(0xff0000ff),
          width: 200.0,
          height: 200.0,
        ),
        CircleAvatar(
          radius: 20.0,
          backgroundColor: Color(0xffff0000),
        ),
      ],
    );
  }

  Stack buildPositionedStack() {
    return Stack(
      children: <Widget>[
        Container(
          color: Color(0xffff0000),
          width: 200.0,
          height: 200.0,
        ),
        Positioned(
//              top: 10.0,
          child: CircleAvatar(
            radius: 20.0,
            backgroundColor: Color(0xff0000ff),
          ),
        ),
      ],
    );
  }
}

效果显示

6.3 Table示例

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
    ));

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Table(
          columnWidths: const <int, TableColumnWidth>{
            0: FixedColumnWidth(50.0),
            1: FixedColumnWidth(100.0),
            2: FixedColumnWidth(50.0),
            3: FixedColumnWidth(50.0),
          },
          border: TableBorder.all(
            color: Color(0xffff0000),
            width: 2.0,
          ),
          children: const <TableRow>[
            TableRow(children: [
              Text('头像'),
              Text('姓名'),
              Text('年龄'),
              Text('身高'),
            ]),
            TableRow(children: [
              Icon(Icons.description),
              Text('10号程序员'),
              Text('21'),
              Text('165'),
            ]),
            TableRow(children: [
              Icon(Icons.description),
              Text('10号程序员'),
              Text('21'),
              Text('170'),
            ]),
            TableRow(children: [
              Icon(Icons.description),
              Text('10号程序员'),
              Text('21'),
              Text('175'),
            ]),
          ],
        ),
      ),
    );
  }
}

效果显示：