iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0
Mobile Development

Flutter Developer Learning SwiftUI系列 第 13

Flutter Developer Learning SwiftUI. @State var lesson13 = "顏色"

  • 分享至 

  • xImage
  •  

Today Preview

首先,SwiftUI的Color跟Flutter的顏色不同⚠️⚠️⚠️(跟一般常見的顏色也不同)
它是一個像View的東西(雖然它不是Conform View)
可以把它想成是一個有延伸性的有顏色的View
當然它還是可以跟一般顏色的用法一樣,拿來上色
下面跟各位介紹了各種顏色的建立方式

除了今天的內容
各位也可以參考13的Color 不只是顏色
裡面談了很多跟顏色有關的知識
非常豐富

1.


先展示了SwiftUI系統提供的顏色
iOS15之前只有第一排那些顏色
第二排左邊數過來前五個顏色是iOS15才追加的
而最後兩個.primary, .secondary
通常是拿來給文字使用的
效果請見下圖(來源)

iOS系統可以選擇淺色模式或深色模式
所以如果是使用系統提供的顏色
在不同模式下顯示的顏色會不一樣
就算都是.red也會略有不同
詳細色表請見HIG

2.


接著介紹幾個顏色建立的方式
首先是UIColor
就是以前UIKit在用的那種一般的顏色
UIKit的顏色只要是system開頭的
就是跟SwiftUI的一樣:會根據深淺變動(可以見到下圖左右半邊的紅色略有不同)

再來是Xcode裡有個地方可以把顏色設定起來(跟Android一樣,但Flutter沒有⚠️⚠️⚠️)
例如我們根據下圖粉色標示設定了一個叫flutter的顏色(注意右下input method可以選擇hex或255)
在code裡就可以用Color("flutter")來產生顏色(字串...為什麼還是字串, 怎麼不學學人家Android)

而橘色的標示就是選擇是否要區分Dark mode顯示不同顏色
Any的意思是不管是否iOS13之前都用這個顏色
因為dark mode是iOS13才開始的

最後當然在code也可以用RGB的方式產生顏色
只是要注意Color space是用哪種

3.


而iOS的顏色的RGB很奇怪都跟人家不一樣⚠️⚠️⚠️
是用小數點比例來表示
當然我們就會希望可以在code裡直接用整數或hex
那麼就可以參考這裡的extension

PS.
Xcode不像AS可以在行號顯示顏色⚠️⚠️⚠️
但有個可以在code裡顯示的方法叫Color Literal
可以看這個影片這個影片(但我是尻不出來就是了...)
給各位參考

Tomorrow Preview

Yes


https://github.com/mark33699/FDLS


上一篇
Flutter Developer Learning SwiftUI. @State var lesson12 = "其他控件"
下一篇
Flutter Developer Learning SwiftUI. @State var lesson14 = "形狀"
系列文
Flutter Developer Learning SwiftUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言