SwiftUI ListView顶部静态行全屏无圆角实现问题

你之前的方法失效是因为.insetGrouped样式的List会自带分组内边距和容器约束，直接设置子视图宽度无法突破List的布局限制。下面是两种可行的解决方式：

方案一：拆分布局（推荐） #

把顶部静态视图移出List，和List垂直拼接，这样顶部视图可以自由铺满屏幕宽度：

struct MyView: View {
    var body: some View {
        VStack(spacing: 0) {
            // 顶部静态视图，自动铺满屏幕宽度
            topStaticView
            // 底部列表保持原有样式
            List {
                bottomView
            }
            .listStyle(.insetGrouped)
        }
        // 如果需要顶部视图顶到屏幕最上方（忽略状态栏安全区），加上这行
        .edgesIgnoringSafeArea(.top)
    }
}

extension MyView {
    var topStaticView: some View {
        // 替换成你的顶部视图内容
        Color.orange
            .frame(height: 220)
    }
    
    var bottomView: some View {
        // 替换成你的列表项内容
        Text("示例列表项1")
        Text("示例列表项2")
        Text("示例列表项3")
    }
}

方案二：修改List内部样式（不推荐全局修改） #

如果必须把顶部视图放在List内部，可以通过修改List的行内边距和全局TableView样式来实现：

struct MyView: View {
    var body: some View {
        List {
            topStaticView
                // 移除当前行的内边距
                .listRowInsets(EdgeInsets())
                // 清除行默认背景，避免圆角残留
                .listRowBackground(Color.clear)
            
            bottomView
        }
        .listStyle(.insetGrouped)
        .onAppear {
            // 全局修改insetGrouped样式的内边距（会影响所有List）
            UITableView.appearance().sectionInset = .zero
            UITableView.appearance().cornerRadius = 0
        }
    }
}

extension MyView {
    var topStaticView: some View {
        // 你的顶部视图内容
        Color.blue
            .frame(height: 200)
    }
    
    var bottomView: some View {
        // 你的列表项内容
        Text("列表项A")
        Text("列表项B")
    }
}

注意：方案二的全局修改会影响App内所有使用.insetGrouped样式的List，除非你在视图消失时还原样式，否则不推荐使用。

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