SwiftUI学习04：VStack,HStack,ZStack视图排列使用

前言

在一个页面中，经常会看到许多UI控件，在不同的位置摆放，在 SwiftUI 中分为：

• VStack垂直摆放
• HStack水平摆放
• ZStack掩盖摆放

三种摆放图示

创建一个新工程Stack，了解不同分布

• 垂直分布

// 垂直分布
VStack(alignment: .center){ // 居中对齐
    
    Text("View1")
        .font(.system(size: 20))
        .foregroundColor(.blue)
        .frame(width: 300, height: 100, alignment: .center)
        .background(Color.green)
        .padding(10)
    
    
    Text("View2")
        .font(.system(size: 20))
        .foregroundColor(.blue)
        .frame(width: 300, height: 100, alignment: .center)
        .background(Color.green)
        .padding(10)
    
    Text("View3")
        .font(.system(size: 20))
        .foregroundColor(.blue)
        .frame(width: 300, height: 100, alignment: .center)
        .background(Color.green)
        .padding(10)
}

预览视图如下：

• 水平分布

同理

• 覆盖分布

同理

写一个简单的案列

案列图

代码：

struct ContentView: View {
    var body: some View {
        // 定价方案
        HStack {
            // 连续包月
            VStack {
                ZStack {
                    VStack(){
                        Text("连续包月")
                            .font(.system(size: 17))
                            .fontWeight(.bold)
                            .foregroundColor(Color(red: 190/255, green: 188/255, blue: 184/255))
             
                        Text("¥18")
                            .fontWeight(.bold)
                            .font(.system(size: 30))
                            .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
                    }
                    // 最大宽度自适应
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)
                    .padding(20)
                    .background(Color("faf7f3"))
                    .cornerRadius(4)
                    .overlay( // 覆盖
                        RoundedRectangle(cornerRadius: 4).stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255),lineWidth: 2))
                    
                    // 首月特惠
                    Text("首月特惠")
                        .font(.system(size: 14))
                        .fontWeight(.bold)
                        .foregroundColor(.white)
                        .background(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255))
                        .cornerRadius(4)
                        .padding(10)
                        .offset(x:0,y:-65)
                }
            }
            //1个月
            VStack {
                Text("1个月")
                    .fontWeight(.bold)
                    .font(.system(size: 17))
                    .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
                Text("¥30")
                    .fontWeight(.bold)
                    .font(.system(size: 30))
                    .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
                }
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)
                .padding(20)
                .background(Color(red: 244 / 255, green: 244 / 255, blue: 245 / 255))
                .cornerRadius(10)
            
                // 12个月
                VStack(){
                    Text("12个月")
                        .font(.system(size: 17))
                        .fontWeight(.bold)
                        .foregroundColor(Color(red: 190/255, green: 188/255, blue: 184/255))
                    Text("¥288")
                        .fontWeight(.bold)
                        .font(.system(size: 30))
                        .foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
                    Text("¥19.00/月")
                                .fontWeight(.bold)
                                .font(.system(size: 17))
                                .foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
                    
                }
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)
                .padding(20)
                .background(Color(red: 244 / 255, green: 244 / 255, blue: 245 / 255))
                .cornerRadius(10)
        }
        .padding(10)
    }
}

• .padding ： 设置边距

• command + VStack/HStack/ZStack 可以在最外层嵌入 分布

Embed in VStack：嵌入水平分布

• 要调整位置，我们可以使用 .offset 修饰符，设置偏移量

X，Y分别对应坐标轴位置，X轴正数为右移，负数为左移，Y轴正数下移，负数上移。

• .frame(minWidth: 0, maxWidth: .infinity, minHeight: 90)

最小宽度0，.infinity 最大宽度自适应

• swiftUI 修饰符有顺序，先切圆角，再加边框

.overlay(RoundedRectangle(cornerRadius: 6).stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255),lineWidth: 2))

RoundedRectangle()：圆角矩形
stroke：描边
lineWidth：线宽
cornerRadius：圆角度数

导入色彩的办法

点击Assets，在底部点击“+”按钮，挑选 New Color Set，选择 Show Color Panel