iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Mobile Development

程式初學就來點swift吧!教你掌握整個蘋果生態圈!系列 第 18

Day 18 - SwiftUI開發學習2(Toggle切換)

昨天我們學完了按鈕,我們今天來學切換按鈕。

正文

沒錯這這個Toogle就長得跟設定裡面看到的一模模一樣樣,這邊我們就是寫這個。

使用方法

我們先在structure底下添加一個新的變量

這邊將isSwitchOn 設定為true,這樣待會才能使用我們的toggle。

如果你希望打開App預設為關閉,那我們這邊就把它設成false。

接著在下方寫以下這段

Toggle("switch", isOn: $isSwitchOn)
    .labelsHidden()
    .padding()

這樣就可以讓開關動起來了!

顯示文字

接下來我們將文字天加上去。(並且請放在toggle 之上)

Text(isSwitchOn ?"好帥":"不帥")
    .font(.largeTitle)

這邊翻譯一下意思

Text(isSwitchOn ? true: false)
    .font(.largeTitle)

冒號左邊為true的時候;相反,冒號右邊為false。

加上圖片

我們這邊一樣使用內建的圖片庫

先上code:

Image(systemName: "person.fill")
    .font(.system(size: 100))
    .foregroundColor(isSwitchOn ? Color("pppink"):.purple )

這邊用foregroundColor 做切換顏色,一樣使用isSwitchOn做判斷。並且我們一樣可以用之前設好的顏色。

設定兩組以上

我們先直接看看直接設定兩組會發生什麼事情。

上下兩組會一起同步。

為了解決這個問題,我們這邊再設定一組SwitchOn就可以把它解決了。

總結

今天學了toggle,我記得我一開始學的時候不知道為何它動不了,後來爬了網路才發現,原來他必須設一個布林值的變量。


上一篇
Day 17 - SwiftUI開發學習1(按鈕)
下一篇
Day 19 - SwiftUI開發學習3(Stack 、 Scroll View、Stepper)
系列文
程式初學就來點swift吧!教你掌握整個蘋果生態圈!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言