如何在SwiftUI视图中插入不被单元格包裹的非列表元素

解决方案 #

你可以在原有Form中新增一个独立Section，对该Section内的图片元素禁用默认列表单元格样式，即可同时满足「整个页面连续滚动」「保留Form浅灰背景」「图片不被单元格包裹」三个需求。

完整修改代码 #

import SwiftUI

struct ContentView: View {
    private var color = Color(red: 32/255, green: 35/255, blue: 0/255)
    var body: some View {
        NavigationView {
            Form {
                Section {
                    HStack {
                        Text("AA")
                            .foregroundColor(color)
                    }
                    HStack {
                        Text("B")
                            .foregroundColor(color)
                    }
                    HStack {
                        Text("C")
                            .foregroundColor(color)
                    }
                    HStack {
                        Text("D")
                            .foregroundColor(color)
                    }
                    HStack {
                        Text("E")
                            .foregroundColor(color)
                    }
                    HStack {
                        Text("F")
                            .foregroundColor(color)
                    }
                    HStack {
                        Text("G")
                            .foregroundColor(color)
                    }
                }
                // 新增存放图片的Section
                Section {
                    Image(systemName: "fallLeaves")
                        .resizable()
                        .scaledToFit()
                        .frame(maxWidth: .infinity)
                        // 以下修饰符清除默认单元格样式
                        .listRowInsets(EdgeInsets())
                        .listRowBackground(Color.clear)
                        .listRowSeparator(.hidden)
                }
            }
            .navigationBarTitle(Text("Page"))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

关键修改说明 #

• 图片仍然放在Form内部，保证整个页面只有一个滚动区域，连续滚动效果正常，Form自带的浅灰色背景也会保留
• 三个列表修饰符的作用：
  • listRowInsets(EdgeInsets()) 清除单元格默认左右内边距，让图片可以撑满整个屏幕宽度
  • listRowBackground(Color.clear) 清除单元格默认的白色背景，露出下方Form的浅灰色背景
  • listRowSeparator(.hidden) 隐藏图片上下的单元格分隔线，完全消除单元格视觉特征

如果需要调整图片和上方表格行的间距，只需要给Image添加对应的padding修饰符即可。

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