2020-05-14 flutter flex 布局

flex布局错误

image.png

//报错布局代码示例
SingleChildScrollView(
// 由于在不限高的容器中，要紧包children
  child: Column(
    children:[
// 要撑开，与Column要紧包冲突
      Expanded(
        flex:1,
        child:Text('bbb'),
      ),
    ],
  ),
),

SimpleTable组件错误分析

SpacingColumn(
  children:[
    SimpleTable(
      // 默认是表头固定，表体可滚动。
      //...省略各项配置
    ),
  ],
),

在表头固定的情况下，SimpleTable的结构是这样

Column(
  children:[
    tableHeader,
    Expanded(
      flex:1,
      child:ListView(
        children:tableRows,
      ),
    ),
  ],
)

放在我写的SpacingColumn中为啥会报错呢,结构如下

// SpacingColumn
Column(
  children:[
// SimpleTable的结构
    Column( 
      children:[
        tableHeader,
        Expanded(
          flex:1,
          child:ListView(
            children:tableRows,
          ),
        ),
      ],
    ),
  ],
),

Column布局逻辑中，官方文档如下：“Layout each child a null or zero flex factor (e.g., those that are not Expanded) with unbounded main axis constraints and the incoming cross axis constraints.”

with unbounded main axis constraints可以视为最外层的Column的高度是unbounded，因此，SimpleTable的Column会紧包children，而表体的Expanded与之冲突，造成报错。
Column的非Flex元素，会被设置在主轴(在column中是竖直)unbounded盒约束。根据图片中的错误提示，在unbounded盒约束下SimpleTable的Column会紧包children，而children中的表体是Expanded(flex元素)，与之冲突，造成报错。

如何改正

SpacingColumn(
  children:[
// 给SimpleTable套个Expanded
    Expanded(
      flex:1,
      child:SimpleTable(
        // 省略
      ),
    ),
  ],
),

为什么套个Expanded就可以了，还要看Column的布局逻辑