Flutter中的Text换行问题

月伤592025-10-31 12:44

1.问题说明

flutter的Text默认不支持自动换行，如果文字过长，会导致文字溢出到屏幕之外。

例如如下情况，Text换行就会失效：

Row->Column->Text

2.如何实现换行

找到Text被包裹的所有的Row（必须是Row），在Row内部，使用Expanded包住里面的元素。

嵌套关系如下：

Row->Expanded->Clumn->Text

Dart 复制代码

  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Column(
            children: [Text("我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字")],
          ),
        ),
      ],
    );
  }

3.嵌套的太深

Dart 复制代码

Widget build(BuildContext context) {
  return Row(
    children: [
      Expanded(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Expanded(child: Text("我是一段很长的文字我是一段很长的文字我是一段很长的文字"))
                        ],
                      )
                    ],
                  ),
                ),
              ],
            )
          ],
        ),
      )
    ],
  );
}

Tips：Column里放Expaned会报错，因为没有限制Column高度，内部Expanded展开会让高度变得无穷大，因此会报错。需要指定Column高度，例如套一层SizedBox(height:200)。