SwiftUI watchOS开发：按钮被导航栏重叠的适配解决方案求助

问题现象 #

使用SwiftUI开发Apple Watch应用时，通过NavigationLink跳转到InputView后出现两个问题：

1. InputView顶部的按钮行被导航栏重叠遮挡
2. 按钮无法自动适配布局，尺寸显示异常；但将Button替换为Text时显示正常

问题效果截图：

原代码 #

主视图代码 #

NavigationView {
    ScrollView(.vertical) {
        NavigationLink(destination: InputView()) {
            Text("Click here to get view")
        }
    }
}

InputView代码 #

var body: some View {
    NavigationView {
        VStack(spacing: 0) {
            ForEach(0..<4) { rowIndex in
                HStack {
                    ForEach(0..<3) { columnIndex in
                        let buttonID = rowIndex*3 + columnIndex
                        
                        Button("\(buttonID)") {
                            print(buttonID)
                        }
                    }
                }
            }
        }
    }
}

解决方法 #

1. 移除重复的NavigationView #

InputView作为NavigationLink的目标页面，不需要再嵌套NavigationView——Apple Watch的NavigationView会自动管理导航层级，重复嵌套会导致导航栏叠加，挤压内容区域造成顶部遮挡。

2. 强制Button填充布局空间 #

Button在Watch上默认不会自动填充父容器的可用空间，需要通过frame修饰符强制其拉伸，实现均匀排列的效果。

修正后的完整InputView代码 #

var body: some View {
    VStack(spacing: 0) {
        ForEach(0..<4) { rowIndex in
            HStack(spacing: 0) {
                ForEach(0..<3) { columnIndex in
                    let buttonID = rowIndex*3 + columnIndex
                    
                    Button("\(buttonID)") {
                        print(buttonID)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(Color.gray.opacity(0.2)) // 可选：便于观察布局边界
                }
            }
        }
    }
    .navigationTitle("输入面板") // 导航标题由主视图的NavigationView渲染
}

原理说明 #

• 导航栏重叠：重复的NavigationView会生成多层导航栏，上层导航栏会覆盖下层视图的顶部区域，移除嵌套后由主视图的NavigationView统一管理导航层级即可解决。
• Button尺寸问题：Text的布局逻辑是自动适应父容器分配的空间，而Button默认保留自身的最小点击区域，通过frame(maxWidth: .infinity, maxHeight: .infinity)可以让按钮填充所在HStack的全部可用空间，实现均匀排列。

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