SwiftUIでいこう！ - QRコードアプリ - 2

起動画面はContentViewなので表示画面にボタンを作りそれを押せばQRコードを作成するようにします。

必要な部品としては

表題
QRコードを作成する文字入力欄
作成ボタン
QRコード表示場所

これを作っていきます。単純に並べていきます。

Text("QRコード")
TextField("作成した文字を入力ください",text:$text)
Button {
　isShowingQRCode.toggle()
　} label: {
　　Text("QRコード作成")
　}
if isShowingQRCode{
　　QRView(text: text)
}

ボタンを押して表示させる仕組みとしては

変数"isShowingQRCode"を作りこれを真偽値としてtrue、真の場合に画面に表示させます。

作成するQRコードの文字列も変数"text"に入れて別で定義しているQRView()にデータを渡します。

渡されたデータは画像が作られて表示される仕組みです。

大事なところでは変数を作るときにリアルタイムに更新できるように

@Stateをつけることが必要です。なので

 @State var text = ""
 @State var isShowingQRCode = false

となります。これで更新を検知して即時に反映されるようになります。

@をつけて宣言すSwiftUIで採用されたプロパティラッパーと呼ばれるものです。まとめると。

import SwiftUI

struct ContentView: View {
    @State var text = ""
    @State var isShowingQRCode = false
    
    var body: some View {
        VStack {
            Text("QRコード")
            TextField("作成した文字を入力ください",text:$text)
            Button {
                isShowingQRCode.toggle()
              } label: {
               Text("QRコード作成")
              }
            if isShowingQRCode{
                QRView(text: text)
            }    
        }        
    }
}

実行して、何か入れて（以下の場合は"Q"を入れています）"QRコードを作成"ボタンを押せばQRコードが作成されます。

あとは見た目をカスタムすれば使いやすいアプリとなります。