ios - macOS 上的 SwiftUI，如何使整行可点击？

Question

我有一个要呈现为List可点击按钮的字符串列表。

但是，使用下面的代码，当我想要整个内容时，只有该行的文本是可点击的。

我不太确定我在这里做错了什么，但我希望得到一些帮助。

谢谢！

            List {
                ForEach(sites, id: \.self) { site in
                    Button(action: {
                        self.selectedSite = site
                    }) {
                        // TODO: Make this whole row clickable.
                        HStack {
                            Text(site)

                            if let selectedSite = self.selectedSite, selectedSite == site {
                                Spacer()
                                Button(action: self.removeFromList) {
                                    Text("Remove")
                                }
                                .background(Color.black)
                                .foregroundColor(.white)
                                .cornerRadius(6)
                            }
                        }
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.horizontal, 10)
                    .padding(.vertical, 8)
                    .buttonStyle(PlainButtonStyle())
                    .font(.system(size: 15))
                    .foregroundColor(selectedSite == site ? .white : .white)
                    .background(selectedSite == site ? Color.blue : nil)
                    .cornerRadius(6)
                }
            }

标签： iosswiftswiftui

Answer 1

问题是 whenselectedSite是 nil，那么你只显示Text(site)在HStack... 你错过了 all-important Spacer()。如果您添加一个.background(Color.red).

HStack {
    Text(site)

    if let selectedSite = self.selectedSite, selectedSite == site {
        Spacer()
        Button(action: {}) {
            Text("Remove")
        }
        .background(Color.black)
        .foregroundColor(.white)
        .cornerRadius(6)
    }
}
.background(Color.red)

不selectedSite	selectedSite存在

看看当没有 时selectedSite，HStack（红色区域）很小并且只占用 的空间Text？但是，当有a时selectedSite，HStack扩展以填充整行？要修复，请尝试以下操作：

1. 移动Spacer 外部，if let selectedSite使其始终存在。
2. 用于contentShape使Spacer可点击的区域占据。

HStack {
    Text(site)
    Spacer() /// 1.
    if let selectedSite = self.selectedSite, selectedSite == site {
        Button(action: {}) {
            Text("Remove")
        }
        .background(Color.black)
        .foregroundColor(.white)
        .cornerRadius(6)
    }
}
.contentShape(Rectangle()) /// 2.

结果（在 iPhone 上测试，但在 macOS 上应该是相同的结果）：

^{上述演示的代码}