SwiftUI：NavigationLink 在最小的 10 行示例中导致不需要的填充

Question

在 NavigationLink 中包装视图以创建主从流程时，NavigationLink 似乎添加了我不想要的填充（红色）。

如果我注释掉 NavigationLink，一切看起来都是正确的（右图）。然而，这当然让我的观点无法点击。

如何去除在 Watch 上渲染时出现的红色填充？

这是我运行:

的代码

struct ContentView: View {
    
    let testArray = [1,2,3,4,5]
    
    var body: some View {
        
        ScrollView {
            VStack {
                ForEach(testArray, id: \.self) { element in
                    
                    NavigationLink(destination: Text("")) {
                        Text("BB . . . . . . . . . . . . . . . . . . . . . . .")
                            .font(.title3)
                            .foregroundColor(.white)
                            .background(Color.blue)
                    }.background(Color.red) //has all the unwanted padding
                    
                }
            }.background(Color.black)
        }.background(Color.gray)
    }
}

我在 How to show NavigationLink as a button in SwiftUI 找到了一些很好的提示，但是做 ZStack/.background 技巧只会留下一个可点击的 ~30px 条带，它不会填满整个 ZStack案例.

我发现填充似乎是静态的 8px。所以我现在正在做的是.padding(.all, -8)希望有更好的解决方案

Answer 1

对您的 NavigationLink 应用 .buttonStyle(PlainButtonStyle()) 以删除填充和背景。显然，您还会丢失按钮的默认样式，因此如果需要，您必须重新创建它。

SwiftUI：NavigationLink 在最小的 10 行示例中导致不需要的填充

SwiftUI: NavigationLink causes unwanted padding in minimal 10-line-example

padding

swiftui

swiftui-navigationlink