SwiftUI：クリック時にボタンを1つだけ折りたたむ方法はありますか？すべてではありません

debugcn 投稿 Dev

イゴール

スクロールビュー内に3つのボタンを追加しました。ユーザーがボタンをクリックしたときに効果を発揮したいのですが、すべてのボタンではなく、そのボタンだけがクリックされるため、非表示の説明はクリックされたボタンにのみ表示されます。

説明のないボタン

説明付きのボタン

そしてコード：

struct WordCells: View {
    @State private var toggleView = false
    var numberOfItems = Int.init()
    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 40.0) {
                ForEach(0..<self.numberOfItems) {item in
                    Button(action: {
                        withAnimation(.easeInOut(duration: 0.5)) {
                            self.toggleView.toggle()
                       }
                   })
                   {
                    VStack {
                       HStack {
                            Text("Button Text")
                                .fontWeight(.bold)
                                .foregroundColor(.black)
                                .font(.callout)

                            Spacer()

                            Text("Description")
                                .fontWeight(.bold)
                                .foregroundColor(.customLabel)
                                .font(.callout)
                            }
                        if self.toggleView {
                            HiddenDescriptionView()
                        }
                       }
                       .frame(width: geometry.size.width/1.3)
                   }

                   .padding(23.0)
                   .background(Color.white)

               }
                .clipShape(RoundedRectangle(cornerRadius: 32))
                .shadow(color: .customLabel, radius: 15)
           }
        }
    }
}

彼の気性

これが解決策です。Xcode 11.4 / iOS13.4でテスト済み

struct WordCells: View {
    @State private var toggleView: Int? = nil  // << selection
    var numberOfItems = Int.init()
    var body: some View {
        GeometryReader { geometry in
            VStack(spacing: 40.0) {
                ForEach(0..<self.numberOfItems) {item in
                    Button(action: {
                        withAnimation(.easeInOut(duration: 0.5)) {
                            if self.toggleView == item { // << here !!
                                self.toggleView = nil
                            } else {
                                self.toggleView = item
                            }
                       }
                   })
                   {
                    VStack {
                       HStack {
                            Text("Button Text")
                                .fontWeight(.bold)
                                .foregroundColor(.black)
                                .font(.callout)

                            Spacer()

                            Text("Description")
                                .fontWeight(.bold)
                                .foregroundColor(.gray)
                                .font(.callout)
                            }
                        if self.toggleView == item { // << selection !!
                            HiddenDescriptionView()
                        }
                       }
                       .frame(width: geometry.size.width/1.3)
                   }

                   .padding(23.0)
                   .background(Color.white)

               }
                .clipShape(RoundedRectangle(cornerRadius: 32))
                .shadow(color: .gray, radius: 15)
           }
        }
    }
}

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

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