Flutter layout 约束，尺寸，位置

1,flutter的约束是从上往下传递的。尺寸是从下往上传递的。  

布局组件，center继承于Align.

child: Container(
  width: 400,
  height: 400,
  child: LayoutBuilder(builder: (context, constraints){
    // 获取父组件的布局约束
    print("constraints $constraints");
    return const FlutterLogo();
  }),

),


//flutter: constraints BoxConstraints(w=375.0, h=400.0)

child: Container(
  width: 400,
  height: 400,
  child: Center(
    child: LayoutBuilder(builder: (context, constraints){
      // 获取父组件的布局约束
      print("constraints $constraints");
      return const FlutterLogo();
    }),
  ),

),


//flutter: constraints BoxConstraints(0.0<=w<=375.0, 0.0<=h<=400.0)

child: Container(
  color: Colors.purple,
  width: 400,
  height: 400,
  child: SizedBox(
    width: 100,
    height: 100,
    child: LayoutBuilder(builder: (context, constraints){
      // 获取父组件的布局约束
      print("constraints $constraints");
      return const FlutterLogo();
    }),
  ),

),


//使用sizebox进行约束大小的时候，会发现没有效果的情况，是因为sizebox也会受到上级约束的制约

child: Container(
  color: Colors.purple,
  width: 400,
  height: 400,
  child: Center(
    child: SizedBox.expand(
      child: LayoutBuilder(builder: (context, constraints){
        // 获取父组件的布局约束
        print("constraints $constraints");
        return const FlutterLogo(size: 100,);
      }),
    ),
  ),

),

//使用SizeBox.expand之后约束会沾满上级约束，center约束是0到400因此会沾满400.flutter: constraints BoxConstraints(w=375.0, h=400.0)




child: FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.5,
  child: LayoutBuilder(builder: (context, constraints){
    // 获取父组件的布局约束
    print("constraints $constraints");
    return const FlutterLogo(size: 100,);
  }),
),
//主要是根据比例进行布局。

child: ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 100,
    maxHeight: 200
  ),
  child: LayoutBuilder(builder: (context, constraints){
    // 获取父组件的布局约束
    print("constraints $constraints");
    return const FlutterLogo(size: 100,);
  }),
),


//设定最大最小值

同时，我们也可以通过loosen的方式构造一个松约束

child: ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 100,
    maxHeight: 200
  ).loosen(),
  child: LayoutBuilder(builder: (context, constraints){
    // 获取父组件的布局约束
    print("constraints $constraints");
    return const FlutterLogo(size: 100,);
  }),


//flutter: constraints BoxConstraints(0.0<=w<=200.0, 0.0<=h<=200.0)


child: Container(
  color: Colors.purple,
  width: 400,
  height: 400,
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: LayoutBuilder(builder: (context, constraints){
      // 获取父组件的布局约束
      print("constraints $constraints");
      return const FlutterLogo(size: 100,);
    }),
  ),

),

//padding的作用其实是留白的作用。flutter: constraints BoxConstraints(w=335.0, h=360.0)