Flutter Column详解

//默认情况下column的样式
body: Container(
  color: Colors.orange,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    verticalDirection: VerticalDirection.down,
    mainAxisAlignment: MainAxisAlignment.start,
    mainAxisSize: MainAxisSize.max,
    children: const [
      FlutterLogo(size: 100,),
      FlutterLogo(size: 200,),
      FlutterLogo(size: 50,),
    ],
  ),
),

mainAxisAlignment: MainAxisAlignment.center,

mainAxisSize: MainAxisSize.min,//各种效果都没有了

mainAxisAlignment: MainAxisAlignment.spaceAround,//将每个组件间的间隔平均分配成n份，然后放在每个组件两遍

mainAxisAlignment: MainAxisAlignment.spaceBetween,//组件中间填充等分的距离

mainAxisAlignment: MainAxisAlignment.spaceEvenly,//将剩余距离等分为n+1份。然后填充在组件之间，每个组件与组件之间距离相等，组件与上下的边框之间距离相等

Directionality(
  //设置字体的书写方向。从左到右
  textDirection: TextDirection.ltr,

child: Container(
  color: Colors.orange,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,//拉伸。将column填充满父组件，子组件也在交错轴方向上拉伸
    verticalDirection: VerticalDirection.down,
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,//将剩余距离等分为n+1份。然后填充在组件之间
    mainAxisSize: MainAxisSize.max,
    children: const [
      FlutterLogo(size: 100,),
      FlutterLogo(size: 200,),
      FlutterLogo(size: 50,),
    ],
  ),
),

Expanded(child: FlutterLogo(size: 50,)),
//添加expanded之后，会让子组件填充满没有添加expanded的组件也就是固定高度后剩余的空间。

child: Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,//拉伸。将column填充满父组件，子组件也在交错轴方向上拉伸
  verticalDirection: VerticalDirection.down,
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,//将剩余距离等分为n+1份。然后填充在组件之间
  mainAxisSize: MainAxisSize.max,
  children:  [
    FlutterLogo(size: 100,),
    FlutterLogo(size: 200,),
    ListView(
      children: List.generate(
          100,
          (index) => Container(
                color: Colors.red,
                height: 20,
                child: Text("${index}"),
              )),
    ),
    FlutterLogo(size: 50,),
  ],
),

======== Exception caught by scheduler library ===================================================== The following _CastError was thrown during a scheduler callback: Null check operator used on a null value

这是因为column中，会对有固定高度的先布局，给一个约束。因为listView是高度是无限的。column高度也是无限的所以有冲突。

child: Container(
  color: Colors.orange,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,//拉伸。将column填充满父组件，子组件也在交错轴方向上拉伸
    verticalDirection: VerticalDirection.down,
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,//将剩余距离等分为n+1份。然后填充在组件之间
    mainAxisSize: MainAxisSize.max,
    children:  [
      FlutterLogo(size: 100,),
      FlutterLogo(size: 200,),
      Expanded(
        child: ListView(
          children: List.generate(
              100,
              (index) => Container(
                    color: Colors.red,
                    height: 20,
                    child: Text("${index}"),
                  )),
        ),
      ),
      FlutterLogo(size: 50,),
    ],
  ),
),

包裹一层expanded后，会先给固定高度的约束，剩下的再给listView高度。