今天的文章竟然用到五級標題...是在寫論文嗎...= =

Today Preview

1. 基本用法

1.1 跟以前類似, 有分UIImageView(就是Image) 跟 UIImage(ImageProvider)☘️☘️☘️

//Image這個widget, 有一個叫做image的屬性, 型別是ImageProvider
Image(image: AssetImage("resource/images/ANGER_unicorn.png"))

1.2 有三種方便的用法

1.2.1 Image.asset

1.2.1.1

圖片資源可以隨意放在專案裡任一資料夾
但必須在pubspec.yaml裡指定路徑⚠️⚠️⚠️
(還好可以不用一張一張圖片列出來= =.....)

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg
  assets:
    - resource/images/

還有使用時要注意！
不像以前只要檔名了⚠️⚠️⚠️
必須把路徑跟副檔名都列出來
PS.還好沒有跟Android一樣檔名只能小寫...

Image.asset("resource/images/ANGER_unicorn.png")

1.2.1.2

gif放了就會動了, 不需要套件⚠️⚠️⚠️

1.2.2 Image.network

1.2.2.1

可以直接顯示網路圖片(也有cache機制)
這也是內建功能, 不需要套件⚠️⚠️⚠️

Image.network("https://zh.wikipedia.org/static/images/project-logos/zhwiki-2x.png")

1.2.2.2

但是Image.network是沒有placeholder的
如果要的話, 需要改用FadeInImage.assetNetwork

FadeInImage.assetNetwork(
  placeholder: "resource/images/rainbowBall.jpg",
  image: "https://images7.alphacoders.com/110/1102158.png",
  height: 250,
  fit: BoxFit.fitHeight,
)

1.2.3 Image.file

看起來是只有Android會用到//日後補充：ImagePicker也會用到
(不知道是不是也可以取得iOS Files app的圖片, 還沒研究)

Image.file(File("/sdcard/flutter.jpeg"))

2. Fit

根據我的經驗
比例會跑掉的(scaleToFill)一定不選
所以fill會被排除
通常會留邊的(scaleAspectFit)也不選
所以contain, scaleDown也被排除
基本上應該就是選擇跟scaleAspectFill效果一致的cover
實際效果請見下圖：

對照表

本集內容Android版請見：iOS Developer Learning Android. Lesson 12

下集預告：選擇器

最後提供一下github.com/mark33699/IDLF