Flutter---Column/Row

本质Column 和 Row 都是Flex的语法糖一个设置direction: Axis.vertical一个设置direction: Axis.horizontal。Flex布局的底层约束传递机制1. 父组件传约束Constraints给子组件 ↓ 2. 子组件根据自己的大小返回尺寸Size ↓ 3. 父组件确定子组件位置Position使用场景需要线性布局的时候Column/Row( // 主轴对齐方式,Column的时候主轴是垂直交叉轴是水平Row的时候主轴是水平交叉轴是垂直 mainAxisAlignment: MainAxisAlignment.start, //相关属性值start,end,spaceEvenly,spaceBetween,spadeAround mainAxisSize: MainAxisSize.max, // 主轴尺寸:msx 占用所有可用高度默认,mix 仅包裹子组件高度 // 交叉轴对齐 crossAxisAlignment: CrossAxisAlignment.center, //相关属性值start,end,center,stretch,baseline children: [...], )简单应用// Column垂直排列 Column( children: [ Text(上), Text(中), Text(下), ], ) // Row水平排列 Row( children: [ Text(左), Text(中), Text(右), ], )Row属性的直观对比图start: [A][B][C]_________ end: _________ [A][B][C] center: ____[A][B][C]_____ spaceBetween: [A]____[B]____[C] spaceAround: _[A]____[B]____[C]_ spaceEvenly: __[A]____[B]____[C]__常见问题1.无界约束问题 2.嵌套 Column 的无限高度陷阱 3.交叉轴对齐的优先级 4.在一个行中间最左边需要一个文本最右边需要一个文本 5.占据的空间有权重之分 6.最左边一个容器最右边一个容器中间的容器需要占据剩余空间1.无界约束问题 // ❌ 这段代码会报错 Column( children: [ ListView( children: [...], // Error! Column 给子组件无限高度 ), ], ) 原因 Column 的布局过程 1. Column 问 ListView你要多高 2. ListView 反问 Column你能给我多高 3. Column 说我无限高因为 Column 自身高度由子组件决定 4. ListView 说我无法在无限高里确定自己的高度 5. 报错 解决办法 // ✅ 方案 1用 Expanded 限制高度 Column( children: [ Expanded( child: ListView(...), // Expanded 强制 ListView 填满剩余空间 ), ], ) // ✅ 方案 2用 Container 限制高度 Column( children: [ Container( height: 300, // 给明确高度 child: ListView(...), ), ], ) 2.嵌套 Column 的无限高度陷阱 // ❌ 崩溃 Column( children: [ Column( children: [ Text(嵌套), ], ), ], ) // 为什么外层 Column 给内层 Column 无限高度 // 内层 Column 又无法确定自己的高度 // ✅ 解决方案 Column( children: [ IntrinsicHeight( // 限制高度 child: Column( children: [ Text(嵌套), ], ), ), ], ) 3.交叉轴对齐的优先级 Container( height: 200, child: Row( crossAxisAlignment: CrossAxisAlignment.center, // Row 级别 children: [ Container( height: 100, alignment: Alignment.topCenter, // 子组件自己 child: Text(顶部), ), ], ), ) // 优先级子组件自己的 alignment 父组件的 crossAxisAlignment 4.在一个行中间最左边需要一个文本最右边需要一个文本 Row( children: [ Text(左), Spacer(), // 占用所有可用空间 Text(右), ], ) 5.占据的空间有权重之分 Row( children: [ Text(左), Spacer(flex: 1), // 占1份空间 Text(中), Spacer(flex: 2), // 占2份空间是上面的2倍 Text(右), ], ) 6.最左边一个容器最右边一个容器中间的容器需要占据剩余空间 Row( children: [ Container(width: 50, color: Colors.red), Expanded( // 占用剩余所有宽度 child: Container(color: Colors.blue), ), Container(width: 50, color: Colors.green), ], )