你必須掌握在Flutter中新增資原始檔

CoorChice發表於2019-04-06

目錄傳送門:《Flutter快速上手指南》先導篇

在 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,
  )複製程式碼

目錄傳送門:《Flutter快速上手指南》先導篇

如何找到我?

傳送門:CoorChice 的主頁

傳送門:CoorChice 的 Github


相關文章