項目文件結構是怎樣子的?
一個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");
}
如何歸檔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的外部依賴項。