Flutter中如何实现RTL（从右到左）的布局展示效果

前端（HTML/CSS）场景 #

网页开发中单独设置文本方向不生效，可按以下配置调整：

• 给目标文本的父级标签添加dir="rtl"属性，同时配套CSS样式：

.target-text {
  direction: rtl;
  unicode-bidi: bidi-override;
}

• 如果需要兼容左右混合排版的场景，把unicode-bidi属性值改为plaintext即可自动识别文本内容调整方向。

Flutter 场景 #

Flutter中TextDirection配置不生效可逐一排查以下配置：

• 确认你是给Text组件的父级Directionality组件设置了TextDirection.rtl，仅给Text组件单独设置属性不会生效
• 如果是输入框场景，需要同时给TextField配置textDirection: TextDirection.rtl和textAlign: TextAlign.right
• 检查全局MaterialApp的locale配置，如果默认配置了中文、英文等从左到右的语言，会覆盖局部TextDirection设置，给对应组件外层手动包裹Directionality组件强制指定方向即可。

Android 原生场景 #

Android中配置不生效首先要开启全局RTL支持：

• 在AndroidManifest.xml的application节点下添加android:supportsRtl="true"
• 给对应TextView设置android:textDirection="rtl"，混合文本场景改为android:textDirection="anyRtl"即可适配。

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