我使用Flutter已经一个多星期了,我想创建一个阿拉伯语(从右到左)应用程序。我正在阅读Internationalizing Flutter Apps,但它没有提到如何设置布局方向。那么,如何在Flutter中显示从右到左(RTL)布局呢?
kkbh8khc1#
你有两个选择
1.在所有设备上强制区域设置(和方向)
--***方法1:***带本地化将flutter_localizations软件包添加到pubspec.yml
flutter_localizations
pubspec.yml
dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter
那么
import 'package:flutter/material.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; MaterialApp( localizationsDelegates: [ GlobalCupertinoLocalizations.delegate, 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:***无本地化
MaterialApp( . . . builder: (context, child) { return Directionality( textDirection: TextDirection.rtl, child: child, ); }, . . . );
2.根据设备区域设置设置布局方向(如果用户手机区域设置是RTL并且存在于supportedLocales中,则您的应用在RTL模式下运行,否则您的应用为LTR)
RTL
supportedLocales
LTR
将flutter_localizations软件包添加到pubspec.yml
import 'package:flutter/material.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; MaterialApp( localizationsDelegates: [ GlobalCupertinoLocalizations.delegate, GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, ], supportedLocales: [ Locale("en", "US"), Locale("fa", "IR"), // OR Locale('ar', 'AE') OR Other RTL locales ], . . . );
注:flutter中的rtl语言有:
[ 'ar', // Arabic 'fa', // Farsi 'he', // Hebrew 'ps', // Pashto 'ur', // Urdu ];
sshcrbum2#
您需要创建一个Builder并使用TextDirection.rtl将布局方向传递给它
TextDirection.rtl
new MaterialApp( title: 'Flutter RTL', color: Colors.grey, builder: (BuildContext context, Widget child) { return new Directionality( textDirection: TextDirection.rtl, child: new Builder( builder: (BuildContext context) { return new MediaQuery( data: MediaQuery.of(context).copyWith( textScaleFactor: 1.0, ), child: child, ); }, ), ); }, . . . );
zbdgwd5y3#
void main() { runApp( MaterialApp( home: Directionality( // add this textDirection: TextDirection.rtl, // set this property child: HomePage(), ), ), ); }
qncylg1j4#
如果你需要反向显示文本,那么只需将它的textdirection属性设置为TextDirection.rtl。TextField小部件的示例代码,
textdirection
TextField( textDirection: TextDirection.rtl, decoration: InputDecoration( labelText: "Enter Pashto Name", ), ),
文本小工具示例代码,
Text( "This text is in the other direction!" textDirection: TextDirection.rtl, ),
dfddblmv5#
只需将此附加到您的素材应用程序即可:
builder: (BuildContext context, Widget child) { return new Directionality( textDirection: TextDirection.rtl, child: new Builder( builder: (BuildContext context) { return new MediaQuery( data: MediaQuery.of(context).copyWith( textScaleFactor: 1.0, ), child: child, ); }, ), ); },
zed5wv106#
如果使用flutter_localizations:sdk:扑动添加以下行以更改应用程序方向
supportedLocales: [ Locale("fa", "IR"), Locale("en", 'US'), ], locale: Locale("fa", "IR") // this is important line if not add this Apps will not change direction
xzabzqsa7#
第一个月
7条答案
按热度按时间kkbh8khc1#
你有两个选择
1.在所有设备上强制区域设置(和方向)
--***方法1:***带本地化
将
flutter_localizations
软件包添加到pubspec.yml
那么
--***方法2:***无本地化
2.根据设备区域设置设置布局方向(如果用户手机区域设置是
RTL
并且存在于supportedLocales
中,则您的应用在RTL
模式下运行,否则您的应用为LTR
)将
flutter_localizations
软件包添加到pubspec.yml
那么
注:flutter中的rtl语言有:
sshcrbum2#
您需要创建一个Builder并使用
TextDirection.rtl
将布局方向传递给它zbdgwd5y3#
RTL
配置**的最佳和最短方法。qncylg1j4#
如果你需要反向显示文本,那么只需将它的
textdirection
属性设置为TextDirection.rtl
。TextField小部件的示例代码,
文本小工具示例代码,
dfddblmv5#
只需将此附加到您的素材应用程序即可:
zed5wv106#
如果使用flutter_localizations:sdk:扑动
添加以下行以更改应用程序方向
xzabzqsa7#
第一个月