一尘不染

从右向左(RTL)颤动

flutter

我使用Flutter超过一个星期,并且想创建一个阿拉伯语(从右到左)应用程序。

我正在阅读Internationalizing Flutter
Apps
,但没有提到如何设置布局方向。

那么,如何在Flutter中显示从右到左(RTL)的布局?


阅读 251

收藏
2020-08-13

共1个答案

一尘不染

首先,您必须将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

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
];
2020-08-13