iT邦幫忙

2022 iThome 鐵人賽

DAY 12
0
Mobile Development

Flutter Developer Learning SwiftUI系列 第 12

Flutter Developer Learning SwiftUI. @State var lesson12 = "其他控件"

  • 分享至 

  • xImage
  •  

Today Preview

Yes

1. 正文

今天介紹一些比較輕量或少見的控件(Control)
請搭配code服用

1. Toggle

  • 因為我那時候不知道有.labelsHidden()這個寫法
    所以就用硬幹的
  • 可以在Binding上加入animation滿酷的

2. Slider

  • init時可以直接傳入左右兩側的label,就不用再用HStack了,滿方便的
  • Slider的value一定要是Float,但init時可以給step,就可以做到間隔的效果

3. Stepper

  • 這東西Flutter上應該比較少看到⚠️⚠️⚠️,是個很iOS style的控件,通常相關的使用場景都會使用離散Slider,但他比較省空間,而且如果數值大的話比較好操作(例如0~100)

4. .contextMenu

  • 我總算知道Label的用途了!!!在contextMenu裡要顯示system image一定要用Label,不管是直接用Image或把Image用Text包起來都不行
  • 以前UIKit的Context Menu還可以顯示Preview
    SwiftUI當然沒問題啊!請用iOS16...(真的很半殘耶...)
    iOS15解法請見
  • 其實SwiftUI類似的東西Menu的東西很多,彙整一下:
    a. Menu
    b. Picker when style menu
    c. .contextMenu
    首先在操作部分,只有c是長按,a跟b都是點一下
    再來外觀部分
    由左至右依序是a.b.c,可以看一下點開第一層的效果
    按鈕文字、顯示勾選、選單位置、背景模糊,這些地方都有差異

    這是第二層的效果
    可以觀察到c還能看到上一層的內容

    所以我的好奇心就出現了XD

Yes
最後要注意一下,
Picker的子層必須也用Menu
如果你Picker套Picker就會變成這樣...

5. DisclosureGroup

  • DisclosureGroup就是伸縮自如的...(的什麼你說啊)
    總之他就是拿來做開合選單的(我很喜歡叫他手風琴XD)
    如範例加上一點變化(打勾效果)也可以拿來做挑選
    他也是屬於List變身一族的
    如果沒有被List包起來的話就會長得很陽春,像這樣:

code of the day


2. 對照表

Flutter SwiftUI
Switch Toggle
Slider Slider
DropdownButton Stepper
Positioned .contextMenu
ExpansionTile DisclosureGroup

Tomorrow Preview


https://github.com/mark33699/FDLS


上一篇
Flutter Developer Learning SwiftUI. @State var lesson11 = "對話框"
下一篇
Flutter Developer Learning SwiftUI. @State var lesson13 = "顏色"
系列文
Flutter Developer Learning SwiftUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言