Flutter时从右向左(RTL)

33qvvth1  于 2022-12-19  发布在  Flutter
关注(0)|答案(7)|浏览(192)

我使用Flutter已经一个多星期了,我想创建一个阿拉伯语(从右到左)应用程序。
我正在阅读Internationalizing Flutter Apps,但它没有提到如何设置布局方向。
那么,如何在Flutter中显示从右到左(RTL)布局呢?

kkbh8khc

kkbh8khc1#

你有两个选择

1.在所有设备上强制区域设置(和方向)

--***方法1:***带本地化
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

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("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
];
sshcrbum

sshcrbum2#

您需要创建一个Builder并使用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,
                    );
                  },
                ),
              );
            },
          .
          .
          .
        );
zbdgwd5y

zbdgwd5y3#

    • 为整个应用程序设置RTL配置**的最佳和最短方法。
void main() {
  runApp(
    MaterialApp(
      home: Directionality( // add this
        textDirection: TextDirection.rtl, // set this property 
        child: HomePage(),
      ),
    ),
  );
}
qncylg1j

qncylg1j4#

如果你需要反向显示文本,那么只需将它的textdirection属性设置为TextDirection.rtl
TextField小部件的示例代码,

TextField(
  textDirection: TextDirection.rtl,
  decoration: InputDecoration(
    labelText: "Enter Pashto Name",
  ),
),

文本小工具示例代码,

Text(
      "This text is in the other direction!"
      textDirection: TextDirection.rtl,
    ),
dfddblmv

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,
                    );
                  },
                ),
              );
            },
zed5wv10

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

相关问题