在 Flutter 中,需要在根目錄下的 pubspec.yaml
檔案中配置資源的路徑,資源才能被打包使用。
現在,看看如何配置資源吧。
1. 新增圖片資原始檔
1.1 新增本地圖片資源
flutter:
assets:
// 表示引入根目錄下的 images 資料夾下的所有資原始檔
- images/
// 只新增 images/ 下的 pci.png
- images/pci.png
複製程式碼
⚠️ 注意縮排!
本地資料夾內的資源可以選擇匯入整個資料夾,或者只匯入指定檔案。
使用:
Image.asset("images/pic.png")
複製程式碼
1.2 新增依賴外掛圖片資源
1.新增依賴外掛
在 pubspec.yaml
檔案的 dependencies 下新增依賴外掛。
dependencies:
flutter_gallery_assets: 0.1.6
複製程式碼
⚠️ 注意縮排!
2.註冊依賴外掛中的資源
同樣需要在 pubspec.yaml
檔案的 flutter 下的 assets 下新增所要用到的依賴外掛中的圖片路徑。
flutter:
assets:
- packages/flutter_gallery_assets/places/india_chennai_flower_market.png
複製程式碼
packages
後跟外掛的名稱,圖片需要外掛包中的完整路徑。
這種情況不能一次性註冊一個資料夾的圖片了,只能一張圖一張圖的新增。
3.使用
child: Image.asset(
// 圖片路徑
'places/india_chennai_flower_market.png',
// 包名
package: 'flutter_gallery_assets',
),
複製程式碼
在使用第三方庫資源的時候,需要加上包名。
1.3 解析度相關的資源
Flutter 支援根據裝置解析度自動選擇合適解析度的圖片資源,但資源需要按照以下規則新增:
../image.png
../1.0x/image.png
../2.0x/image.png
複製程式碼
使用:
AssetImage('../image.png')
複製程式碼
只需要使用預設的圖即可,AssetImage 會根據裝置解析度自動選擇合適大小的圖示。
2.新增字型資源
字型資源的新增格式如下,同樣是在 pubspec.yaml
中:
flutter:
fonts:
// 一組字型的名稱
- family: Schyler
fonts:
// 組內包哈的字型資原始檔,第一個是預設字型
- asset: fonts/Schyler-Regular.ttf
- asset: fonts/Schyler-Italic.ttf
// 定義該字型的style
style: italic
// 一組字型的名稱
- family: Trajan Pro
fonts:
- asset: fonts/TrajanPro.ttf
- asset: fonts/TrajanPro_Bold.ttf
weight: 700
// 一組字型的名稱
- family: Raleway
fonts:
- asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-Regular.ttf
- asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-Medium.ttf
weight: 500
- asset: packages/flutter_gallery_assets/fonts/raleway/Raleway-SemiBold.ttf
weight: 600
複製程式碼
使用字型:
TextStyle(
// 字型組名稱
fontFamily: 'Raleway',
inherit: false,
fontSize: 24.0,
// 根據 weight 選擇具體的字型
fontWeight: FontWeight.w500,
color: Colors.white,
textBaseline: TextBaseline.alphabetic,
)複製程式碼