SwiftUI -列表中的两个按钮

xurqigkl  于 2023-04-19  发布在  Swift
关注(0)|答案(5)|浏览(214)

我在列表中有两个按钮,但是当点击时,列表项的整个区域都被突出显示。有没有办法将这两个按钮分开?
在本例中,我有一个Action按钮和一个Info按钮:

我找到了this question,虽然没有直接的解决方案。
代码如下:

var body: some View {
    HStack {
        Text(control.name)
        Spacer()
        Button(action: {
            print("action")
        }) {
            Text("Action")
            }
            .frame(width: 250 - 10)
            .padding(5)
            .background(Color(white: 0.9))
            .cornerRadius(10)
            .frame(width: 250)
        Group {
            Button(action: {
                print("action")
            }) {
                Image(systemName: "info.circle")
                    .foregroundColor(.accentColor)
            }
        }
    }
}
ulmd4ohb

ulmd4ohb1#

将按钮样式设置为与默认值不同的样式,例如BorderlessButtonStyle()

struct Test: View {
  var body: some View {
    NavigationView {
      List {
        ForEach([
          "Line 1",
          "Line 2",
        ], id: \.self) {
          item in
          HStack {
            Text("\(item)")
            Spacer()
            Button(action: { print("\(item) 1")}) {
              Text("Button 1")
            }
            Button(action: { print("\(item) 2")}) {
              Text("Button 2")
            }
          }
        }
        .onDelete { _ in }
        .buttonStyle(BorderlessButtonStyle())
      }
      .navigationBarItems(trailing: EditButton())
    }
    .accentColor(.red)
  }
}
ikfrs5lh

ikfrs5lh2#

我为这个问题挣扎了一段时间。Apple在SwiftUI中使Button变得特别。它可以根据使用的上下文而改变。这就是为什么当ButtonList中时,我们会看到这种奇怪的功能。
幸运的是,还有其他使用.onTapGesture的方法。请尝试下面的代码。

var body: some View {
    HStack {
        Text(control.name)
        Spacer()
        Text("Action")
            .frame(width: 250 - 10)
            .padding(5)
            .background(Color(white: 0.9))
            .cornerRadius(10)
            .frame(width: 250)
            .onTapGesture {
                print("action1")
            }
    
        Image(systemName: "info.circle")
            .foregroundColor(.accentColor)
            .onTapGesture {
                print("action2")
            }
    }
}
q1qsirdb

q1qsirdb3#

在Xcode 12.5中,我在SwiftUI中遇到了同样的问题,当点击时,列表项的整个区域都被高亮显示。

**.buttonStyle(BorderlessButtonStyle())**完成了这项工作,现在可以在列表项上分别点击两个自定义按钮。

n9vozmp4

n9vozmp44#

对于任何在使用最新的SwiftUI(Xcode 11.2)和HStack中的多个Button时遇到类似问题的人,我只有在将HStack中的所有按钮转换为Image并添加.onTapGesture处理程序后才解决了这个问题。
在我的情况下,问题是点击一个按钮会触发HStack中的所有其他按钮。只有在我将所有按钮转换为图像后,它们才停止相互干扰。
当然,如果你的按钮没有图像,你可以使用Text

r6vfmomb

r6vfmomb5#

您可以添加padding或尝试添加Spacer

添加填充

HStack {
        Text("Button")
        Spacer()
        Button(action: {
            print("action")
        }) {
            Text("Action")
            }
            .frame(width: 250 - 10)
            .padding(5)
            .background(Color(white: 0.9))
            .cornerRadius(10)
            .frame(width: 250)
        Group {
            Button(action: {
                print("action")
            }) {
                Image(systemName: "info.circle")
                    .foregroundColor(.accentColor)
            }
            .padding(15)
        }
    }

增加间隔条

HStack {
        Text("Button")
        Spacer()
        Button(action: {
            print("action")
        }) {
            Text("Action")
            }
            .frame(width: 250 - 10)
            .padding(5)
            .background(Color(white: 0.9))
            .cornerRadius(10)
            .frame(width: 250)
        Spacer()
        Group {
            Button(action: {
                print("action")
            }) {
                Image(systemName: "info.circle")
                    .foregroundColor(.accentColor)
            }
        }
    }

相关问题