SwiftUI中如何让「Groups」文本跳转至GroupsPage子页面？

问题原因 #

代码中NavigationLink的布局设置（尤其是frame(maxHeight: .infinity)）导致可点击区域异常，同时直接将文本作为NavigationLink初始化参数时，外层的frame修饰干扰了点击交互的触发。

解决方案 #

通过显式使用NavigationLink的label闭包，将可点击的文本内容单独包裹，确保点击文本时能正确触发跳转；同时调整布局结构，避免不必要的大frame影响交互区域。

修改后的完整代码如下：

import SwiftUI

struct LaunchPage: View {
    var body: some View {
        NavigationStack{
            GeometryReader {geo in
                VStack{
                    ScrollView{
                        ZStack {
                            Color.clear
                                .background(.ultraThinMaterial)
                            // 改用label闭包包裹文本，确保点击文本触发跳转
                            NavigationLink(destination: GroupsPage()) {
                                Text("Groups")
                                    .font(.largeTitle.weight(.bold))
                                    .foregroundColor(.black)
                            }
                            .frame(maxWidth:.infinity, alignment: .leading)
                            .padding(.leading, 20)
                            .frame(height: 70)
                            .frame(maxHeight: .infinity, alignment: .top)
                        }
                        
                        VStack {
                            Spacer()
                            Image("carpooly-high-resolution-logo")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: geo.size.width * 2.0, height: geo.size.width * 1.5)
                                .offset(y:-88)
                                .offset(x:-200)
                                .padding(.top, 100)
                        }
                    }.border(.red)
                }
            }
            .navigationBarHidden(true)
        }
    }
}

struct GroupsPage: View{
    var body: some View {
        Text("Groups")
            .font(.largeTitle)
            .fontWeight(.bold)
            .foregroundColor(Color.green)
            .multilineTextAlignment(.center)
            .padding(.all, 2.0)
            .frame(width: 200.0, height: 50.0)
            .navigationBarTitle("Group Page")
    }
}

struct CalendarPage: View{
    var body: some View {
        Text("Calendar")
            .font(.largeTitle)
            .fontWeight(.bold)
            .foregroundColor(Color.green)
            .multilineTextAlignment(.center)
            .padding(.all, 2.0)
            .frame(width: 200.0, height: 50.0)
            .navigationBarTitle("Calender Page")
    }
}

struct LaunchPage_Previews: PreviewProvider {
    static var previews: some View{
        LaunchPage()
    }
}

额外说明 #

• 显式的label闭包能更精准地控制可点击区域，确保用户点击文本时触发跳转，而非点击空白区域。
• 如果仍有问题，可以尝试移除ZStack中不必要的背景层，或调整ScrollView内的布局层级，避免视图遮挡交互区域。

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