iT邦幫忙

2022 iThome 鐵人賽

DAY 9
0
Mobile Development

Flutter Developer Learning SwiftUI系列 第 9

Flutter Developer Learning SwiftUI. @State var lesson9 = "挑選器"

  • 分享至 

  • xImage
  •  

Today Preview

Yes

1. 正文

SwiftUI超多picker的
總共有五種default, menu, segmented, wheel, inline
然後我在試的時候就超疑惑
你default跟menu長一樣就算了
你wheel跟inline也一模模一樣樣是哪招?(現在年輕人會這樣講話嗎?)
本來我還想說是SwiftUI版本的差異
結果後來知道是被List包住的話會長得不一樣
這也太雷了吧...到底誰會想得到...

接著談一下在SwiftUI很多的View在init時都會要求給一個Binding
這是原生直接幫我們做好可以管理subView狀態
只要在state變數的前面加個$傳進去
自然就會根據變化去更新了,很方便
印象中Flutter好像比較少看到原生Widget提供這樣的方式⚠️⚠️⚠️
開發者要去處理:要嘛就是在父層管理去管理子層,要嘛就是子層自己管理自己

  1. 一般的picker
  2. picker在List

最後談一下在SwiftUI似乎沒有提供多輪的Picker
所以我試了一下用兩個Picker實現
有兩個重點
要.compositingGroup()
而且要.clipped()
這兩個Picker才不會重疊
然後就是根據第一個Picker的state決定要顯示第2之1個Picker還是第2之2個

最後的最後補充一下ForEach
ForEach不是流程控制(但也不是View)
就是一種可以幫你重複生出View的語法
滿方便的~搭配ViewBuilder很常見
如果是Flutter要做的話可以用List.generate來生Widget☘️☘️☘️

  1. 兩輪的picker

    Swift變數可以用中文真爽XDD⚠️⚠️⚠️

2. 對照表

Android iOS Flutter(Material) Flutter(Cupertino) SwiftUI
Spinner UIPickerView showBottomSheet CupertinoActionSheet Picker

Tomorrow Preview

Yes


跨界學習系列文章

Android版:iOS Developer Learning Android. Lesson 13 - Spinner + DatePickerDialog (UIPickerView的代替品:下拉選單)
Flutter版:iOS Developer Learning Flutter. Lesson9 選擇器


https://github.com/mark33699/FDLS


上一篇
Flutter Developer Learning SwiftUI. @State var lesson8 = "文字輸入"
下一篇
Flutter Developer Learning SwiftUI. @State var lesson10 = "日期挑選"
系列文
Flutter Developer Learning SwiftUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言