[SwiftUI]使用ScrollView和LazyVStack自定义列表_swiftui scrollview 放 text-CSDN博客

本文链接：https://blog.csdn.net/wsyx768/article/details/129634913

该代码段展示了如何在SwiftUI中创建一个包含顶部标题栏、滚动视图和导航链接的用户界面。导航链接会跳转到详细视图，同时处理了状态栏高度和安全区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

import SwiftUI

struct MPCompositionView: View {
    var body: some View {
        VStack(spacing: 0) {
            HStack(alignment: .top, spacing: 0) {
                Text("构图")
                    .padding(EdgeInsets(top: statusBarHeight(), leading: 0, bottom: 0, trailing: 0))
                    .frame(width: UIScreen.main.bounds.width, height: 44, alignment: .center)
                    .foregroundColor(.white)
                    .font(.title2)
            }
            .padding(0)
            .frame(width: UIScreen.main.bounds.width, height: navHeight())
            .background(Color.blue)
            
            ScrollView(.vertical, showsIndicators: false) { // 隐藏滚动指示条
                LazyVStack(alignment: .leading, spacing: 5) { // alignment:对齐方式 spacing:子视图之间的距离
                    ForEach(0...100, id: \.self) { obj in
                        NavigationLink(destination: DetailView(index: obj)) { // 创建导航按钮，点击进入自定义详情CompositionDetailView
                            HStack {
                                Text("\(obj)")
                                    .frame(width: UIScreen.main.bounds.width - 30 - 20, height: 40, alignment: .leading)
                                    .foregroundColor(Color.black)
                                    .background(Color.white)
                                Image(systemName: "chevron.forward")
                            }
                        }
                        Divider() // 添加分隔线
                    }
                }
                .padding(EdgeInsets(top: 10, leading: 15, bottom: 0, trailing: 15)) // 设置边距
            }
        }
        .edgesIgnoringSafeArea(.top) // 顶部使用安全区域
    }
    
    private func statusBarHeight() -> CGFloat {
        var statusBarHeight: CGFloat = 0
        if #available(iOS 13.0, *) {
            let scene = UIApplication.shared.connectedScenes.first
            guard let windowScene = scene as? UIWindowScene else { return 0 }
            guard let statusBarManager = windowScene.statusBarManager else { return 0 }
            statusBarHeight = statusBarManager.statusBarFrame.height
        } else {
            statusBarHeight = UIApplication.shared.statusBarFrame.height
        }
        return statusBarHeight
    }
    
    private func navHeight() -> CGFloat {
        return statusBarHeight() + 44.0
    }
    
    private func botHeight() -> CGFloat {
        return 49.0
    }
    
}

struct MPCompositionView_Previews: PreviewProvider {
    static var previews: some View {
        MPCompositionView()
    }
}

struct CompositionDetailView : View {
    var index : Int
    var body: some View{
        Text("index = \(index)")
    }
}

示意图：