Flutter基础笔记(1)- 约束

1.紧约束BoxConstraints之tight，默认宽高都是为size的的宽高。

  runApp(
    const SizedBox(
      width: 100,
      height: 100,
      child: ColoredBox(color: Colors.blue),
    ),
  );
}

上图代码，乍一看天王老子来了也是展示100*100的蓝色方块，其实不然。这返回的是一个铺满全屏的蓝色。原因就是约束布局导致的。怎么论证，运行起来看Flutter inspector。查看Detail Tree可以看到结果。怎么解决问题有三种方式。

[1] 通过 UnconstrainedBox [解除约束]，让自身约束变为 [无约束]。 
[2] 通过 Align、Flex、Stack 等组件 [放松约束]，让自身约束变为 [松约束]。 
[3] 通过 CustomSingleChildLayout 等自定义布局组件施加 [新约束]。

通过这三种方式可以解决紧约束导致的很多页面显示问题。

2.常用组件约束分析

MaterialApp

现在来看一个非常经典的布局问题：在 MaterialApp 的 home 中提供宽高为 100 的 Container 组件。如下所示，尺寸无法生效，会填充全屏幕。

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Container(
        color: Colors.blue,
        width: 100,
        height: 100,
      ),
    );
  }
}

这在本质上和上一节说的 SizedBox 是一样的。

Scaffold 组件下约束信息

Scaffold 组件确实可以打破父级的 紧约束，为其下级提供一个松约束。本质：将紧约束修改为宽松约束的组件是 CustomMultiChildLayout。

Flex 组件下的约束

Row 本质上是 direction: Axis.horizontal 的 Flex 组件；Column 本质上是 direction: vertical 的 Flex 组件

重点：

Flex 轴向为水平时，不会限制孩子的宽度，想要多大都可以，不过一旦超越父级尺寸，还是会有越界异常的
此时 Flex 组件 direction 为 Axis.vertical (即 Column) 时。施加的约束为高度无限制。

Wrap 组件下的约束

Wrap 在 [主轴] 方向上 [放松约束]，在 [交叉轴] 方向上 [无限约束]，Wrap 的 children 列表中的组件，所受到的约束都是一致的。

举个例子：屏幕宽度360，布置4个100*100的格子，四个格子在flex组件内会超出屏幕，在wrap组件内会自动换行，这些都可以通过约束来解释。

Stack 组件下的约束

在 MaterialApp 的紧约束下，Stack 组件是有打破紧约束的能力的。

另外 Stack 组件中有一个 fit 属性，可以控制施加约束的类型，默认是 StackFit.loose Stack 施加约束的特点:

[1]: loose 下, 宽高尽可能 [放松约束]。 [2]: expand 下, 施加 [强约束]，约束尺寸为自身受到约束的 [最大尺寸]。 [3]: passthrough 下, 仅 [传递约束]，把自身受到的约束原封不动的施加给子级。 [4]: Stack 的 children 列表中的组件，所受到的约束都是一致的。