SwiftUI中如何让列表行内滚动视图内容溢出至屏幕边缘

要让List行内的水平ScrollView内容能够延伸到屏幕边缘，只需修改两处关键设置：

1. 移除List行的默认内边距
2. 确保ScrollView占满行的全部宽度

修改后的完整代码：

struct ContentView: View {
    var body: some View {
        List {
            Group {
                Label("Hello World", systemImage: "globe")
                    .background(.red)
                
                ScrollView(.horizontal) {
                    LazyHStack {
                        ForEach(1..<100) { index in
                            Text("\(index)")
                                .padding()
                                .background(.red)
                        }
                    }
                }
                // 移除当前列表行的默认内边距
                .listRowInsets(EdgeInsets())
                // 让ScrollView占满列表行的整个宽度
                .frame(maxWidth: .infinity)
            }
        }
        .foregroundColor(.white)
        .listStyle(.plain)
    }
}

关键说明 #

• .listRowInsets(EdgeInsets())：Plain样式的List默认会给每行添加左右内边距，这个修饰符能完全移除这些内边距，让ScrollView的内容从屏幕边缘开始布局。
• .frame(maxWidth: .infinity)：确保ScrollView占据列表行的全部可用宽度，避免内容被限制在狭窄区域，保证横向滚动时内容可以正常溢出屏幕边缘。

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