Flutter中TextSpan能否实现自动换行避免文本溢出

API 探路者

2026-9-25

问题解决方法

溢出原因

当前溢出问题是因为Row组件默认不会对子组件做宽度约束，SelectableText.rich拿到了无限的宽度权限，所以会一直单行展示文本，最终超出屏幕宽度溢出。

修复方案

只需要给SelectableText.rich外层包裹Expanded组件即可，Expanded会自动限制子组件的宽度不超过Row的可用屏幕宽度，文本检测到最大宽度约束后会自动换行适配，完美适配长度未知的动态字符串。

修改后的完整代码

import 'package:flutter/material.dart';

void main() async {
  runApp(MaterialApp(
      home: Scaffold(
    body: Form(
      key: GlobalKey(),
      child: Center(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: [
            // 新增Expanded包裹SelectableText
            Expanded(
              child: SelectableText.rich(
                TextSpan(
                  children: [
                    TextSpan(text: "sfwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww"),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  )));
}