SwiftUI程序分摊费用WeSplit(二)

WeSplit(二)
加入第二个picker,这次选择Picker的风格为segmented风格，这样区别于之前人数选择的Picer，在Form内再增加一个Section

Section {
                    Picker("Tip percentage", selection: $tipPercentage) {
                        ForEach(0 ..< tipPercentages.count) {
                            Text("\(self.tipPercentages[$0])%")
                        }
                    }.pickerStyle(SegmentedPickerStyle())
                }

Picer提供所有的可供选择的小费比例，并将比列所在数组位置放入tipPercentage中.
运行程序
在这里插入图片描述
嗯，消费部分需要添加说明，清晰指出这些百分比是用作什么目的。方法很简单，只需要为Section加入header就可以了

Section(header: Text("小费比例")) {
                    ...
                }

运行程序

在这里插入图片描述

结算
进入最后一步，计算每个人需要支付的金额，然后显示到最后的位置。
首先定义一个变量，用于计算最后每人需要支付的金额，在struct内body之上

var totalPerPerson: Double {
    // 计算内容
    return 0
}

首先计算实际人数，通过picker选择的人数，反馈回numberOfPeople变量后得到的只是其所处的位置信息，即，ForEach是从2到100遍历的，所以当用户选择 “2”的时候，numberOfPeople的值其实为0，类似于数组的第一个位置。所以计算实际人数时，需要

let peopleCount = Double(numberOfPeople + 2)

同理计算小费比例

let tipSelection = Double(tipPercentages[tipPercentage])

将checkAmount从字符串转换为Double型的数据

let orderAmount = Double(checkAmount) ?? 0

?? 是swift比较常见的使用方式，如果转换成功则直接使用否则赋值0
最后计算

var totalPerPerson: Double {
    let peopleCount = Double(numberOfPeople + 2)
    let tipSelection = Double(tipPercentages[tipPercentage])
    let orderAmount = Double(checkAmount) ?? 0

    let tipValue = orderAmount / 100 * tipSelection
    let grandTotal = orderAmount + tipValue
    let amountPerPerson = grandTotal / peopleCount

    return amountPerPerson
}

最后提示一下，仅在非@State类型变量下，可以如此定义，如果是@State变量，则不能在定义时通过闭包完成计算，在SwiftUI2.0的时候增加了Onchange功能，可以用于部分替代此功能。
然后修改最后的显示
把

 Section {
                    Text("$\(checkAmount)")
                }

替换为

 Section {
                    Text("$\(checkAmount)")
                }

在这里插入图片描述
显示2位小数即可，所以修改显示部分

Text("$\(totalPerPerson, specifier: "%.2f")")

在这里插入图片描述
完成！！
使用SwiftUI真的很简单。

SwiftUI程序分摊费用WeSplit(二)

猜你喜欢