3-5 【文檔講解】項(xiàng)目結(jié)構(gòu)蠢护、資源雅宾、依賴和本地化
聲明：Flutter專欄文檔均來自慕課網(wǎng)
https://coding.imooc.com/class/321.html
【文檔講解】項(xiàng)目結(jié)構(gòu)、資源葵硕、依賴和本地化
- 項(xiàng)目文件結(jié)構(gòu)是怎樣子的眉抬？
- 在哪里歸檔圖片資源以及如何處理不同分辨率？
- 如何歸檔strings資源懈凹，以及如何處理不同語(yǔ)言蜀变？
- 如何添加Flutter項(xiàng)目所需的依賴？
項(xiàng)目文件結(jié)構(gòu)是怎樣子的介评？
一個(gè)Flutter項(xiàng)目的通常文件結(jié)構(gòu)是這樣子的：
┬
└ projectname
┬
├ android - Android部分的工程文件
├ build - 項(xiàng)目的構(gòu)建輸出目錄
├ ios - iOS部分的工程文件
├ lib - 項(xiàng)目中的Dart源文件
┬
└ src - 包含其他源文件
└ main.dart - 自動(dòng)生成的項(xiàng)目入口文件库北，類似RN的index.js文件
├ test - 測(cè)試相關(guān)文件
└ pubspec.yaml - 項(xiàng)目依賴配置文件類似于RN的 package.json
當(dāng)然大家也可以根據(jù)需要進(jìn)行調(diào)整。
在哪里歸檔圖片資源以及如何處理不同分辨率们陆？
- 雖然Android將resources 和 assets 區(qū)別對(duì)待贤惯，但在Flutter中它們都會(huì)被作為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');
}
對(duì)于圖片芹橡，F(xiàn)lutter 像 iOS 一樣毒坛，遵循了一個(gè)簡(jiǎn)單的基于像素密度的格式。Image assets 可能是 1.0x 2.0x 3.0x 或是其他的任何倍數(shù)林说。這個(gè) devicePixelRatio 表示了物理像素到單個(gè)邏輯像素的比率煎殷。
Android不同像素密度的圖片和Flutter的像素比率的對(duì)應(yīng)關(guān)系
ldpi 0.75x
mdpi 1.0x
hdpi 1.5x
xhdpi 2.0x
xxhdpi 3.0x
xxxhdpi 4.0x
Assets 可以被放置到任何屬性文件夾中——Flutter 并沒有預(yù)先定義的文件結(jié)構(gòu)。我們需要在 pubspec.yaml 文件中聲明 assets 的位置腿箩，然后 Flutter 會(huì)把他們識(shí)別出來豪直。
舉個(gè)例子，要把一個(gè)名為my_icon.png 的圖片放到 Flutter 工程中珠移，你可能想要把它放到images文件夾中弓乙。把圖片（1.0x）放置到 images 文件夾中末融，并把其它分辨率的圖片放在對(duì)應(yīng)的子文件夾中，并接上合適的比例系數(shù)暇韧，就像這樣：
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文件中這樣聲明這個(gè)圖片資源：
assets:
- images/my_icon.png
現(xiàn)在勾习，我們就可以借助AssetImage來訪問它了。
return AssetImage("images/a_dot_burr.jpeg");
也可通過 Image widget 直接使用：
@override
Widget build(BuildContext context) {
return Image.asset("images/my_image.png");
}
更多內(nèi)容懈玻，可參考在Flutter中添加assets 和 images巧婶。
如何歸檔strings資源，以及如何處理不同語(yǔ)言酪刀？
不像 iOS 擁有一個(gè) Localizable.strings 文件，F(xiàn)lutter目前沒有專門的字符串資源系統(tǒng)钮孵。 目前骂倘，最佳做法是將strings資源作為靜態(tài)字段保存在類中。 例如：
class Strings {
static String welcomeMessage = "Welcome To Flutter";
}
然后像如下方式來訪問它：
Text(Strings.welcomeMessage)
默認(rèn)情況下巴席，F(xiàn)lutter 只支持美式英語(yǔ)字符串历涝。如果你要支持其他語(yǔ)言，請(qǐng)引入 flutter_localizations 包漾唉。你可能也要引入 intl 包來支持其他的 i10n 機(jī)制荧库，比如日期/時(shí)間格式化。
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
],
// ...
)
這些代理包括了實(shí)際的本地化值，并且 supportedLocales 定義了 App 支持哪些地區(qū)般此。上面的例子使用了一個(gè) MaterialApp 蚪战，所以它既有 GlobalWidgetsLocalizations 用于基礎(chǔ) widgets，也有 MaterialWidgetsLocalizations 用于 Material wigets 的本地化铐懊。如果你使用 WidgetsApp 邀桑，則無需包括后者。注意科乎，這兩個(gè)代理雖然包括了“默認(rèn)”值壁畸，但如果你想讓你的 App 本地化，你仍需要提供一或多個(gè)代理作為你的 App 本地化副本茅茂。
當(dāng)初始化時(shí)捏萍，WidgetsApp 或 MaterialApp 會(huì)使用你指定的代理為你創(chuàng)建一個(gè) Localizations widget。Localizations widget 可以隨時(shí)從當(dāng)前上下文中訪問設(shè)備的地點(diǎn)空闲，或者使用 Window.locale照弥。
要訪問本地化文件，使用 Localizations.of() 方法來訪問提供代理的特定本地化類进副。如需翻譯这揣，使用 intl_translation 包來取出翻譯副本到 arb 文件中悔常。把它們引入 App 中，并用 intl 來使用它們给赞。
更多 Flutter 中國(guó)際化和本地化的細(xì)節(jié)机打，請(qǐng)?jiān)L問 internationalization guide ，里面有不使用 intl 包的示例代碼片迅。
注意残邀，在 Flutter 1.0 beta 2 之前，在 Flutter 中定義的 assets 不能在原生一側(cè)被訪問柑蛇。原生定義的資源在 Flutter 中也不可用芥挣，因?yàn)樗鼈冊(cè)讵?dú)立的文件夾中。
如何添加Flutter項(xiàng)目所需的依賴耻台？
- 在Android中空免，你可以在Gradle文件來添加依賴項(xiàng)；
- 在 iOS 中盆耽，通常把依賴添加到 Podfile 中蹋砚；
- 在RN中，通常是由package.json來管理項(xiàng)目依賴摄杂；
Flutter 使用 Dart 構(gòu)建系統(tǒng)和 Pub 包管理器來處理依賴坝咐。這些工具將Android 和 iOS native 包裝應(yīng)用程序的構(gòu)建委派給相應(yīng)的構(gòu)建系統(tǒng)。
dependencies:
flutter:
sdk: flutter
google_sign_in: ^3.0.3
在Flutter中析恢，雖然在Flutter項(xiàng)目中的Android文件夾下有Gradle文件墨坚，但只有在添加平臺(tái)相關(guān)所需的依賴關(guān)系時(shí)才使用這些文件。 否則映挂，應(yīng)該使用pubspec.yaml來聲明用于Flutter的外部依賴項(xiàng)框杜。
iOS也是一樣，如果你的 Flutter 工程中的 iOS 文件夾中有 Podfile袖肥，請(qǐng)僅在添加iOS平臺(tái)相關(guān)的依賴時(shí)使用它咪辱。否則，應(yīng)該使用pubspec.yaml來聲明用于Flutter的外部依賴項(xiàng)椎组。
推薦一個(gè)用于查找Flutter插件的網(wǎng)站：Pub site油狂。
