Flutter：如何实现双文本组件中第二个组件在空间不足时换行至下一行末尾

我完全理解你要实现的效果：空间充足时，两个文本一个靠左、一个靠右排列在同一行；当空间不够时，第二个文本自动换行到下一行的末尾，而不是默认的开头。你在CSS里的思路非常准确，咱们把这个逻辑直接映射到Flutter里就行，不用再纠结Wrap+Expanded的组合，用Flex组件就能完美复刻你要的CSS行为！

核心思路（对应你的CSS实现） #

你在CSS里的设置是：

可变宽度元素容器设为flex: 1 0 auto，父flex容器设flex-wrap: wrap和justify-content: flex-end

在Flutter里，我们用Flex组件（Row/Column的底层父类）来实现这个逻辑，它原生支持换行和flex布局属性：

完整代码示例 #

Flex(
  direction: Axis.horizontal, // 对应CSS flex-direction: row
  flexWrap: FlexWrap.wrap,    // 对应CSS flex-wrap: wrap
  mainAxisAlignment: MainAxisAlignment.end, // 对应CSS justify-content: flex-end
  children: [
    // 对应CSS中flex: 1 0 auto的可变长度元素
    Flexible(
      flex: 1,
      fit: FlexFit.loose, // 允许元素根据内容自动调整宽度，不会强制拉伸
      child: Text("这里是长度可变的文本，可能很短，也可能长到超出一行的宽度范围"),
    ),
    // 第二个需要换行后对齐到行尾的文本
    Text("固定/可变长度的第二个文本"),
    // 如果需要两个文本之间有间距，可以加Padding：
    // Padding(padding: EdgeInsets.only(left: 8), child: Text("第二个文本")),
  ],
)

效果说明 #

1. 空间充足时：Flexible(flex:1)会让第一个文本占据除第二个文本外的所有剩余空间，配合mainAxisAlignment: MainAxisAlignment.end，第二个文本会被推到行的最右端，实现左、右对齐的效果。
2. 空间不足时：flexWrap: FlexWrap.wrap会触发换行，第一个文本独占第一行（因为它的flex-grow属性会优先占据可用空间），第二个文本自动换行到第二行，同时mainAxisAlignment: MainAxisAlignment.end会让它对齐到第二行的最末尾。

为什么之前的Wrap+Expanded组合不行？ #

因为Wrap组件本质上不是Flex布局的容器，它的换行逻辑是基于子元素的原始尺寸计算的，Expanded/Flexible这类依赖Flex父容器的组件在Wrap里不会生效，所以才会出现报错或者不符合预期的布局。而Flex组件是专门为flex布局设计的，完美支持你需要的换行+对齐逻辑。

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