iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Mobile Development

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

Day 19 - SwiftUI開發學習3(Stack 、 Scroll View、Stepper)

昨天學了toggle,今天學stack以及如何做切換頁面。

正文

stack

stack用來排版用的,其實前面都有用到,只不過沒有拿出來講。

  • VStack:垂直排版
  • HStack:水平排版

一樣都是使用{}去把它包起來。

不囉唆,先上code:

struct ContentView: View {
    @State private var isSwitchOn = true
    @State private var isSwitchOn2 = true
    var body: some View {
        VStack {
            Text("按底下按鈕直接變瘦子")
                .padding()
            HStack {
            Button(action: {
            }) {
                Text("我超帥按鈕")
                    .fontWeight(.bold)
                    .font(.system(size: 25))
                    .padding()
                    .background(Color.green)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .padding(10)
            }
            Button(action: {
            }) {
                Text("我不帥按鈕")
                    .fontWeight(.bold)
                    .font(.system(size: 25))
                    .padding()
                    .background(Color.red)
                    .cornerRadius(40)
                    .foregroundColor(.white)
                    .padding(10)
            
            }
            }
            Button(action: {
            }) {
                HStack {
                    Image(systemName: "person.fill.checkmark")
                        .font(.title3)
                    Text("帥起來!")
                        .fontWeight(.semibold)
                        .font(.title)
                }
                .padding()
                .foregroundColor(.black)
                .background(Color("pppink"))
                .cornerRadius(40)
            }
            HStack {
            VStack {
            Image(systemName: "person.fill")
                .font(.system(size: 50))
                .foregroundColor(isSwitchOn ? Color("pppink"):.purple )
                
            Text(isSwitchOn ?"好帥":"不帥")
                .font(.largeTitle)
            Toggle("switch", isOn: $isSwitchOn)
                .labelsHidden()
                .padding()
            }
            VStack {
            Image(systemName: "person.fill")
                .font(.system(size: 50))
                .foregroundColor(isSwitchOn2 ? Color("pppink"):.purple )
                
            Text(isSwitchOn2 ?"好帥":"不帥")
                .font(.largeTitle)
            Toggle("switch", isOn: $isSwitchOn2)
                .labelsHidden()
                .padding()
            }
            }
        }
    }
}

上面的我超帥按鈕以及我不帥按鈕先用HStack包起來就可以了。

但最下面那一排就稍微麻煩一點,要先將三個物件(圖片、文字、toggle)用VStack包起來,再將兩組使用HStack包起來。

ScrollView

我們之前所寫的程式都是單頁,但我們看到市面上大部分的程式都是滑動頁面。

ScrollView寫法很簡單,請參照以下寫法。

ScrollView {
	content
}

使用ScrollView的效果就是以下:

可以去做滑動。

那我們這邊複製好幾次上面的物件試看看。

完全正常滑動。

Stepper

今天的最後我們就學一下Stepper吧!

Stepper的中文是步進器,主要用於數字的部分,加號減號組成。

首先我們必須我們添加浮點數類型的變數。

@State var sum: Double = 0

一樣放在structure底下。

再來我們在底下使用Stepper。

Stepper(onIncrement: {
                self.sum += 1
            },onDecrement:{
                self.sum -= 1
            }, label:{ Text("sum:\(Int(sum))")
                .multilineTextAlignment(.center)
                .padding(.horizontal, 100.0)})

做兩組以上

一樣必須設兩個變量,否則會互相干擾。

總結

今天學會了很多,但真的有一點點雜,建議各位多練習,大家晚安!

明天要學切換分頁!


上一篇
Day 18 - SwiftUI開發學習2(Toggle切換)
下一篇
Day 20 - SwiftUI開發學習4(切換分頁)
系列文
程式初學就來點swift吧!教你掌握整個蘋果生態圈!30

尚未有邦友留言

立即登入留言