【Flutter】多语言适配-波斯语RTL从右到左
前言
在多语言适配的时候,波斯语的显示是从右到左的,需要针对一些控件进行单独适配。
核心逻辑:根据语言动态设置 Directionality
Widget build(BuildContext context) {final isRtl = Localizations.localeOf(context).languageCode == 'fa';return Directionality(textDirection: isRtl ? TextDirection.rtl : TextDirection.ltr,child: YourMainWidget(),);
}
结合 MaterialApp 自动判断 Locale 设置方向
class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(localizationsDelegates: const [GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,GlobalCupertinoLocalizations.delegate,],supportedLocales: const [Locale('en'),Locale('fa'),],builder: (context, child) {final locale = Localizations.localeOf(context);final isRtl = locale.languageCode == 'fa';return Directionality(textDirection: isRtl ? TextDirection.rtl : TextDirection.ltr,child: child!,);},home: HomePage(),);}
}
控制单个组件方向(局部 RTL / LTR)
你可以按需局部设置 TextField、Text、Row 等的方向:
final isRtl = Localizations.localeOf(context).languageCode == 'fa';TextField(textDirection: isRtl ? TextDirection.rtl : TextDirection.ltr,textAlign: isRtl ? TextAlign.right : TextAlign.left,
)
Row(textDirection: isRtl ? TextDirection.rtl : TextDirection.ltr,children: [...],
)
工具函数封装建议(便于项目统一处理)
你可以写一个统一函数判断是否是 RTL 语言:
bool isRtlLanguage(BuildContext context) {final lang = Localizations.localeOf(context).languageCode;return lang == 'fa' || lang == 'ar' || lang == 'he';
}
特别提示
-
TextAlign.start / TextAlign.end 会自动适配方向,不建议用 TextAlign.left/right。
-
推荐使用AlignmentDirectional,不建议使用Alignment。
-
EdgeInsetsDirectional 自动适配左右方向,推荐代替 EdgeInsets.only(left/right)。
-
自动方向适配依赖于你在 MaterialApp 中设置正确的 locale 和 supportedLocales。
-
推荐使用BorderDirectional,不推荐使用Border。
-
推荐使用BorderRadiusDirection,不推荐使用BorderRadius。