前言
在多语言适配的时候,波斯语的显示是从右到左的,需要针对一些控件进行单独适配。
核心逻辑:根据语言动态设置 Directionality
dart
Widget build(BuildContext context) {
final isRtl = Localizations.localeOf(context).languageCode == 'fa';
return Directionality(
textDirection: isRtl ? TextDirection.rtl : TextDirection.ltr,
child: YourMainWidget(),
);
}
结合 MaterialApp 自动判断 Locale 设置方向
dart
class MyApp extends StatelessWidget {
@override
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 等的方向:
dart
final isRtl = Localizations.localeOf(context).languageCode == 'fa';
TextField(
textDirection: isRtl ? TextDirection.rtl : TextDirection.ltr,
textAlign: isRtl ? TextAlign.right : TextAlign.left,
)
dart
Row(
textDirection: isRtl ? TextDirection.rtl : TextDirection.ltr,
children: [...],
)
工具函数封装建议(便于项目统一处理)
你可以写一个统一函数判断是否是 RTL 语言:
dart
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。