商品の購入数をStepper()のカウントアップ／カウントダウンで変更し、代金を計算するサンプルを作ってみました。
Stepper()を使ったサンプルの機能
基本の機能はこんな感じです。
・Stepper 【+】ボタンでカウントアップ、【-】ボタンでカウントダウン
・例1のチケットでは1回タップで1カウントアップ／カウントダウン
・例2のお布施では1回タップで500カウントアップ／カウントダウン
・カウントアップ／カウントダウンで上限値／下限値を超えてはいけない
・チケット代とお布施代を合わせた料金（税込）を表示する
完成イメージがこうなります。
サンプルコード
変数と定数の宣言
4-8行で変数と定数の宣言をしています。
お布施の口数の変数が定義されていませんね。お布施の口数を必要としているところは32行目のお布施Stepperのカウント値のところですが、「お布施料金/500」で計算して口数としています。
1つずつカウントアップ／カウントダウン
14-18行でチケット枚数が1枚ずつカウントアップ／カウントダウンする処理が書かれています。
Stepperの基本的な使い方はこちら。
Stepper(value: $変数, 範囲指定) {
ラベル指定
}
サンプルでは、「Stepper(value: $ticketNum, in: 0…4)」に値を保持する変数(チケット数)と値の範囲(1〜4)を指定してます。
任意の数ずつカウントアップ／カウントダウン (onIncrement/onDecrement)
22-35行にお布施料金が500ずつカウントアップ／カウントダウンするステッパー処理が書かれています。
こういう時は、onIncrement/onDecrement オプションを使ってStepperの処理をカスタマイズします。【＋】ボタンをタップした時の処理をonIncrementに、【ー】ボタンをタップした時の処理をonDecrementに記載します。
import SwiftUI
struct ContentView: View {
@State var ticketNum:Int = 0 //チケット数
@State var tip:Int = 0 //お布施合計料金
let ticketPrc = 3000 //チケット料金
let tipPrc = 500 //お布施1口料金
let tax = 0.1 //税率
var body: some View {
VStack{
Text("チケット1枚: \(self.ticketPrc)円")
Text("（お一人様4枚まで）")
Stepper(value: $ticketNum, in: 0...4) { //Stepper1
Text("\(self.ticketNum) 枚")
}
.frame(width:150)
.padding(.bottom, 20.0)
Text("お布施1口: \(self.tipPrc)円")
Text("（お一人様10口まで）")
Stepper( //Stepper2
onIncrement: {
self.tip += 500 //+ボタンで500カウントアップ
self.tip = min(self.tip, 5000) //最大値設定
},
onDecrement: {
self.tip -= 500 //-ボタンで500カウントダウン
self.tip = max(self.tip, 0) //最小値設定
},
label: {
Text("\(self.tip/500) 口")
})
.frame(width:150)
.padding(.bottom, 30.0)
Text("料金(税金込み): \(calc(self.ticketNum, self.tip)) 円") //料金の表示。calcファンクションを呼び出している
.underline()
.font( .title2)
}
}
//合計金額の計算 36行目でこのcalcファンクションが呼び出されています
func calc(_ num1:Int, _ num2:Int) -> Int { //36行目で指定されたように、num1にチケット数、num2にお布施の合計料金が入る
let price = self.ticketPrc * num1 + num2 //price = チケット1枚料金 x チケット枚数 + お布施合計料金
let result = Double(price) * (1 + self.tax) //result = price x 1.1（税込料金の計算）
return Int(result)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
コメント