ios SwiftUI -列表行中的多个按钮

slwdgvem  于 2023-03-14  发布在  iOS
关注(0)|答案(4)|浏览(251)

假设我有一个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
ars1skjm

ars1skjm1#

您可以应用除**.automatic**之外的任何按钮样式(例如,.bordered.borderless.borderedProminent等)。

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

o2rvlv0m2#

当包含在List行中时,似乎是与Button有关的特定问题。

解决方法

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

这将产生所需的输出。
您也可以使用Group而不是Text来对“按钮”进行复杂的设计。

chy5wohz

chy5wohz3#

SwiftUI的一个不同之处是,您不会创建特定的示例,例如UIButton,因为您可能在Mac应用程序中。使用SwiftUI,您请求的是按钮类型的东西。
在这个例子中,由于你是在一个列表行中,系统会给你一个全尺寸的,点击任何地方来触发动作按钮。由于你已经添加了两个按钮,当你点击任何地方时,两个按钮都会被触发。
您可以添加两个单独的视图,并给予它们一个.onTapGesture,让它们本质上充当按钮,但您将失去单元格行的点击 Flink 和任何其他自动按钮,如SwiftUI将提供的功能。

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

        Spacer()

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

gcmastyq4#

您需要创建自己的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())
    }
  }

相关问题