Flutter中泰语文本在换行符\n前显示异常问题

环境信息 #

• Flutter 3.10.5
• Dart SDK 3.0.5

问题描述 #

使用Text组件显示包含\n换行符的泰语文本时，换行符之前的首行文本显示异常，仅换行后的文本能正常显示。

代码示例 #

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'ไก่จิกเด็ก\nไก่จิกเด็ก',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
    );
  }
}

异常效果截图 #

解决方案 #

方法1：使用RichText拆分文本 #

将文本拆分为多个TextSpan，避免单条文本内包含换行符导致的渲染异常：

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: const [
      TextSpan(text: 'ไก่จิกเด็ก'),
      TextSpan(text: '\n'),
      TextSpan(text: 'ไก่จิกเด็ก'),
    ],
  ),
)

方法2：拆分多个Text组件 #

把每行文本单独用Text组件包裹，通过Column组合：

Column(
  children: const [
    Text('ไก่จิกเด็ก'),
    Text('ไก่จิกเด็ก'),
  ],
)

方法3：升级Flutter版本 #

Flutter后续版本（如3.13及以上）针对复杂脚本语言的文本渲染做了优化，升级版本后可能自动修复该问题。

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