SwiftUI中如何让NavigationLink跳转页面的内容可滚动

嘿，我来帮你搞定这个滚动问题！先看看你的代码里的核心问题：

你把ScrollView加错地方啦——你在List的每个列表项里都套了个ScrollView，但List本身就是自带滚动功能的容器，这完全是多余的，而且根本没给页面B（也就是NavigationLink的目标页面）加上滚动容器。

正确的修改方案 #

要让页面B的内容能滚动，你需要把目标页面的内容包裹在ScrollView里，同时移除List内部多余的ScrollView。下面是修改后的完整代码：

import SwiftUI

// 补充你的数据模型（方便代码直接运行）
struct DiseaseModel: Identifiable {
    let id = UUID()
    let idValue: Int
    let name: String
    let data: String
}

// 示例数据，用长文本测试滚动效果
let modelDisease: [DiseaseModel] = [
    DiseaseModel(idValue: 1, name: "普通感冒", data: "这里是很长的详情内容，用来测试滚动效果。这里是很长的详情内容，用来测试滚动效果。这里是很长的详情内容，用来测试滚动效果。这里是很长的详情内容，用来测试滚动效果。这里是很长的详情内容，用来测试滚动效果。这里是很长的详情内容，用来测试滚动效果。这里是很长的详情内容，用来测试滚动效果。这里是很长的详情内容，用来测试滚动效果。这里是很长的详情内容，用来测试滚动效果。这里是很长的详情内容，用来测试滚动效果。"),
    DiseaseModel(idValue: 2, name: "偏头痛", data: "另一段长详情文本，确保能触发滚动。另一段长详情文本，确保能触发滚动。另一段长详情文本，确保能触发滚动。另一段长详情文本，确保能触发滚动。另一段长详情文本，确保能触发滚动。另一段长详情文本，确保能触发滚动。另一段长详情文本，确保能触发滚动。")
]

struct ContentView: View {
    var body: some View {
        NavigationView() {
            // 移除了外层多余的VStack，List可直接作为NavigationView的子视图
            List(modelDisease) { myList in
                NavigationLink(
                    // 把页面B的内容包裹在ScrollView中
                    destination: ScrollView(.vertical, showsIndicators: true) {
                        Text(myList.data)
                            .padding()
                            .frame(maxWidth: .infinity, alignment: .leading) // 让文本占满屏幕宽度
                    }
                    .navigationTitle(myList.name) // 给页面B添加标题，提升体验
                    ) {
                        HStack {
                            Text("\(myList.idValue)")
                                .frame(width: 50, alignment: .leading)
                            Text(myList.name)
                        }
                        .font(.title)
                    }
            }
            .navigationBarTitle("Ayurvedic Remedies")
        }
    }
}

关键修改点说明 #

• 移除List内部的ScrollView：List本身就是可滚动容器，每个列表项里加ScrollView既没用还会干扰布局。
• 给页面B包裹ScrollView：把NavigationLink的destination内容放在ScrollView中，当详情文本过长超出屏幕时，就能正常滚动了。
• 优化布局细节：给页面B的文本设置frame(maxWidth: .infinity)让内容占满宽度，同时添加导航标题，让页面结构更清晰。

额外提示 #

如果你的详情内容本身很短，可能看不出滚动效果，可以用一段长文本测试；另外在iOS 16及以上版本，推荐使用NavigationStack替代NavigationView，用法类似，兼容性更好。

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