如何让无填充色+PlainButtonStyle的NavigationLink矩形支持全区域点击

当使用仅描边的Rectangle作为NavigationLink内容，并设置.buttonStyle(.plain)时，矩形的空白透明区域无法触发导航。以下方案可满足你提出的所有要求：前景色设为Color.clear、保留.buttonStyle(.plain)、矩形空白区域可触发导航。

方案1：给Rectangle添加透明背景扩展点击区域 #

通过给Rectangle添加Color.clear背景，让整个frame范围都成为可点击区域：

NavigationLink(destination: Text("目标页面")) {
    Rectangle()
        .stroke(Color.black, lineWidth: 2)
        .frame(width: 200, height: 100)
        .background(Color.clear) // 关键：透明背景扩展点击范围
}
.foregroundColor(Color.clear)
.buttonStyle(.plain)

方案2：用ZStack包裹透明层与Rectangle #

利用ZStack让全屏的透明Color.clear作为底层点击区域，上层放置描边矩形：

NavigationLink(destination: Text("目标页面")) {
    ZStack {
        Color.clear // 占据整个frame的透明层，确保全区域可点击
        Rectangle()
            .stroke(Color.black, lineWidth: 2)
    }
    .frame(width: 200, height: 100)
}
.foregroundColor(Color.clear)
.buttonStyle(.plain)

原理说明 #

SwiftUI默认仅识别视图的非透明区域为可交互范围。添加Color.clear背景或透明层后，整个frame都会被标记为可点击区域，同时.buttonStyle(.plain)移除了默认的蓝色文本覆盖效果，.foregroundColor(Color.clear)避免了额外前景色的干扰，完全符合你的需求。

内容的提问来源于stack exchange，提问作者zr0gravity7