兩分鐘帶你快速掌握Flutter的專案結構、資源、依賴和本地化

CrazyCodeBoy發表於2019-04-02
Flutter

為大家傾力打造的課程《Flutter從入門到進階-實戰攜程網App》上線了，解鎖Flutter開發新姿勢，一網打盡Flutter核心技術 點我Get！！！

在這篇文章中，將帶著大家一起認識Flutter的專案檔案結構是怎樣子的？，在哪裡歸檔圖片資源以及如何處理不同解析度？，如何歸檔strings資源，以及如何處理不同語言？也就是我們通常說的國際化，以及如何新增Flutter專案所需的依賴？

首先我們來學習Flutter的專案檔案結構是怎樣子的？

專案檔案結構是怎樣子的？

一個Flutter專案的通常檔案結構是這樣子的：

┬
└ projectname
  ┬
  ├ android      - Android部分的工程檔案
  ├ build        - 專案的構建輸出目錄
  ├ ios          - iOS部分的工程檔案
  ├ lib          - 專案中的Dart原始檔
    ┬
    └ src        - 包含其他原始檔
    └ main.dart  - 自動生成的專案入口檔案，類似RN的index.js檔案
  ├ test         - 測試相關檔案
  └ pubspec.yaml - 專案依賴配置檔案類似於RN的 package.json 
複製程式碼

當然大家也可以根據需要進行調整。

在哪裡歸檔圖片資源以及如何處理不同解析度？

  • 雖然Android將resources 和 assets 區別對待，但在Flutter中它們都會被作為assets處理， 所有存在於Android上res / drawable- *資料夾中的資源都放在Flutter的assets資料夾中。
  • 與Android類似，iOS 同樣將 images 和 assets 作為不同的東西，而 Flutter 中只有 assets。被放到 iOS 中 Images.xcasset 資料夾下的資源在 Flutter 中被放到了 assets 資料夾中。

在Flutter中assets 可以是任意型別的檔案，而不僅僅是圖片。例如，你可以把 json 檔案放置到 my-assets 資料夾中。

my-assets/data.json
複製程式碼

記得在 pubspec.yaml 檔案中宣告 assets：

assets:
 - my-assets/data.json
複製程式碼

然後在程式碼中我們可以通過 AssetBundle 來訪問它：

import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;

Future<String> loadAsset() async {
  return await rootBundle.loadString('my-assets/data.json');
}
複製程式碼

以上程式碼片段的完整部分可以在課程原始碼中查詢。

對於圖片，Flutter 像 iOS 一樣，遵循了一個簡單的基於畫素密度的格式。Image assets 可能是 1.0x 2.0x 3.0x 或是其他的任何倍數。這個 devicePixelRatio 表示了物理畫素到單個邏輯畫素的比率。

Android不同畫素密度的圖片和Flutter的畫素比率的對應關係

ldpi	0.75x
mdpi	1.0x
hdpi	1.5x
xhdpi	2.0x
xxhdpi	3.0x
xxxhdpi	4.0x
複製程式碼

以上程式碼片段的完整部分可以在課程原始碼中查詢。

Assets 可以被放置到任何屬性資料夾中——Flutter 並沒有預先定義的檔案結構。我們需要在 pubspec.yaml 檔案中宣告 assets 的位置，然後 Flutter 會把他們識別出來。

舉個例子，要把一個名為 my_icon.png 的圖片放到 Flutter 工程中，你可能想要把它放到images資料夾中。把圖片（1.0x）放置到 images 資料夾中，並把其它解析度的圖片放在對應的子資料夾中，並接上合適的比例係數，就像這樣：

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image
複製程式碼

接下來就可以在pubspec.yaml檔案中這樣宣告這個圖片資源：

assets:
 - images/my_icon.png
複製程式碼

現在，我們就可以藉助AssetImage來訪問它了。

return AssetImage("images/a_dot_burr.jpeg");
複製程式碼

以上程式碼片段的完整部分可以在課程原始碼中查詢。

也可通過 Image widget 直接使用：

@override
Widget build(BuildContext context) {
  return Image.asset("images/my_image.png");
}
複製程式碼

更多內容，可參考在Flutter中新增assets 和 images。

如何歸檔strings資源，以及如何處理不同語言？

不像 iOS 擁有一個 Localizable.strings 檔案，Flutter目前沒有專門的字串資源系統。 目前，最佳做法是將strings資源作為靜態欄位儲存在類中。 例如：

class Strings {
  static String welcomeMessage = "Welcome To Flutter";
}
複製程式碼

然後像如下方式來訪問它：

Text(Strings.welcomeMessage)
複製程式碼

以上程式碼片段的完整部分可以在課程原始碼中查詢。

預設情況下，Flutter 只支援美式英語字串。如果你要支援其他語言，請引入 flutter_localizations 包。你可能也要引入 intl 包來支援其他的 i10n 機制，比如日期/時間格式化。

dependencies:
  # ...
  flutter_localizations:
    sdk: flutter
  intl: "^0.15.6"
複製程式碼

以上程式碼片段的完整部分可以在課程原始碼中查詢。

要使用 flutter_localizations 包，還需要在 app widget 中指定 localizationsDelegates 和 supportedLocales。

import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
 localizationsDelegates: [
   // Add app-specific localization delegate[s] here
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
 ],
 supportedLocales: [
    const Locale('en', 'US'), // English
    const Locale('he', 'IL'), // Hebrew
    // ... other locales the app supports
  ],
  // ...
)
複製程式碼

以上程式碼片段的完整部分可以在課程原始碼中查詢。

這些代理包括了實際的本地化值，並且 supportedLocales 定義了 App 支援哪些地區。上面的例子使用了一個 MaterialApp ，所以它既有 GlobalWidgetsLocalizations 用於基礎 widgets，也有 MaterialWidgetsLocalizations 用於 Material wigets 的本地化。如果你使用 WidgetsApp ，則無需包括後者。注意，這兩個代理雖然包括了“預設”值，但如果你想讓你的 App 本地化，你仍需要提供一或多個代理作為你的 App 本地化副本。

當初始化時，WidgetsApp 或 MaterialApp 會使用你指定的代理為你建立一個 Localizations widget。Localizations widget 可以隨時從當前上下文中訪問裝置的地點，或者使用 Window.locale。

要訪問本地化檔案，使用 Localizations.of() 方法來訪問提供代理的特定本地化類。如需翻譯，使用 intl_translation 包來取出翻譯副本到 arb 檔案中。把它們引入 App 中，並用 intl 來使用它們。

更多 Flutter 中國際化和本地化的細節，請訪問 internationalization guide ，裡面有不使用 intl 包的示例程式碼。

注意，在 Flutter 1.0 beta 2 之前，在 Flutter 中定義的 assets 不能在原生一側被訪問。原生定義的資源在 Flutter 中也不可用，因為它們在獨立的資料夾中。

如何新增Flutter專案所需的依賴？

  • 在Android中，你可以在Gradle檔案來新增依賴項；
  • 在 iOS 中，通常把依賴新增到 Podfile 中；
  • 在RN中，通常是由package.json來管理專案依賴；

Flutter 使用 Dart 構建系統和 Pub 包管理器來處理依賴。這些工具將Android 和 iOS native 包裝應用程式的構建委派給相應的構建系統。

dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^3.0.3
複製程式碼

在Flutter中，雖然在Flutter專案中的Android資料夾下有Gradle檔案，但只有在新增平臺相關所需的依賴關係時才使用這些檔案。 否則，應該使用pubspec.yaml來宣告用於Flutter的外部依賴項。

iOS也是一樣，如果你的 Flutter 工程中的 iOS 資料夾中有 Podfile，請僅在新增iOS平臺相關的依賴時使用它。否則，應該使用pubspec.yaml來宣告用於Flutter的外部依賴項。

推薦一個用於查詢Flutter外掛的網站：Pub site。

參考

未完待續

  • Flutter入門基礎知識
  • Flutter主題和文書處理
  • Flutter什麼是宣告式UI
  • Flutter佈局與列表
  • Flutter手勢檢測及觸控事件處理
  • Flutter狀態管理d
  • Flutter執行緒和非同步UI
  • Flutter表單輸入與富文字
  • Flutter認識檢視(Views)md
  • Flutter呼叫硬體、第三方服務以及平臺互動、通知
  • Flutter路由與導航
  • Flutter專案結構、資源、依賴和本地化

相關文章