Flutter:如何让Row子组件对齐至行内最大元素
问题:实现固定尺寸+自适应高度宽度的Row布局
需要实现的布局条件:
- 包含1个固定尺寸(200px×200px)的组件和3个自适应组件
- 所有组件置于Row组件内
- 任意组件可包含内容
- 所有自适应组件需填充可用宽度
- 所有自适应组件需自动适配固定尺寸组件或行内最大组件的高度
- Row组件可嵌套在Column组件内
我的实现代码:
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( decoration: BoxDecoration(color: Colors.orange), width: 200, height: 200, ), Expanded( flex: 1, child: Container( decoration: BoxDecoration(color: Colors.red), ), ), Expanded( flex: 1, child: Container( decoration: BoxDecoration(color: Colors.green), ), ), Expanded( flex: 1, child: Container( decoration: BoxDecoration(color: Colors.black), ), ) ], ), ); }
当前显示效果:橙色固定尺寸容器正常显示为200×200的方块,但三个Expanded容器高度为0,仅能看到顶部的一条颜色线。
遇到的问题:尝试用LayoutBuilder获取高度时,返回的maxHeight为double.infinity,如果给Container设置height: double.infinity会抛出以下渲染异常:
════════ Exception caught by rendering library ═════════════════════════════════ RenderBox was not laid out: RenderFlex#02e31 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': box.dart:1 Failed assertion: line 2009 pos 12: 'hasSize'
内容的提问来源于stack exchange,提问作者Aliaksei
相关产品推荐
相关产品推荐

