SwiftUI-列表行中的多个按钮

时间:2019-06-12 11:24:39

标签: ios swift swiftui

假设我在一行中有一个List和两个按钮,如何在不突出显示整个行的情况下区分哪个按钮被轻敲了?

对于此示例代码,当点击该行中的任何一个按钮时,将同时调用两个按钮的动作回调。

// a simple list with just one row
List {

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

        Button(action: {
            print("button 2 tapped")
        }) {
            Text("Two")
        }
    }
}

// when tapping just once on either button:
// "button 1 tapped"
// "button 2 tapped"

5 个答案:

答案 0 :(得分:3)

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

解决方法

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

这将产生所需的输出。

您也可以使用Group代替Text来为“按钮”进行复杂的设计。

答案 1 :(得分:1)

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

答案 2 :(得分:0)

SwiftUI的不同之处之一是您不创建特定的实例,例如UIButton,因为您可能在Mac应用程序中。使用SwiftUI,您需要一个按钮类型的东西。

在这种情况下,由于您在列表行中,因此系统会为您提供完整尺寸,点击任意位置以触发操作,按钮。并且由于添加了其中两个,因此在您轻按任意位置时都会触发它们。

您可以添加两个单独的视图,并给它们一个.tapAction以使它们本质上充当按钮,但是您将失去单元格行的点击闪烁,而SwiftUI会提供的其他任何自动按钮(如功能)。

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

        Spacer()

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

答案 3 :(得分:0)

您需要使用 BordlessButtonStyle()

<div dangerouslySetInnerHTML={{ __html: data.site.siteMetadata.description }} />

答案 4 :(得分:-3)

SwiftUI仍处于测试阶段。您应该通过反馈助手进行报告: http://feedbackassistant.apple.com/

很可能是他们系统中的错误。