You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中如何让容器高度自适应同行文本的行数?

解决Flutter中Row内容器高度随文本自适应的问题

直接用IntrinsicHeight包裹Row,再把左侧容器的高度设为double.infinity就能实现需求,修改后的代码如下:

IntrinsicHeight(
  child: Row(
    children: [
      Container(
        color: Colors.blue,
        width: 2,
        height: double.infinity, // 自动匹配Row的高度,也就是文本的高度
      ),
      const SizedBox(width: 10),
      Expanded(
        child: Text(
          'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
        ),
      ),
    ],
  ),
)

原理说明

  • IntrinsicHeight会强制Row的高度由内部最高的子元素(也就是右侧的文本)决定,让Row高度完全跟着文本走。
  • 给左侧容器设置height: double.infinity,它会自动拉伸填充整个Row的高度,自然和文本高度保持一致。
  • 原代码里的Wrap组件是多余的,直接删掉即可。

内容的提问来源于stack exchange,提问作者Anandh Krishnan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 16:28:38