SwiftUI100天：使用SwiftUI搭建一个单位转换App

携手创造，共同生长！这是我参与「日新方案 8 月更文应战」的第1天，点击查看活动详情。

在本章中，你将学会运用SwiftUI建立一个单位转化App。

前言

为了愈加熟悉和了解SwiftUI，本系列将从实战视点出发完结100个SwiftUI项目，便利大家更好地学习和掌握SwiftUI。

这一起也是对自己学习SwiftUI过程的知识收拾。

如有错误，以你为准。

项目建立

首要，创建一个新的SwiftUI项目，命名为UnitConversion。

逻辑分析

款式部分咱们的思路很简略，咱们输入一个数字，它能够是时、分、秒，然后体系会主动输出转化后的成果。

当然，为了让App愈加灵敏，咱们能够设置输入的数字的单位，也能够指定输出内容的单位。

页面款式

App标题

标题部分，咱们运用Text文字作为标题，当然咱们也能够运用Navigation的方法，示例：

// 标题
func titleView() -> some View {
HStack {
Text("时分秒转化")
.font(.title)
.fontWeight(.bold)
Spacer()
}
}

单位转化菜单

为了让单位转化愈加灵敏，咱们需要构建了一个转化菜单，供用户自定义转化单位。

首要先声明转化菜单的默认值，示例：

@State var beforeMenu: String = "时"
@State var afterMenu: String = "秒"

然后能够运用Menu菜单构建转化菜单的款式，示例：

// 输入值类型
func beforeMenuView() -> some View {
Menu {
Button("时") { self.beforeMenu = "时" }
Button("分") { self.beforeMenu = "分" }
Button("秒") { self.beforeMenu = "秒" }
} label: {
Label(beforeMenu, systemImage: "chevron.down")
.foregroundColor(.gray)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 10, maxHeight: 60)
.background(Color(.systemGray6))
.cornerRadius(8)
}
}
// 输出值类型
func afterMenuView() -> some View {
Menu {
Button("时") { self.afterMenu = "时" }
Button("分") { self.afterMenu = "分" }
Button("秒") { self.afterMenu = "秒" }
} label: {
Label(afterMenu, systemImage: "chevron.down")
.foregroundColor(.gray)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 10, maxHeight: 60)
.background(Color(.systemGray6))
.cornerRadius(8)
}
}

上述代码中，咱们运用Menu构建了2个菜单，转化前菜单默以为“时”，转化后菜单默以为“秒”，而当咱们点击菜单时，后从头给beforeMenu、afterMenu赋值，就能够达到单位菜单切换的作用。

其他款式部分咱们就很简略，运用体系自带的Image图标，做一个点击下拉的款式。整体交互如下：

数值输入框

数值输入部分，咱们也需要提早声明两个变量存储转化前和转化后的值，示例：

@State var beforeText: String = ""
@State var afterText: String = "0"

别的为了展现作用，在数值输入前，咱们能够声明一个变量来改变是否展现转化成果，示例：

@State var showResult: Bool = false

然后是数值输入的款式，咱们运用TextField作为输入框，接收用户输入的数值内容，示例：

// 输入输出值
func numberView() -> some View {
HStack(spacing: 20) {
TextField("请输入", text: $beforeText)
.keyboardType(.decimalPad)
.foregroundColor(.black)
.font(.system(size: 17))
.padding()
Spacer()
if showResult {
Text("="+afterText+afterMenu)
.foregroundColor(.black)
.font(.system(size: 14))
.padding()
}
}
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 10, maxHeight: 120)
.background(Color(.systemGray6))
.cornerRadius(8)
}

上述代码中，咱们运用TextField作为数值输入框，然后接收到的输入内容绑定到beforeText参数，然后给TextField设置修饰符，键盘默以为数字键盘。

关于转化后成果部分，咱们在showResult为True时展现，内容绑定afterText。

整体款式布局

var body: some View {
VStack(spacing: 20) {
titleView()
HStack {
beforeMenuView()
afterMenuView()
}
numberView()
Spacer()
}.padding(.horizontal)
}

至此，款式部分咱们就完结了。

核算方法

下面，咱们来完结核算部分，核算部分也比较简略，咱们知道时、分、秒的转化都是60的倍数，咱们用最简略的逻辑书写公式，示例：

// 核算方法
func calculateMethod() {
if beforeMenu == "时" && afterMenu == "分" {
afterText = String((Double(beforeText) ?? 0) * 60)
} else if beforeMenu == "时" && afterMenu == "秒" {
afterText = String((Double(beforeText) ?? 0) * 3600)
} else if beforeMenu == "分" && afterMenu == "秒" {
afterText = String((Double(beforeText) ?? 0) * 60)
} else if beforeMenu == "分" && afterMenu == "时" {
afterText = String((Double(beforeText) ?? 0) / 60)
} else if beforeMenu == "秒" && afterMenu == "分" {
afterText = String((Double(beforeText) ?? 0) / 60)
} else if beforeMenu == "秒" && afterMenu == "时" {
afterText = String((Double(beforeText) ?? 0) / 3600)
} else {
afterText = beforeText
}
}

然后将核算方法运用在咱们输入值改变时，调用咱们核算的方法，示例：

.onChange(of: beforeText) { _ in
 if beforeText != "" {
  self.showResult = true
  calculateMethod()
 } else {
  self.showResult = false
 }
}

完结后，咱们预览下项目成果。

项目预览

不错不错！

如果本专栏对你有帮助，不妨点赞、评论、重视～