Flutter中TextButton文本溢出问题求助：如何实现文本换行？

你的问题核心在于布局约束不足，Row默认会让子组件紧凑排列，导致Column里的Text没有足够宽度触发换行；同时未配置允许换行的参数，使得overflow属性无法生效。按以下方式修改即可解决：

修改要点 #

• 用Expanded包裹Column，让它在Row中占据剩余可用宽度，为Text提供换行空间
• 给Text设置maxLines（可设为具体数值或null，null表示允许无限换行），配合overflow控制超出内容的显示逻辑

修改后的完整代码 #

Widget build(BuildContext context) {
  return TextButton(
    onPressed: () {
      _awaitValueBottomDrawer(context);
    },
    style: TextButton.styleFrom(
      fixedSize: const Size(200, 120),
      primary: Colors.white,
      textStyle: const TextStyle(
        fontSize: 16,
      ),
      shape: const RoundedRectangleBorder(
        side: BorderSide(color: Colors.transparent)
      ),
    ),
    child: Row(
      children: [
        // 用Expanded让Column占据Row内除Icon外的全部空间
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text('Your Starting Location', style: TextStyle(fontWeight: FontWeight.bold)),
              Text(
                address,
                overflow: TextOverflow.fade,
                maxLines: 2, // 可根据需求调整行数，设为null则允许无限换行
                softWrap: true, // 显式开启软换行（默认值，添加后逻辑更清晰）
              )
            ],
          ),
        ),
        const Padding(
          padding: EdgeInsets.all(5.0),
          child: Icon(Icons.arrow_drop_down, color: Colors.white),
        )
      ],
    ),
  );
}

关键说明 #

1. Expanded的作用：Row默认会让子组件“包裹内容”，Expanded强制Column占据Row内的剩余宽度，让Text拥有足够空间自动换行。
2. maxLines与softWrap：maxLines限制文本最大显示行数，softWrap确保文本到达容器边界时自动换行，两者配合才能让overflow属性生效。

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