iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Mobile Development

Flutter Developer Learning SwiftUI系列 第 3

Flutter Developer Learning SwiftUI. @State var lesson3 = "常用Modifier"

  • 分享至 

  • xImage
  •  

Today Preview

1. 正文

今天是開始寫SwiftUI的第一天
之後的程式碼都會採取貼圖的方式
就不打程式碼出來了
因為iThome的配色不太好看又會折行
而且SwiftUI都是流行這樣分享
若真的需要source code,文末都有提供github連結

一開始先跟大家介紹Modifier
這是SwiftUI很大的特色
可以將View加上效果
例如xxView.padding()
你就“得到”了一個有padding的view(有點像Wrap的感覺)
接著還要其他效果,就繼續.下去
這是一種被稱作Chaining的寫法

以前在Flutter應該是沒有Modifier這個概念⚠️⚠️⚠️
因為Flutter裡萬物皆Widget
但SwiftUI裡Modifier只是一個function
不過這個差異我認為就造成了SwiftUI在學習上的一個困難:有的東西要用Modifier有的東西要用init
例如VStack的spacing
為什麼不出一個 .spacing() ???
這樣不是很亂嗎?(不知道有沒有一個邏輯或規則?)
雖然基本上80%都是用Modifier就是了...

Modifier基本上會分成兩種
就是通用型的跟專屬型的
例如今天要介紹的就是通用型
只要是View大家都可以用
而專屬型的例如Image的resizable
(這玩意我也覺得很多此一舉,image就是要resizable我才會下相關的Modifier啊,不resizable的image怎麼用?)

而談到Modifier
有個很重要的觀念就是要注意順序
例如先.background()再.padding()
還是先.padding()再.background()
效果就有差了

今天的code超級簡單~
各位高手應該一看就會
我就不特別贅述了
其中比較特別的就是:
在SwiftUI裡,如果要把View傳給function
型別要設為AnyView
好啦~那今天就到這邊~
我們明天見~


2. 對照表

Flutter SwiftUI
Padding .padding
SizedBox .frame
Align .frame
Positioned .offset
(Widget property) .foregroundColor
Container color .background
Container decoration .border

Tomorrow Preview

Yes


https://github.com/mark33699/FDLS


上一篇
Flutter Developer Learning SwiftUI. @State var lesson2 = "啟動畫面"
下一篇
Flutter Developer Learning SwiftUI. @State var lesson4 = "排列"
系列文
Flutter Developer Learning SwiftUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言