买东西太多折扣套路,使用SwiftUI搭建一个折扣计算器App帮你计算吧(上)

简介: 买东西太多折扣套路,使用SwiftUI搭建一个折扣计算器App帮你计算吧(上)

买东西太多折扣套路,使用SwiftUI搭建一个折扣计算器App帮你计算吧(上)


项目背景

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

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

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

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

项目搭建

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

image.png

逻辑分析

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

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

页面样式

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

image.png

App标题

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

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

image.png

价格输入

价格输入部分,我们可以使用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)
}

image.png

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

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

结果输出

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

@State var finalPrice = "0.00"

然后构建样式部分,示例:

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

image.png

折扣活动

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

@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]
            }
        }
    }
}

image.png

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

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

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

视图布局

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

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

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

样式展示

image.png

未完待续

恭喜你,完成了折扣计算器的页面样式!

下一章中,我们将继续完成折扣计算机App的逻辑计算部分的内容。

快来动手试试吧。


相关文章
|
iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)(3)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)
186 0
|
前端开发 数据处理 iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)(2)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)
106 0
|
iOS开发 Kotlin 容器
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)(1)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(五)
149 0
|
存储 缓存 前端开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(四)(2)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(四)
150 0
|
前端开发 Swift iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(四)(1)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(四)
246 0
|
存储 PHP Swift
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)(2)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)
187 0
|
前端开发 iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)(1)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)
187 0
|
iOS开发 开发者 容器
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(二)(2)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(二)
160 0
|
iOS开发
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(二)(1)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(二)
156 0
|
Swift iOS开发 容器
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(一)(3)
实战编程·使用SwiftUI从0到1完成一款iOS笔记App(一)
189 0

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 4
    【Azure Function】Function App门户上的Test/Run返回错误:Failed to fetch
    31
  • 5
    陪玩APP推送配置:陪玩系统手机锁屏收不到推送?可能是这些原因!解决方案来了!
    34
  • 6
    小游戏源码开发之可跨app软件对接是如何设计和开发的
    33
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    135
  • 8
    PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
    60
  • 9
    语音app系统软件源码开发搭建新手启蒙篇
    44
  • 10
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    884