如何让ScrollView内动态列表与其他元素同步滚动并保留Inset Grouped样式？

问题场景 #

SwiftUI应用内的复杂Sheet视图分为两部分：

• 上方是无需滚动的静态元素（如文本字段）
• 下方是包含垂直按钮组和动态列表的可滚动区域，要求键盘弹出时可整体滚动该区域内的元素

遇到的问题与尝试方案 #

• 直接将动态List嵌套进ScrollView时，List无法正常显示
• 方案A：给List添加.scaledToFit()修饰符后可显示，但List自带滚动逻辑，会与上方按钮组各自独立滚动，仅保留了所需的.insetGrouped样式
• 方案B：改用LazyVStack实现，按钮与列表元素可同步滚动，但无法呈现.insetGrouped的视觉样式

需求 #

实现按钮组与List内容的同步滚动，同时保留List的.insetGrouped样式——即结合方案A的样式与方案B的滚动行为，或为方案B的自定义列表添加.insetGrouped样式

解决方案 #

方法1：禁用List自身滚动，嵌套进ScrollView（推荐） #

直接关闭List的滚动功能，将其与按钮组一同放入外层ScrollView，即可实现同步滚动且保留系统原生的.insetGrouped样式。

代码示例：

struct SheetContentView: View {
    // 模拟动态列表数据
    let listItems = (1...50).map { "列表项 \($0)" }
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 0) {
                // 上方静态区域
                VStack {
                    TextField("输入内容", text: .constant(""))
                        .padding()
                        .background(Color(.systemGray6))
                }
                
                // 下方统一可滚动区域
                ScrollView {
                    VStack(spacing: 16) {
                        // 垂直按钮组
                        VStack(spacing: 8) {
                            Button("操作按钮1") {}
                                .frame(maxWidth: .infinity)
                                .padding()
                                .background(Color.blue)
                                .foregroundColor(.white)
                                .cornerRadius(8)
                            
                            Button("操作按钮2") {}
                                .frame(maxWidth: .infinity)
                                .padding()
                                .background(Color.blue)
                                .foregroundColor(.white)
                                .cornerRadius(8)
                        }
                        .padding(.horizontal)
                        
                        // 禁用滚动的List，保留insetGrouped样式
                        List(listItems, id: \.self) { item in
                            Text(item)
                        }
                        .listStyle(.insetGrouped)
                        .scrollDisabled(true) // 核心：关闭List自身滚动
                        .padding(.horizontal)
                    }
                }
            }
            .navigationTitle("Sheet示例")
        }
    }
}

方法2：给LazyVStack模拟.insetGrouped样式 #

若需坚持使用LazyVStack，可通过自定义视图组件模拟.insetGrouped的视觉效果，包括背景色、圆角、边框和间距。

代码示例：

// 模拟insetGrouped列表行样式
struct InsetGroupedRow: View {
    let content: String
    
    var body: some View {
        Text(content)
            .padding()
            .background(Color(.systemBackground))
            .cornerRadius(10)
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color(.systemGray4), lineWidth: 0.5)
            )
    }
}

struct SheetContentView: View {
    let listItems = (1...50).map { "列表项 \($0)" }
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 0) {
                // 上方静态区域
                VStack {
                    TextField("输入内容", text: .constant(""))
                        .padding()
                        .background(Color(.systemGray6))
                }
                
                // 下方统一可滚动区域
                ScrollView {
                    VStack(spacing: 16) {
                        // 垂直按钮组
                        VStack(spacing: 8) {
                            Button("操作按钮1") {}
                                .frame(maxWidth: .infinity)
                                .padding()
                                .background(Color.blue)
                                .foregroundColor(.white)
                                .cornerRadius(8)
                            
                            Button("操作按钮2") {}
                                .frame(maxWidth: .infinity)
                                .padding()
                                .background(Color.blue)
                                .foregroundColor(.white)
                                .cornerRadius(8)
                        }
                        .padding(.horizontal)
                        
                        // 模拟insetGrouped样式的LazyVStack
                        LazyVStack(spacing: 8) {
                            ForEach(listItems, id: \.self) { item in
                                InsetGroupedRow(content: item)
                            }
                        }
                        .padding(.horizontal)
                        .padding(.vertical, 8)
                        .background(Color(.systemGroupedBackground))
                        .cornerRadius(12)
                    }
                }
            }
            .navigationTitle("Sheet示例")
        }
    }
}

关键说明 #

• 方法1为最优解，直接复用系统List的原生样式，仅需关闭滚动逻辑即可，代码简洁且符合iOS设计规范
• 方法2适用于需高度自定义的场景，但需手动匹配系统样式细节，后续iOS版本更新时可能需要调整样式参数

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