返回

AA餐费计算器的分段式Picker实现

IOS

食客AA制分摊餐费是人们聚餐时常遇到的场景。在SwiftUI中实现一个AA餐费计算器时,我们可以巧妙地使用分段式Picker来优雅地呈现分摊选项。

在本文的第三部分中,我们将深入探讨如何将分段式Picker集成到我们的AA餐费计算器中,使之更加简洁易用。

分段式Picker的优势

分段式Picker因其水平排列的选项而得名,与传统的垂直滚轮式Picker相比,它具有以下优势:

  • 节省空间: 水平布局可以最大限度地利用屏幕空间,特别适合选项数量较少的场景。
  • 简洁直观: 选项并排展示,用户可以快速扫视并选择所需的选项。
  • 操作便捷: 分段式Picker可以通过简单的轻触来切换选项,操作非常方便。

集成分段式Picker

在我们的AA餐费计算器中,我们将为分摊方式添加一个分段式Picker:

import SwiftUI

struct AAExpenseCalculator: View {
  @State private var billAmount: Double = 0.0
  @State private var numberOfPeople: Int = 2
  @State private var splitType: SplitType = .equally

  enum SplitType: String, CaseIterable, Identifiable {
    case equally = "Equally"
    case percentage = "Percentage"
  }

  var body: some View {
    Form {
      Section {
        TextField("Bill Amount", value: $billAmount, formatter: NumberFormatter.currency)
        Picker("Number of People", selection: $numberOfPeople) {
          ForEach(2..<10) {
            Text("\($0)")
          }
        }
      }

      Section {
        Picker("Split Type", selection: $splitType) {
          ForEach(SplitType.allCases, id: \.self) {
            Text($0.rawValue)
          }
        }
        .pickerStyle(.segmented)
      }
    }
  }
}