SwiftUI List/Form图片单元格去边距及scaleAspectFill适配问题

List {
  Section("Photo") {
    Button {
      // 点击执行逻辑
    } label: {
      Image(uiImage: image)
        .resizable()
        .aspectRatio(contentMode: .fill)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .clipped()
    }
    .listRowInsets(EdgeInsets())
  }
  .listRowBackground(Color.gray)
  TextField("Name", text: viewStore.binding(\.$name))
  DatePicker("DOB", selection: viewStore.binding(\.$dob), displayedComponents: [.date])
}

问题1 消除灰色内边距实现图片填充单元格 #

SwiftUI 的 List 行默认自带系统全局内边距，只需给图片所在的行元素添加 .listRowInsets(EdgeInsets()) 修饰符，即可将上下左右四个方向的内边距全部置为0，让内容完全占满整行区域。

问题2 实现UIKit中scaleAspectFill等效效果 #

你当前使用的 .aspectRatio(1, contentMode: .fit) 会强制图片按1:1比例自适应展示，内容全部塞入显示区域所以会出现挤压变形：

• 移除固定1:1比例参数，直接使用 .aspectRatio(contentMode: .fill) 修饰符，即可实现按图片原始比例撑满显示区域的效果，和UIKit的 scaleAspectFill 行为完全一致
• 搭配 .clipped() 修饰符，裁剪超出显示区域的图片部分，避免内容溢出
• 额外添加 .frame(maxWidth: .infinity, maxHeight: .infinity) 保证图片可以撑满整个行的可用空间

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