昨天學了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)})

做兩組以上

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

總結

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

明天要學切換分頁！