You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中如何实现RichText富文本同时居中和两端对齐(适配阿拉伯文)

解决方案
  • 第一步:在RichText外层嵌套Directionality组件,将textDirection属性设置为TextDirection.rtl,明确指定文本排版方向为从右到左,适配阿拉伯语等RTL语言的排版规则。
  • 第二步:将RichText的textAlign属性保留为TextAlign.justify,即可同时实现RTL方向下的两端对齐效果,符合阿拉伯文的排版要求。

完整实现代码如下:

Directionality(
  textDirection: TextDirection.rtl,
  child: RichText(
    textAlign: TextAlign.justify,
    text: TextSpan(
      children: [
        TextSpan(text: 'مَثَلُهُمْ كَمَثَلِ ٱلَّذِى ٱسْتَوْقَدَ نَارًا فَلَمَّآ أَضَآءَتْ مَا حَوْلَهُۥ ذَهَبَ ٱللَّهُ بِنُورِهِمْ وَتَرَكَهُمْ فِى ظُلُمَٰتٍۢ لَّا يُبْصِرُونَ, صُمٌّۢ بُكْمٌ عُمْىٌ فَهُمْ لَا يَرْجِعُونَ, أَوْ كَصَيِّبٍۢ مِّنَ ٱلسَّمَآءِ فِيهِ ظُلُمَٰتٌ وَرَعْدٌ وَبَرْقٌ يَجْعَلُونَ أَصَٰبِعَهُمْ فِىٓ ءَاذَانِهِم مِّنَ ٱلصَّوَٰعِقِ حَذَرَ ٱلْمَوْتِ ۚ وَٱللَّهُ مُحِيطٌۢ بِٱلْكَٰفِرِينَ'),
        TextSpan(text:'وَإِن كُنتُمْ فِى رَيْبٍۢ مِّمَّا نَزَّلْنَا عَلَىٰ عَبْدِنَا فَأْتُواْ بِسُورَةٍۢ مِّن مِّثْلِهِۦ وَٱدْعُواْ شُهَدَآءَكُم مِّن دُونِ ٱللَّهِ إِن كُنتُمْ صَٰدِقِينَ, فَإِن لَّمْ تَفْعَلُواْ وَلَن تَفْعَلُواْ فَٱتَّقُواْ ٱلنَّارَ ٱلَّتِى وَقُودُهَا ٱلنَّاسُ وَٱلْحِجَارَةُ ۖ أُعِدَّتْ لِلْكَٰفِرِينَ')
      ]
    )
  )
)

如果你的应用全局已经做了RTL适配,也可以直接在MaterialApp中配置阿拉伯语等RTL语言的本地化参数,系统会自动识别文本方向,无需额外嵌套Directionality组件。

内容的提问来源于stack exchange,提问作者Mahmoud Haj Ali

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 15:39:04