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

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

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


类型转换

由于我们Text文字部分是String类型的内容,而折扣计算涉及到数值计算,因此我们需要做一个转换的方法,示例:

extension String {
    var toFloat: Float {
        return Float(self) ?? 0
    }
}

上述代码中,我们对String进行拓展,我们声明了一个方法toFloat,可以将String类型转换为Float类型。

折扣计算

折扣计算部分,我们可按照折扣规则,计算出最终的价格finalPrice,示例:

// 计算方法
func calculate() -> String {
    if finalDiscount == "" {
        finalPrice = priceStr
    } else if finalDiscount == "买一送一" {
        finalPrice = String(priceStr.toFloat / 2)
    } else if finalDiscount == "买三送一" {
        finalPrice = String(priceStr.toFloat * 3 / 4)
    } else if finalDiscount == "第二瓶半价" {
        finalPrice = String(priceStr.toFloat * 0.75)
    } else if finalDiscount == "加一元多一件" {
        finalPrice = String((priceStr.toFloat + 1) / 2)
    }
    return finalPrice
}

上述代码中,我们声明了一个方法calculate,返回String类型的值。

finalDiscount折扣为空时,折扣价finalPrice等于priceStr输入的价格,其他规则也是折扣价finalPricepriceStr输入的价格的对应数学公式。

只是由于涉及数值计算,我们将priceStr输入的价格通过toFloat方法转为数值型,计算后再转换为String类型。

折扣计算方法最终return折扣价finalPrice的值。

交互操作

折扣计算方法设置好后,我们可以开始计算了。我们在priceInput视图中,当价格输入值onChange变化时,我们立即更新输出的结果。示例:

// 价格输入
func priceInput() -> some View {
    TextField("0.00", text: $priceStr)
        //隐藏了一些修饰符
        .onChange(of: priceStr) { _ in
            if priceStr != "" {
                finalPrice = calculate()
            } else {
                finalPrice = "0.00"
            }
        }
}

上述代码中,我们在TextField中绑定的priceStr输入值改变时,若priceStr输入值不为空,则将计算方法得出的结果calculate()赋值给finalPrice折扣价。

priceStr输入值为空,则重新赋值finalPrice折扣价为空。

最后,当用户点击折扣价规则时,我们也需要立即计算最终的折扣价,示例:

// 折扣活动
func discountEvent() -> some View {
    VStack(spacing: 10) {
        ForEach(discountType.indices, id: \.self) { item in
            Text(discountType[item])
                //隐藏了一些修饰符
                .onTapGesture {
                    finalDiscount = discountType[item]
                    finalPrice = calculate()
                }
        }
    }
}

隐藏键盘

由于折扣计算机有输入和选择折扣两种操作,当TextField输入时会唤起系统键盘,这样输入完成后可能存在遮挡折扣选择的视图。

我们可以创建一个隐藏键盘的方法,示例:

extension View {
    func hideKeyboard() {
        UIApplication.shared.sendAction(
            #selector(UIResponder.resignFirstResponder),
            to: nil,
            from: nil,
            for: nil
        )
    }
}

然后在ContentView视图中,当整个视图被点击时调用隐藏键盘的方法。示例:

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

就此,我们就完成了整个项目的样式和逻辑。

项目展示

恭喜你,完成了整个项目的全部内容!

快来动手试试吧。


相关文章
|
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