兩分鐘帶你快速掌握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從入門到進階實戰攜程網App

未完待續

• Flutter入門基礎知識
• Flutter主題和文字處理
• Flutter什麼是聲明式UI
• Flutter佈局與列表
• Flutter手勢檢測及觸摸事件處理
• Flutter狀態管理d
• Flutter線程和異步UI
• Flutter表單輸入與富文本
• Flutter認識視圖(Views)md
• Flutter調用硬件、第三方服務以及平臺交互、通知
• Flutter路由與導航
• Flutter項目結構、資源、依賴和本地化