#3 使用 SwiftUI 的 UI 元件 & data binding 創作有趣的 App
這次要做的是能和使用者互動的App，使用到很多data binding。因為最近BlackPink要開啟亞洲巡迴演唱會，身邊的朋友都在搶票，所以決定以BlackPink為主題幫大家複習有哪些經典歌曲！
BTW:下禮拜是高雄場最後機會，要記得趕快去搶！
ㄧ、成果MP4
二、Github link
三、iPhone、iPad截圖
四、icon設置(Xcode14以上適用)
五、基本功能
Picker
這次的互動元件很多都是用Picker來做，因為他的功能實在是太強大拉！！！
a.(.segment)
切換歌曲，讓使用者一目了然有哪些歌曲可以選擇
b.(.menu)
選擇要設計衣服的對象
c.(.wheel)
當完成設計衣服的大作之後，就可以來這邊簽上你的大名拉～～
利用wheel提供給使用者7種不同的字型去做選擇
Datepicker
利用Datepicker讓使用者選擇他是什麼時候成為粉絲的，選取的結果會顯示在下一欄since後面
因為不可能發生在未來之後，所以我把可以選擇的時間限制在今天之前
日曆的顏色也換成他們最愛的粉紅色～～
stepper
利用stepper去調整歌曲音量
Slider
利用Slider去調整照片大小
Sheet
ColorPicker
利用2個ColorPicker讓使用者去選者想要的衣服漸層
TextField
Random + alert
選不出要聽哪首歌嗎？沒關係，按一下隨機按鈕系統自動幫你選一個
六、進階功能
- toggle去播放音樂
on:play music
off:pause music
在搭配stepper去調整音量
Toggle("play music",isOn: $isplay)
.onChange(of: isplay, perform: { value in
let url = Bundle.main.url(forResource: songs[selectsong], withExtension: "mp3")!
let playerItem = AVPlayerItem(url: url)
player.replaceCurrentItem(with: playerItem)
if value {
player.play()
} else {
player.pause()
}
})ps:因為音樂有版權我就不設公開了
2.toggle搭配binding element去控制要不要顯示picker
為了版面好看，我用toggle去控制要不要顯示複雜的picker元件
3.button返回sheet的原頁面
原本沒有button的話要整個頁面往下滑才會返回原page，但因為sheet頁面是做scrollview，如果兩個搭配再一起的話會很難控制，所以我額外加了一個button去返回
4.DisclosureGroup
還有另一種隱藏列表的方式就是DisclosureGroup，透過這項功能可以把很攏長的畫面隱藏起來，等需要的時候在打開來
七、結論與心得
這次的project比前兩次的好玩多拉！！多了很多可以自己控制的功能，更好的與使用者互動。花比較多時間的地方是一開始要搞懂Data Binding的意義與用法，搞懂之後做起來就很快了，很多互動元件都是用這為基礎去設計的。
#2的project有做到自動播放音樂的功能，那時候就在想有沒有方法可以去控制他要不要播放，和播放音量，這次剛好有學到這項功能，撒花🎉🌸
