Flutter中如何让Row内Container高度自适应至100%(规避性能问题)
解决Flutter Row中Container高度匹配文本高度的问题
你需要让Row中橙色Container的高度自动匹配旁边Text的高度(文本行数不固定),又不能用CrossAxisAlignment.stretch(Row无固定高度)或IntrinsicHeight(性能问题),可以试试以下两种可行方案:
方案一:使用Stack组件替代Row
利用Stack的高度由Text内容决定,通过定位让Container撑满Stack的高度:
Stack( alignment: Alignment.centerRight, children: [ Text(description), Positioned( right: 0, top: 0, bottom: 0, child: Container(width: 5.0, color: Colors.orange), ), ], );
Stack会自动适应Text的高度,Positioned的top和bottom设为0,就能让Container的高度完全匹配Text的高度,同时保持在右侧。
方案二:使用IntrinsicWidth配合Row
IntrinsicWidth的性能开销远小于IntrinsicHeight,它仅计算子组件的宽度约束,不会对高度计算造成额外负担:
IntrinsicWidth( child: Row( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ Expanded(child: Text(description)), Container(width: 5.0, color: Colors.orange), ], ), );
IntrinsicWidth让Row的宽度由子组件决定,CrossAxisAlignment.stretch则让Container的高度与Row一致(Row高度由Text内容决定),最终实现Container高度匹配Text的效果。
内容的提问来源于stack exchange,提问作者Danish Kumar
相关产品推荐
相关产品推荐

