Flutter Row组件文本溢出问题解决咨询

你的问题出在右侧Row中的Text组件未被限制宽度，导致文本过长时无法自动换行或截断，从而触发溢出错误。以下是几种可行的解决方式：

方法1：用Expanded包裹Text组件 #

给文本外层套Expanded，让它占据Row内的剩余空间，自动换行显示：

Expanded(
  child: Row(  
    children: [
      Image.asset(
        "assets/location_pin.png",
        height: 18,
        width: 18,
        color: MyColor.primaryRedColor,
      ),
      // 给Text添加Expanded包裹
      Expanded(
        child: Text(
          "WTC Tower, Los Angeless sbdjkds jsbksdb kcbk",
          style: textStyleWith12600(MyColor.blackColor),
        ),
      ),
    ],
  ),
)

方法2：用Flexible替代Expanded #

如果不需要强制占满剩余空间，可使用Flexible，效果类似但更灵活：

Expanded(
  child: Row(  
    children: [
      Image.asset(
        "assets/location_pin.png",
        height: 18,
        width: 18,
        color: MyColor.primaryRedColor,
      ),
      Flexible(
        child: Text(
          "WTC Tower, Los Angeless sbdjkds jsbksdb kcbk",
          style: textStyleWith12600(MyColor.blackColor),
        ),
      ),
    ],
  ),
)

方法3：设置Text的溢出截断 #

如果不想换行，希望超出部分显示省略号，可直接给Text添加overflow和maxLines属性：

Text(
  "WTC Tower, Los Angeless sbdjkds jsbksdb kcbk",
  style: textStyleWith12600(MyColor.blackColor),
  overflow: TextOverflow.ellipsis,
  maxLines: 1, // 限制只显示一行
)

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