iT邦幫忙

2022 iThome 鐵人賽

DAY 6
0
Mobile Development

Flutter Developer Learning SwiftUI系列 第 6

Flutter Developer Learning SwiftUI. @State var lesson6 = "顯示圖片"

  • 分享至 

  • xImage
  •  

Today Preview

Yes

1. 正文

「先感謝蒼老師今天來代課❤️」

今天示範了Image幾個常見的效果
首先最重要的是:先套.resizable再說
預設會填滿整個範圍,有可能比例跑掉
若不想要圖片比例跑掉
就是運用.scaledToFit 跟 .scaledToFill
若想設定特定比例
可以用.aspectRatio (這沒示範到)
若是用Fill導致超出範圍
則用.clipped裁切
修成特定形狀是使用.clipShape

建構方式嘛
主要就是用name或systemName
name的話比Flutter方便⚠️⚠️⚠️
不用在yaml檔宣告位置
使用時也不用記路徑跟副檔名
systemName的話就像Flutter的Icon☘️☘️☘️
但是他竟然一樣是吃字串!!!
我真的無言
然後也無法預覽
需要自己裝個SF Symbols

至於網路上的圖片是使用AsyncImage
但可惜的是並沒有Cache功能
請洽喵神大大的翠鳥或是來顆核彈


2. 對照表

Android iOS Flutter SwiftUI
ImageView UIImageView Image Image
Bitmap UIImage ImageProvider -
ScaleType UIViewContentMode BoxFit ContentMode

Tomorrow Preview

Yes


跨界學習系列文章

Android版:iOS Developer Learning Android. Lesson 12 - ImageView + ImagePicker (想知道如何把歪掉的照片調正嗎?)
Flutter版:iOS Developer Learning Flutter. Lesson8 圖片


https://github.com/mark33699/FDLS


上一篇
Flutter Developer Learning SwiftUI. @State var lesson5 = "顯示文字"
下一篇
Flutter Developer Learning SwiftUI. @State var lesson7 = "按鈕"
系列文
Flutter Developer Learning SwiftUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言