Flutter 布局原理。布局约束向下传递。root组件。系统会设定为屏幕的宽度和高度。在没有设定组件的位置的时候、子组

布局约束向下传递。root组件。系统会设定为屏幕的宽度和高度。在没有设定组件的位置的时候、子组件的宽高是根据父组件的宽高来设定的。截屏2023-05-13 22.40.07.png

获取和设置布局约束

child: LayoutBuilder(builder: (context , constraints) { 
  print(constraints);//可以打印当前的布局约束
  return const FlutterLogo(size: 100,);
},

child: const SizedBox.expand(
  //SizeBox.expand是尽量填满父级约束。父级给的约束是0到300
  child: FlutterLogo(size: 100,),
)

child: FractionallySizedBox(//
  widthFactor: 0.5,//父组件，给定约束的0.5倍
  heightFactor: 0.5,
  child: LayoutBuilder(
    builder: (context, constraints){
      return FlutterLogo();
    },
  ),
),

child: ConstrainedBox(//可以自定义一个约束空间
  constraints: const BoxConstraints(
    minWidth: 100,
    minHeight: 100,
    maxWidth: 200,
    maxHeight: 200,
  ),
  child: LayoutBuilder(
    builder: (context, constraints){
      return FlutterLogo();
    },
  ),
),