NavigationLink 触控区

NavigationLink touch area

我正在尝试在 List 中使用 NavigationLink。由于特定原因,它在 .backgroundEmptyView().

var body: some View {
    List {
        Section {
            HStack {
                Image(systemName: "checkmark")
                    .frame(width: 30, height: 30, alignment: .center)
                    .opacity(selected ? 1 : 0)
                Text("TEST")
                Spacer()
            }
            .onTapGesture {
                selected.toggle()
            }
            .background(
                NavigationLink(destination: WifiView()) { EmptyView() }
                    .disabled(isPad)
            )
        }
    }
}

问题是 NavigationLink 的触摸区域与预期不符。

.background的面积如上

NavigationLinkEmptyView的面积如上。我试图用 .frame 强制框架,但它不会改变。

我错过了什么?

试试这样的方法,对我来说效果很好:

var body: some View {
    List {
        Section {
            HStack {
                Image(systemName: "checkmark")
                    .frame(width: 30, height: 30, alignment: .center)
                    .opacity(selected ? 1 : 0)
                Text("TEST")
                Spacer()
            }
                .contentShape(Rectangle())  // <--- here
                .onTapGesture {
                    selected.toggle()
                }
                .background(
                    NavigationLink(destination: WifiView()) { EmptyView() }
                        .disabled(isPad)
                )
        }
    }
}