文章摘要
GPT 4
此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结

说在前面

上一篇我们还是简单写了几个散的demo，从今天起开始慢慢写完整的小demo，而今天要写一个单位转换的小组件。

单位转换小组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import SwiftUI

struct ContentView: View {
    @State private var input = 100.0
    @State private var inputUnit = "米"
    @State private var outputUnit = "千米"
    
    @FocusState private var inputIsFocused :Bool
    
    let units: [String] = ["米","千米","公里","寸"]
    
    var result: String {
        let inputmultiplier: Double
        let outputmultiplier: Double
        
        switch inputUnit{
            case "千米":
            inputmultiplier = 1000.0
            case "公里":
            inputmultiplier = 1000.0
            case "寸":
            inputmultiplier = 0.0333
            default:
            inputmultiplier = 1.0
        }
        
        switch outputUnit{
            case "千米":
            outputmultiplier = 0.001
            case "公里":
            outputmultiplier = 0.001
            case "寸":
            outputmultiplier = 30.0
            default:
            outputmultiplier = 1.0
        }
    
        let inputInMeter = input * inputmultiplier
        let output = inputInMeter * outputmultiplier
        let outputString = output.formatted()
        return "\(outputString)\(outputUnit)"
    }
    
    
    var body: some View {
        NavigationStack{
            Form{
                Section("输入你要转换的值"){
                    TextField("输入值",value: $input,format:.number)
                        .keyboardType(.decimalPad)
                        .focused($inputIsFocused)
                }
                Picker("选择你的单位",selection: $inputUnit){
                    ForEach(units,id:\.self){
                        Text($0)
                    }
                }
                Picker("选择你想转换的单位",selection: $outputUnit){
                    ForEach(units,id:\.self){
                        Text($0)
                    }
                }
                Section("结果"){
                    Text(result)
                }
            }
        }
        .navigationTitle("转换器")
        .toolbar{
            if inputIsFocused{
                Button("完成"){
                    inputIsFocused = false
                }
            }
        }
    }
}

实现效果图

转换器示例-米转千米
转换器示例-米转寸
转换器示例-千米转米

知识点

@State 、Picker 这些知识点我们上次说过了，这次只考虑新的：

  • TextField 输入框：允许用户输入数值。
  • 格式化：使用 formatted() 方法对计算结果进行格式化，以得到更友好的显示格式。
  • 函数计算属性：定义了 result 计算属性，根据当前状态计算并返回转换后的结果字符串。

启动遇到的问题

首先是要在模拟器中点击 textField 才可以吊起软键盘，但第一次执行的时候仍然发现不行。

如何开启软键盘
方法一：

在模拟器菜单“I/O”—“keyboard”—“Toggle Software Keyboard”，点击即可吊起软键盘。

方法二：

在模拟器菜单“I/O”—“keyboard”—“Connect Hardware Keyboard”，去掉勾选，但缺点就是用不了外接键盘了，默认用软键盘。

不同版本的Xcode可能开关位置不一样。

软键盘开启后的样子

说在后面

我们会发现代码中很多复杂的逻辑，能优化吗？答案是肯定的，我们会在下一篇尝试用另一种方式实现上面的功能。