我使用Flutter超过一个星期,并且想创建一个阿拉伯语(从右到左)应用程序。
我正在阅读Internationalizing Flutter Apps,但没有提到如何设置布局方向。
那么,如何在Flutter中显示从右到左(RTL)的布局?
首先,您必须将flutter_localizations软件包添加到您的pubspec.yml
flutter_localizations
pubspec.yml
dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter
现在您有两个选择:
1.在所有设备上强制使用语言环境(和方向)
- 方法1: 本地化
import 'package:flutter/material.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; MaterialApp( localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], supportedLocales: [ Locale("fa", "IR"), // OR Locale('ar', 'AE') OR Other RTL locales ], locale: Locale("fa", "IR") // OR Locale('ar', 'AE') OR Other RTL locales, . . . );
- 方法2: 不进行本地化(如果使用此方法,则无需添加flutter_localizations)
MaterialApp( . . . builder: (context, child) { return Directionality( textDirection: TextDirection.rtl, child: child, ); }, . . . );
2.根据设备的区域设置设置布局方向(如果用户电话的区域设置是一种RTL语言,并且存在于中supportedLocales,则您的应用以RTL模式运行,否则,您的应用为LTR)
RTL
supportedLocales
LTR
import 'package:flutter/material.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; MaterialApp( localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], supportedLocales: [ Locale("en", "US"), Locale("fa", "IR"), // OR Locale('ar', 'AE') OR Other RTL locales ], . . . );
注意 :RTL语言在flutter中是:
[ 'ar', // Arabic 'fa', // Farsi 'he', // Hebrew 'ps', // Pashto 'ur', // Urdu ];