Flutter Row布局问题：实现带最小宽度的双元素行布局

可以通过ConstrainedBox、Expanded和裁剪组件（或文本自身溢出处理）组合实现需求，以下是具体方案：

核心实现代码 #

Row(
  mainAxisSize: MainAxisSize.max,
  children: [
    // 第一个元素：具备最小宽度，自适应内容宽度
    ConstrainedBox(
      constraints: const BoxConstraints(minWidth: 100), // 设置第一个元素的最小宽度
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        color: Colors.lightBlueAccent,
        child: const Text("短内容"),
      ),
    ),
    const SizedBox(width: 8), // 两个元素的间距
    // 第二个元素：具备最小宽度，超出容器时自动裁剪
    Expanded(
      child: ConstrainedBox(
        constraints: const BoxConstraints(minWidth: 200), // 设置第二个元素的最小宽度
        child: ClipRect(
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
            color: Colors.orangeAccent,
            child: const Text(
              "超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容",
              overflow: TextOverflow.clip, // 文本自身的裁剪设置
            ),
          ),
        ),
      ),
    ),
  ],
)

关键组件说明 #

• ConstrainedBox：为两个元素设置minWidth，确保即使内容为空也能保持指定的最小宽度。
• Expanded：让第二个元素占据Row剩余的全部可用空间，当内容超出该空间范围时，触发裁剪逻辑。
• ClipRect：通用裁剪组件，确保任何超出Expanded范围的内容都被裁剪；如果是文本组件，直接使用TextOverflow.clip即可实现文本裁剪。

内容的提问来源于stack exchange，提问作者Andriy Trubchanin