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

做两组以上

一样必须设两个变量，否则会互相干扰。

总结

今天学会了很多，但真的有一点点杂，建议各位多练习，大家晚安！

明天要学切换分页！