买东西太多折扣套路，使用SwiftUI搭建一个折扣计算器App帮你计算吧（上）-CFANZ编程社区

在本章中，你将学会使用SwiftUI搭建一个折扣计算器App。

项目背景

有一次在逛超市的时候，看到货架上陈列了一些打折的商品，看着原价和折扣规则，默默拿出了手机算了算需要多少钱。

可折扣好像奇奇怪怪的，什么两件8.5折，三件7.5折，每次计算都要思考一番。

那时候就在想，有没有专门的折扣计算器可以帮助我们快速计算出最终价格？

如果没有，那就自己做一个吧。

项目搭建

首先，创建一个新的SwiftUI项目，命名为DiscountCalculator。

买东西太多折扣套路，使用SwiftUI搭建一个折扣计算器App帮你计算吧（上）_数据

逻辑分析

折扣计算器的逻辑也比较简单，首先我们输入一个商品的单价，然后根据活动折扣，我们计算出商品最终的单价。

比如，一瓶饮料标准价为5元，折扣活动为买一送一，则我们可以使用5元买2瓶，则该饮料的折扣价为2.5元/瓶。

页面样式

了解了折扣计算器的计算逻辑后，我们来完成页面样式部分。

买东西太多折扣套路，使用SwiftUI搭建一个折扣计算器App帮你计算吧（上）_数组_02

App标题

App标题，我们使用Text文本作为标题样式，示例：

// 标题
func titleView() -> some View {
    HStack {
        Text("折扣计算器")
            .font(.title)
            .fontWeight(.bold)
        Spacer()
    }
}

买东西太多折扣套路，使用SwiftUI搭建一个折扣计算器App帮你计算吧（上）_Swift_03

价格输入

价格输入部分，我们可以使用TextField输入框接收用户输入的价格，首先我们需要声明一个变量存储价格，示例：

@State var priceStr = ""

然后使用TextField输入框构建样式部分，示例：

// 价格输入
func priceInput() -> some View {
    TextField("0.00", text: $priceStr)
        .textFieldStyle(RoundedBorderTextFieldStyle())
        .font(Font.system(size: 30))
        .disableAutocorrection(true)
        .keyboardType(.numberPad)
        .multilineTextAlignment(.trailing)
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 60)
}

买东西太多折扣套路，使用SwiftUI搭建一个折扣计算器App帮你计算吧（上）_SwiftUI_04

上述代码中，我们构建了一个priceInput价格输入视图。

我们使用TextField构建样式部分，输入内容绑定priceStr。输入框的样式为RoundedBorderTextFieldStyle圆角输入框，输入字号为30，禁用自动更正，键盘类型为numberPad数字键盘，文字对齐为trailing右对齐，最后设置了输入框的尺寸。

结果输出

输出结果部分，我们可以直接使用Text来展示结果，我们首先要声明一个变量来存储结果，示例：

@State var finalPrice = "0.00"

然后构建样式部分，示例：

// 最终价格输出
func priceOutput() -> some View {
    Text("折扣价：" + finalPrice)
        .font(.system(size: 23))
}

买东西太多折扣套路，使用SwiftUI搭建一个折扣计算器App帮你计算吧（上）_数据_05

折扣活动

然后是折扣活动，这里我们可以声明一个数组来存放所有的活动，示例：

@State var discountType = ["买一送一","买三送一","第二瓶半价","加一元多一件"]

另外还需要声明一个变量来存储最终的折扣，示例：

@State var finalDiscount = ""

然后遍历折扣活动供用户选择，示例：

// 折扣活动
func discountEvent() -> some View {
    VStack(spacing: 10) {
        ForEach(discountType.indices, id: \.self) { item in
            Text(discountType[item])
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 40)
                .background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
                .foregroundColor(.white)
                .cornerRadius(4)
                .onTapGesture {
                    finalDiscount = discountType[item]

买东西太多折扣套路，使用SwiftUI搭建一个折扣计算器App帮你计算吧（上）_Swift_06

上述代码中，我们构建了一个discountEvent折扣活动视图。

我们使用VStack纵向排布的方式，使用ForEach循环遍历discountType数组中的数据，并通过Text文字根据下标索引item的方式将数组中的数据一一展示出来。

当我们点击折扣时，将点击的折扣活动赋值给finalDiscount。

视图布局

在ContentView视图部分，我们将创建好的元素进行布局，示例：

var body: some View {
    VStack {
        titleView()
        priceInput()
        priceOutput()
        Spacer()
        discountEvent()
        Spacer()
    }.padding()
}

至此，页面样式部分我们就完成了。