swiftUIで、ボタンを使用して画面に新しいビューを追加することは可能ですか？

debugcn 投稿 Dev

ヘンリーハドソン

ボタンをタップするたびに、新しいcardViewを表示したいと思います。これがswiftUIで可能かどうか、もしそうなら、どのようなアクションを実行する必要があるのか疑問に思っています。いくつかのパラメーターをcardView構造体に渡すことができればさらに良いでしょうが、どんな助けでも素晴らしいでしょう！


struct ContentView: View {
    var body: some View {
        ZStack {
            VStack {
                TextButton(action: {print("Button tapped")}, text: "new card")
                CardView()
            }
        }
    }
}

struct CardView: View {
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color(#colorLiteral(red: 0.7450980544, green: 0.1568627506, blue: 0.07450980693, alpha: 1)))
                .frame(width: 100, height: 100 * 1.618)
                .cornerRadius(16)
                .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)).opacity(0.1), radius: 1, x: 0, y: 1)
                .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)).opacity(0.2), radius: 10, x: 0, y: 10)

            VStack {
                Text("Card")
                    .font(.system(size: 10) )
                    .foregroundColor(.white)
                    .bold()
            }
        }
    }
}


struct TextButton: View {
    let action: () -> Void
    let text: String

    var body: some View {
        Button(action: action, label: {
            Text(text)
                .padding(.horizontal, 16)
                .padding(.vertical, 16)
                .foregroundColor(.white)
                .background(Color.blue)
                .cornerRadius(.infinity)
                .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)).opacity(0.1), radius: 1, x: 0, y: 1)
                .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)).opacity(0.2), radius: 10, x: 0, y: 10)
        })
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
} ```

新しい開発者

SwiftUIでは、ビューは状態データを反映するため、ビューを直接変更するのではなく、状態データを変更し、状態に基づいてビューを構築します。これはSwiftUIの背後にあるコア原則であり、ビューの懸念をそれを駆動するデータ（一部の用語ではViewModel）から分離することができます。

したがって、のデータモデルがあると仮定しましょうCard（準拠させるIdentifiable-これは後で必要になります）：

struct Card: Identifiable {
  let id = UUID()
  let name: String
}

そして、カードの配列をビューの状態変数として定義しましょう。

@State private var cards: [Card] = [Card(name: "foo")]

次に、ボディはこれらのカードをForEachまたはListビューで表示できます。

var body = some View {
  VStack() {
    Button("Add Card") {
       self.cards.append(Card(name: "I'm an added card"))
    }
    ForEach(cards) { card in
       CardView(for: card) // if your CardView had parameters
    }
  }
}

ボタンを閉じるCardと、cards状態変数に新しいインスタンスが追加されます。それでおしまい。ビューの内容は直接変更されません。ビューは変更を確認し（SwiftUIが舞台裏で行うことです）、それ自体を再レンダリングします。

Card準拠する必要がある理由は、各カードを一意に識別する方法をIdentifiable知らせるためでしたForEach。識別可能に準拠せずに、次のようなキーパスを使用できます。

ForEach(cards, id: \.self) { card in
  // ...
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-04-9

コメントを追加

サインイン

分類Dev

Related 関連記事

記事