你必須掌握在Flutter中新增資原始檔
在 Flutter 中,需要在根目錄下的 pubspec.yaml
檔案中配置資源的路徑,資源才能被打包使用。
現在,看看如何配置資源吧。
1. 新增圖片資原始檔
1.1 新增本地圖片資源
flutter: assets: // 表示引入根目錄下的 images 資料夾下的所有資原始檔 - images/ // 只新增 images/ 下的 pci.png - images/pci.png 複製程式碼
:warning: 注意縮排!
本地資料夾內的資源可以選擇匯入整個資料夾,或者只匯入指定檔案。
使用:
Image.asset("images/pic.png") 複製程式碼
1.2 新增依賴外掛圖片資源
1.新增依賴外掛
在 pubspec.yaml
檔案的 dependencies 下新增依賴外掛。
dependencies: flutter_gallery_assets: 0.1.6 複製程式碼
:warning: 注意縮排!
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, )複製程式碼