Flutter 获取布局约束,以及常用布局原理

布局约束，顾名思义就是父布局对子布局的一个约束,例如:

你的父布局大小是100的高宽,那么你的子布局不能超过100的高宽,

这就是布局约束，如果当前没有设置约束，那么父布局会根据子布局的实际大小来确定自己的大小

如何知道自己的布局约束的大小呢？

使用关键词LayoutBuilder

获取设置的布局约束:

 Container(
        child: Center(
          child: LayoutBuilder(//布局生成器
            builder: (BuildContext context, BoxConstraints constraints) {
              print(constraints);//调用constraints参数就可以打印出来上层的具体约束
              return Container(//此时这个Container的高宽都是200
                color: Colors.blue,
                width: 200,
                height: 200,
                child: FlutterLogo(//内部的FlutterLogo却不是20的大小
                  size: 20,
                ),
              );
            },
          ),
        ),
      ),

效果:

这里为什么FlutterLogo的大小不是20呢?

其实非常简单，它大小约束完成后,并不知道自己该放在那个位置，所以会默认为和父布局一样的大小，这时候在FlutterLogo外层加入Center或者使用Align告诉它位置即可 。

原理:

最顶层的组件树，会向下传递一个占满屏幕的约束,如果像上面代码第二层并没有满足上层约束

那么约束接着向下传递，到了Center这时候就会传递一个相对比较松的约束下去了,约束允许0到上层约束的大小,在往后Container设置了w:200 h:200,满足了上层的0至满屏幕的约束，这时候约束改变成为了w:200 h:200的约束向下传递,而到了最后FlutterLogo只能是200-200的大小了，

而向下传递的是约束，向上就传递的大小尺寸，将每一层的约束依次向上传递

然而当你使用Scaffold的时候，会发现，如果你在Scaffold下使用了Container然后设置大小依然有用，有人问了这里明明没有告诉他位置为啥他可以按自己的大小来呢?原因就是Scaffold本身沾满了全屏并且，它是松约束所以哪怕不告诉他位置他依然可以按你想要的大小来:

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
    );