自定义NavigationLink在ContentView可见，主视图中却不显示

问题描述 #

为了自定义外观并实现复用，我创建了一个CustomNavLink组件，其定义代码如下：

NavigationStack {
    NavigationLink(
        destination: linkDestination,
        isActive: $isPressed,
        label: {
            Button(action: {
                isPressed = true
            }) {
                VStack {
                    Label(labelName, systemImage: icon)
                        .foregroundColor(.black)
                }
                .frame(width: 200, height: 200)
                .background(
                    RoundedRectangle(cornerRadius: 10)
                        .fill(color)
                )
            }
            .buttonStyle(CustomNavigationButtonStyle(isActive: isPressed))
        }
    )
}

该组件在其声明所在的ContentView中可正常显示且功能正常，但在主视图中按如下代码调用两个实例时，它们均不可见：

...
            VStack(spacing: 0) {
                AppBar(title: "Votion")
                    .frame(width: geometry.size.width, height: 44)
                ScrollView {
                    VStack {
                        Spacer()
                            .padding(40.0)
                        Text("Create Task")
                            .font(.title)
                            .foregroundColor(.black)
                            .padding()
                        CustomNavLink(
                            labelName: "Personal",
                            icon: "person",
                            linkDestination: PersonalTaskForm())
                        CustomNavLink(
                            labelName: "Business",
                            icon: "laptopcomputer.and.iphone",
                            linkDestination: PersonalTaskForm())
                    }
                }
            }
...

请问可能导致这两个CustomNavLink不可见的原因是什么？

可能的原因分析 #

• 组件内部嵌套了多余的NavigationStack：CustomNavLink本身包裹了NavigationStack，但主视图中该组件大概率处于另一个NavigationStack层级下。嵌套的NavigationStack会引发布局尺寸计算异常，甚至挤压内部NavigationLink使其尺寸变为0，最终表现为不可见。正确做法是移除组件内部的NavigationStack，让CustomNavLink仅作为NavigationLink的封装，直接放在已有NavigationStack中使用。
• 缺少color参数的传递：组件代码里背景填充依赖color变量，但主视图调用时未传递该参数。如果color没有设置有效默认值（比如默认是.clear），会导致按钮背景完全透明，再加上Label文字为黑色，若主视图背景是浅色，就会出现视觉上不可见的情况。而ContentView中调用时应该传递了color参数，所以能正常显示。
• CustomNavigationButtonStyle存在异常逻辑：如果CustomNavigationButtonStyle内部有根据isPressed状态设置视图隐藏（比如opacity: 0）、尺寸压缩的逻辑，初始状态下isPressed为false，会直接导致按钮不可见。
• ScrollView内布局约束问题：主视图中ScrollView内部的VStack没有设置明确的对齐方式或尺寸约束，加上顶部的Spacer可能将CustomNavLink推到可视区域之外。可以尝试给VStack添加alignment: .center，或移除不必要的Spacer来验证。

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