百日学Swift（17日目） –プロジェクト1、パート2（プロジェクト1：パート2）
アプリケーションは、以前に学んだ
Form、@State、Pickerなど
テキストフィールドを有するユーザ1からの読み取りテキスト（入力テキストを使用して、テキストフィールド）
struct ContentView: View {
@State private var checkAmount = "" // 消费金额，使用字符型是因为等下要输入的是字符
@State private var numberOfPeople = 2 // 人数，默认为 2
@State private var tipPercentageIndex = 2 // 取值为 tipPercentages 数组的下标，默认为 2
let tipPercentages = [5,10,15,20,0] // 小费百分率数组：可能的小费比率
var body: some View {
Form {
Section {
TextField("消费金额：", text: $checkAmount) // 输入消费金额
.keyboardType(.decimalPad)
}
Section {
Text("￥\(checkAmount)") // 显示消费金额
}
}
}
}
テキスト入力ボックスに数値を入力すると、下のテキストボックスに表示されます。これは、checkAmountが@Stateでマークされた状態属性であるためです。
パラメータを使用して、入力に使用するキーボードの外観を指定します。一般的なパラメータは次のとおりです。
| シリアル番号 | パラメータ | 説明文 |
|---|---|---|
| 1 | 。デフォルト | デフォルトのキーボード |
| 2 | .numberPad | 純粋な数字キーボード、0〜9 |
| ３ | .phonePad | ダイヤルアップ0-9キーボード、*、、# |
| 4 | .decimalPad | 小数点キーボード、数字キーボードおよび小数点付き |
| 5 | 。電子メールアドレス | スペースキーボード@. |
| 6 | .URL | キーボード/..com |
- UIを設計するときは、キーボードの指定を検討することをお勧めします。これにより、不要なコンテンツの入力を回避でき、ユーザーエクスペリエンスが大幅に向上します。
- キーボードの正しい外観を確認すると、シミュレーターで実行する必要がある場合があります（ショートカットキー⌘R）。ライブプレビューは表示されません。
2.フォームでピッカーを作成する（フォームでピッカーを作成する）
struct ContentView: View {
@State private var checkAmount = ""
@State private var numberOfPeople = 2
@State private var tipPercentageIndex = 2
let tipPercentages = [5,10,15,20,0]
var body: some View {
NavigationView {
Form {
Section {
TextField("消费金额：", text: $checkAmount) // 输入消费金额
.keyboardType(.decimalPad)
Picker("人数", selection: $numberOfPeople) { // 人数选择
ForEach(2..<100) { index in // 从 2 人到 99 人
Text("\(index) 人")
}
}
}
Section {
Text("￥\(checkAmount)") // 显示消费金额
}
}.navigationBarTitle("WeSplit") // 导航栏标题，要加在 Form 上，不能加在 NavigationView 上
}
}
}
ヒント：修飾子.navigationBarTitleを追加NavigationViewする最後を考えるのは簡単ですが、実際にFormは最後に追加する必要があります。その理由は、プログラムがビューナビゲーションに追加のタイトルので、ビューの多くを表示することができますナビゲーションビューを実行していることである内側のタイトルを変更して自由である事がiOSの根系にします。
これはピッカーとピッカー用のようです。人数を選んだら、クリックすると別画面にジャンプし、実は100行…！！アプリがこのような見本紙にされた場合、誰もそれを見ることはありません。Quan Dangは、ある種のピッカーを理解しています。他のフォームは後で見ることができます、少なくともこれより少し賢いです。
3.チップパーセンテージのセグメント化されたコントロールの追加（チップレートのセグメント化されたコントロールの追加）
struct ContentView: View {
@State private var checkAmount = "" // 消费金额
@State private var numberOfPeople = 2 // 人数，默认为 2，实际上是 Picker 中循环的 index 值
@State private var tipPercentageIndex = 2 // 小费百分率数组下标，取值为 tipPercentages 数组的下标，默认为 2
let tipPercentages = [5,10,15,20,0] // 小费百分率数组：可能的小费比率
var body: some View {
NavigationView {
Form {
Section {
TextField("支票金额：", text: $checkAmount) // 输入消费金额
.keyboardType(.decimalPad)
Picker("人数", selection: $numberOfPeople) {
ForEach(2..<100) { index in // 生成多行供选择人数
Text("\(index) 人")
}
}
}
Section(header: Text("支付小费")) { // 节标题
Picker("Tip percentage", selection: $tipPercentageIndex) {
ForEach(0 ..< tipPercentages.count) { index in // 遍历tipPercentages
Text("\(self.tipPercentages[index])%")
}
}
}.pickerStyle(SegmentedPickerStyle()) // 使用分段控件选择百分率
Section {
Text("￥\(checkAmount)")
}
}.navigationBarTitle("WeSplit") // 导航栏标题，要加在 Form 上，不能加在 NavigationView 上
}
}
}
ピッカーのカスタムの外観と相互作用に使用されます。主に次のようなものがあります（公式文書には基本的には記述されていません。叔父は実験後にそれを記述しようとします）。
| シリアル番号 | タイプ | 説明文 |
|---|---|---|
| 1 | DefaultPickerStyle | デフォルト値が表示され、続いて>をクリックして、選択画面に切り替えます。リストには選択内容が表示され、選択されています√ |
| 2 | PopUpButtonPickerStyle | iOSは無効で、Mac OSのみ |
| ３ | RadioGroupPickerStyle | iOSは無効で、Mac OSのみ |
| 4 | SegmentedPickerStyle | セグメント表示、すべての値が灰色の背景バーに一覧表示され、スライダーを選択して値を切り替えます |
| 5 | WheelPickerStyle | ホイールとして表示され、デフォルトではデフォルト値が表示され、値を上下に切り替えることで変更できます |
人4.あたりの計算の合計（小計は、それぞれの人のために計算されます）
これは比較的簡単です。入力変数を計算します。計算の前に型変換を実行することを忘れないでください。変換の型は最終結果に基づいている必要があります。
struct ContentView: View {
@State private var checkAmount = ""
@State private var numberOfPeople = 2
@State private var tipPercentageIndex = 2
let tipPercentages = [5,10,15,20,0]
var tipSelection: Double { return Double(tipPercentages[tipPercentageIndex]) } //小费费率
var orderAmount: Double { return Double(checkAmount) ?? 0} // 消费金额
var tipValue: Double { return orderAmount / 100 * tipSelection } // 小费金额
var grandTotal: Double { return orderAmount + tipValue } // 消费总计 = 消费金额 + 小费金额
var totalPerPerson: Double { return grandTotal / Double(numberOfPeople) } // 人均消费
var body: some View {
NavigationView {
Form {
Section {
TextField("消费金额：", text: $checkAmount)
.keyboardType(.decimalPad)
Picker("人数", selection: $numberOfPeople) {
ForEach(2..<100) { index in
Text("\(index) 人")
}
}
}
Section(header: Text("小费计算")) {
HStack {
Text("费率：")
Picker("Tip percentage", selection: $tipPercentageIndex) {
ForEach(0 ..< tipPercentages.count) { index in
Text("\(self.tipPercentages[index])%")
}
}
}
Text("金额：￥\(orderAmount / 100 * tipSelection, specifier: "%.2f")")
}.pickerStyle(SegmentedPickerStyle())
Section(header: Text("总计")) {
Text("消费总计：￥\(grandTotal, specifier: "%.2f")")
Text("人均消费：￥\(totalPerPerson, specifier: "%.2f")")
}
}.navigationBarTitle("WeSplit")
}
}
}
[補足知識：プレースホルダーのフォーマット ]（Wikipedia）
