携手创作，一起成长！这是我参与「日新计划 8 月更文应战」的第8天，点击查看活动概况。
在本章中，你将学会运用SwiftUI建立一个扣头计算器App。
项目背景
有一次在逛超市的时候，看到货架上陈列了一些打折的商品，看着原价和扣头规则，默默拿出了手机算了算需求多少钱。
可扣头如同奇奇怪怪的，什么两件8.5折，三件7.5折，每次计算都要思考一番。
那时候就在想，有没有专门的扣头计算器能够帮助咱们快速计算出终究价格？
假如没有，那就自己做一个吧。
项目建立
首要，创建一个新的SwiftUI项目，命名为DiscountCalculator。
逻辑分析
扣头计算器的逻辑也比较简单，首要咱们输入一个商品的单价，然后依据活动扣头，咱们计算出商品终究的单价。
比方，一瓶饮料标准价为5元，扣头活动为买一送一，则咱们能够运用5元买2瓶，则该饮料的扣头价为2.5元/瓶。
页面款式
了解了扣头计算器的计算逻辑后，咱们来完结页面款式部分。
App标题
App标题，咱们运用Text文本作为标题款式，示例：
// 标题
func titleView() -> some View {
HStack {
Text("扣头计算器")
.font(.title)
.fontWeight(.bold)
Spacer()
}
}
价格输入
价格输入部分，咱们能够运用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)
}
上述代码中，咱们构建了一个priceInput价格输入视图。
咱们运用TextField构建款式部分，输入内容绑定priceStr。输入框的款式为RoundedBorderTextFieldStyle圆角输入框，输入字号为30，禁用自动更正，键盘类型为numberPad数字键盘，文字对齐为trailing右对齐，最终设置了输入框的尺寸。
成果输出
输出成果部分，咱们能够直接运用Text来展现成果，咱们首要要声明一个变量来存储成果，示例：
@State var finalPrice = "0.00"
然后构建款式部分，示例：
// 终究价格输出
func priceOutput() -> some View {
Text("扣头价：" + finalPrice)
.font(.system(size: 23))
}
扣头活动
然后是扣头活动，这里咱们能够声明一个数组来寄存所有的活动，示例：
@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]
}
}
}
}
上述代码中，咱们构建了一个discountEvent扣头活动视图。
咱们运用VStack纵向排布的方法，运用ForEach循环遍历discountType数组中的数据，并经过Text文字依据下标索引item的方法将数组中的数据逐个展现出来。
当咱们点击扣头时，将点击的扣头活动赋值给finalDiscount。
视图布局
在ContentView视图部分，咱们将创建好的元素进行布局，示例：
var body: some View {
VStack {
titleView()
priceInput()
priceOutput()
Spacer()
discountEvent()
Spacer()
}.padding()
}
至此，页面款式部分咱们就完结了。
款式展现
未完待续
恭喜你，完结了扣头计算器的页面款式！
下一章中，咱们将继续完结扣头计算机App的逻辑计算部分的内容。
快来动手试试吧。
假如本专栏对你有帮助，不妨点赞、评论、关注～
