从右向左(RTL)颤动

Question

我使用Flutter超过一周,并想创建一个阿拉伯语(从右到左)的应用程序.

我正在阅读国际化Flutter应用程序,但它没有提到如何设置布局方向.

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

Answer 1

首先，您必须将flutter_localizations软件包添加到您的pubspec.yml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

现在您有两个选择：

1.在所有设备上强制使用语言环境（和方向）

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

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("fa", "IR"), // OR Locale('ar', 'AE') OR Other RTL locales
  ],
  locale: Locale("fa", "IR") // OR Locale('ar', 'AE') OR Other RTL locales,
  .
  .
  .
);

注意：颤抖的rtl语言是：

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
  ],
  .
  .
  .
);

Answer 2

为整个应用程序设置RTL配置的最佳和最短方法。

void main() {
  runApp(
    MaterialApp(
      home: Directionality( // add this
        textDirection: TextDirection.rtl, // set this property 
        child: HomePage(),
      ),
    ),
  );
}

Answer 3

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

Answer 4

如果您需要反向显示文本，只需将其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,
    ),