SwiftUI - 列表行中的多个按钮

Posted 2023-02-24

【中文标题】SwiftUI - 列表行中的多个按钮

【英文标题】：SwiftUI - Multiple Buttons in a List row

【发布时间】：2019-06-12 11:24:39

【问题描述】：

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

【问题讨论】：

这听起来像是一个错误。你应该为它归档一个雷达。 feedbackassistant.apple.com

【参考方案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())
        
    

【讨论】：

如果您需要维护按钮动画（高亮等），这是最好的解决方案

很有魅力，但为什么？

是的。这对我来说是一个真正的 WTAF。您是如何发现这一点的？

@Jessy 在文档中花费了大量时间。

优秀。即使在所有行上都有 NavigationLink，它也能完美运行。

【参考方案2】：

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

解决方法：

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

这会产生所需的输出。

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

【讨论】：

不幸的是，此错误不仅限于列表中的按钮。我能够在列表中的 HStack 中使用多个 NavigationLink 重现相同的问题。

这只是一种解决方法。使用 BorderlessButtonStyle() 是最好的方法。

【参考方案3】：

与 SwiftUI 的一个区别是您不会创建特定的实例，例如 UIButton，因为您可能在 Mac 应用程序中。使用 SwiftUI，您请求的是按钮类型的东西。

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

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

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

        Spacer()

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

【讨论】：

tapAction 不再可用（Xcode 11.2 beta）。使用 .onTapGesture()

【参考方案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())
    
  

【讨论】：

其实不需要自定义样式。只需使用BorderlessButtonStyle()