1. ホーム
  2. ios

SwiftUI - リスト行に複数のボタンを表示する

2023-08-22 11:14:48

質問

例えば List と2つのボタンが1列に並んでいる場合、行全体をハイライトさせずにどちらのボタンがタップされたかを区別するにはどうしたらよいでしょうか?

このサンプルコードでは、行のボタンのいずれかがタップされると、両方のボタンのアクションコールバックが呼び出されます。

// a simple list with just one row
List {

    // both buttons in a HStack so that they appear in a single row
    HStack {
        Button {
            print("button 1 tapped")
        } label: {
            Text("One")
        }
            
        Button {
            print("button 2 tapped")
        } label: {
            Text("Two")
        }
    }
}

どちらかのボタンが一度だけタップされたとき、両方のボタンのコールバックが呼び出されるのが見えますが、これは私が望んでいるものではありません。

button 1 tapped
button 2 tapped

どのように解決するのですか?

この問題を解決するには BorderlessButtonStyle()を使用します。 または PlainButtonStyle() .

    List([1, 2, 3], id: \.self) { row in
        HStack {
            Button(action: { print("Button at \(row)") }) {
                Text("Row: \(row) Name: A")
            }
            .buttonStyle(BorderlessButtonStyle())
            
            Button(action: { print("Button at \(row)") }) {
                Text("Row: \(row) Name: B")
            }
            .buttonStyle(PlainButtonStyle())
        }
    }