SwiftUI学习06：定义变量

定义变量

由上一章的案例，我们发现，除了 定价方案的标题不同（连续包月，1个月，12个月），不同定价方案价格不同（￥18、￥30、￥228）、背景颜色不同，其他都一样，我们将这三个属性定义成变量

struct priceView: View {
    // 定义变量
    var title: String?
    var price: String?
    var bgColor: Color?
    
    var body: some View {
        HStack {
            // 连续包月
            VStack {

给变量赋予真正的值

• 将价格视图改成可以传递变量的通用函数

// 价格
struct priceView: View {
    // 定义变量
    var title: String?
    var price: String?
    var bgColor: Color?
    
    var body: some View {
        ZStack {
            VStack(){
                Text(title!)
                    .font(.system(size: 17))
                    .fontWeight(.bold)
                    .foregroundColor(Color(red: 190/255, green: 188/255, blue: 184/255))
                Text(price!)
                    .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))
            
        }
    }
}

此时，你可以传递4个参数，来生成 垂直分布的 视图

• 连续创建三个视图并添加到 水平分布中

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
            // 连续包月
            priceView(title: "连续包月",price: "$18",bgColor: Color("faf7f3"))
            
            // 1个月
            priceView(title: "1个月",price: "$30",bgColor: Color(red: 244/255, green: 244/255, blue: 245/255))
            
            // 12个月
            priceView(title: "12个月",price: "$228",bgColor: Color(red: 244/255, green: 244/255, blue: 245/255))
            
        }
        .padding(10)
    }
}

• 由于连续包月上还有一个首月特惠，所以需要 插入到 叠加分布 中

// 连续包月
ZStack {
    priceView(title: "连续包月",price: "$18",perPrice: "",bgColor: Color("faf7f3"))
    // 首月特惠
    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)
}

• 最后将 首月特惠 提取子视图

// 首月特惠
struct FirstSpecial: View {
    var body: some View {
        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)
    }
}