Flutter Row组件文本溢出布局异常求助：Flexible(FlexFit.loose)表现如Expanded导致图标错位

我明白你的问题了——你希望短文本时SuffixIcon紧跟在文字后面，而长文本时文字自动省略但SuffixIcon仍留在旁边，同时TrailingIcon固定在整个行的最右侧。问题出在内部Row的默认行为上，咱们来修复它：

修改后的代码 #

Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
 Flexible(
   child: Row(
     mainAxisSize: MainAxisSize.min, // 这是关键！
     children: [
       PrefixIcon(),
       Flexible(
         child: DefaultTextStyle(
           overflow: TextOverflow.ellipsis,
           child: TextGoesHere(),
         ),
       ),
       SuffixIcon(),
     ],
   ),
 ),
 TrailingIcon(),
])

为什么这样能解决问题？ #

原来的内部Row默认使用mainAxisSize: MainAxisSize.max，这会让它占满外层Flexible分配的所有可用宽度，哪怕文本很短，也会把SuffixIcon强制推到内部Row的末尾。

加上mainAxisSize: MainAxisSize.min后，内部Row只会占用它的子项（PrefixIcon + 文本 + SuffixIcon）实际需要的宽度：

• 当文本较短时，SuffixIcon会紧紧跟在文字后面，不会被拉伸到行尾
• 当文本过长时，内部的Flexible会让文本自动收缩并显示省略号，SuffixIcon依然保持在文字旁，同时TrailingIcon始终固定在整个行的最右侧

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