SwiftUI - 列表行中的多個按鈕

Question

假設我在一行中有一個List和兩個按鈕，如何在沒有突出顯示整行的情況下區分點擊哪個按鈕？

對於此示例代碼，當點擊行中的任何一個按鈕時，兩個按鈕的動作回調都會被調用。

// 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

Answer 1

您需要使用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())
        }
    }

Answer 2

當包含在List行中時，似乎是關於Button的特定問題。

解決方法：

List {
  HStack {
    Text("One").onTapGesture { print("One") }
    Text("Two").onTapGesture { print("Two") }
  }
}

這會產生所需的輸出。

您還可以使用Group而不是Text來為“按鈕”進行復雜的設計。

Answer 3

與 SwiftUI 的不同之處之一是您沒有創建特定實例，例如 UIButton，因為您可能在 Mac 應用程序中。 使用 SwiftUI，您請求的是按鈕類型的東西。

在這種情況下，由於您位於列表行中，系統會為您提供完整尺寸，點擊任意位置以觸發操作，按鈕。 並且由於您添加了其中的兩個，因此當您點擊任意位置時都會觸發它們。

您可以添加兩個單獨的視圖並給它們一個.onTapGesture以讓它們基本上充當按鈕，但您將失去單元格行的點擊閃爍以及任何其他自動按鈕，如 SwiftUI 提供的功能。

List {
    HStack {
        Text("One").onTapGesture {
            print("Button 1 tapped")
        }

        Spacer()

        Text("Two").onTapGesture {
            print("Button 2 tapped")
        }
    }
}

Answer 4

您需要創建自己的 ButtonStyle：

  struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
      configuration.label
        .foregroundColor(.accentColor)
        .opacity(configuration.isPressed ? 0.5 : 1.0)
    }
  }

  struct IdentifiableString: Identifiable {
    let text: String
    var id: String { text }
  }

  struct Test: View {
    var body: some View {
      List([
        IdentifiableString(text: "Line 1"),
        IdentifiableString(text: "Line 2"),
      ]) {
        item in
        HStack {
          Text("\(item.text)")
          Spacer()
          Button(action: { print("\(item.text) 1")}) {
            Text("Button 1")
          }
          Button(action: { print("\(item.text) 2")}) {
            Text("Button 2")
          }
        }
      }.buttonStyle(MyButtonStyle())
    }
  }

Answer 5

SwiftUI 仍處於測試階段。 您應該通過反饋助手報告此問題： http : //feedbackassistant.apple.com/

很可能是他們系統中的錯誤。