簡體   English   中英

flutter 如何創建從右到左 (rtl) 應用程序

[英]flutter how to Create right to left (rtl) App

我使用 GetX 在 Flutter 中啟動了一個應用程序。 我想創建一個 rtl 應用程序,我使用 flutter_localizations 包作為這篇文章

這是我的 main() 代碼

void main() => runApp(
      GetMaterialApp(
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        supportedLocales: [
          Locale('fa', 'IR'),
        ],
        locale: Locale('fa', 'IR'),
        home: HomeScreen(),
      ),
    );

這是我的主屏幕代碼

return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Text(
          "Some Text",
          style: TextStyle(
            color: Colors.black,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );

正如你在這張圖片中看到的,調試橫幅已移至左側,但文本鋼在左側

在此處輸入圖片說明

該應用程序已經是rtl。 只是 safeArea 下的小部件將小部件以最小尺寸放在左側,我不知道為什么會發生這種情況嘗試用一行或一個容器包裹你的文本小部件並給它一個寬度然后你可以看到默認的現在是在右邊而不是左邊。

在此處輸入圖片說明

您的應用程序正確無誤,您的問題是當前的正文小部件,將其作為正文小部件進行測試:

body: SafeArea(
  child: Row(
    mainAxisSize: MainAxisSize.max,
    children: [
      Text("Some Text"),
    ],
  ),
),

使用textDirection屬性並將其設置為TextDirection.rtl

本地文本方向

Text(
  "Some Text",
  textDirection: TextDirection.rtl,
),

全局文本方向

MaterialApp(
      home: Directionality(
        textDirection: TextDirection.rtl, 
        child: UserDetailsScreen(),
      ),
    ),

完整示例:

void main() => runApp(
      MaterialApp(
        home: Directionality(
            // add this
            textDirection: TextDirection.rtl,
            child: HomeScreen()),
      ),
    );

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Text(
          "ہائے میں فلاں دنیا ہوں !!! امید ہے کہ آپ اچھا کر رہے ہیں۔ کوڈنگ مبارک ہو :)",
          style: TextStyle(
            color: Colors.black,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

輸出:

在此處輸入圖片說明

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM