SwiftUI List混合.plain与.insetGrouped实现全屏图片轮播

问题说明 #

我需要在SwiftUI的List视图中创建可延伸至屏幕边缘（无默认List内边距）的图片轮播组件，目前遇到以下矛盾：

• 设置List样式为.plain时，轮播的HStack可全屏且无圆角，但会丢失.insetGrouped自带的美观分组格式
• 设置List样式为.insetGrouped时，HStack无法延伸至屏幕边缘，左右存在固定内边距

希望找到既能保留.insetGrouped分组样式，又能让图片轮播全屏的实现方法。

当前代码 #

import SwiftUI

struct ExampleImage: View {
  var url: String
  var body: some View {
    AsyncImage(url: URL(string: url)!) { phase in
           switch phase {
           case .empty:
               ProgressView()
               .frame(width: 175, height: 225)
           case .success(let image):
               image
                   .resizable()
                   .aspectRatio(contentMode: .fill)
                   .frame(width: 175, height: 225)
                   .clipped()
                   .cornerRadius(10)

           case .failure:
               Image(systemName: "photo")
                   .resizable()
                   .aspectRatio(contentMode: .fit)
                   .frame(width: 175, height: 225)
                   .foregroundColor(.gray)
           @unknown default:
               EmptyView()
               .frame(width: 175, height: 225)
           }
       }
  }
}

struct AddPhotoView: View {
  var body: some View {
    Button(action: {}) {
      VStack(spacing: 5) {
        Image(systemName: "camera.fill")
          .font(.system(size: 14))
        Text("Add Photo").font(.caption2).bold()
      }.frame(minWidth: 100, minHeight: 225)
        .background(Color(.systemGray6))
        .cornerRadius(10)
    }
  }
}

struct ImageGallery: View {
    var body: some View {
      ScrollView(.horizontal) {
        HStack {
          ExampleImage(url:  "https://upload.wikimedia.org/wikipedia/commons/b/b1/Van-willem-vincent-gogh-die-kartoffelesser-03850.jpg")
          ExampleImage(url :"https://upload.wikimedia.org/wikipedia/commons/8/87/Vincent_van_Gogh_-_Head_of_a_skeleton_with_a_burning_cigarette_-_Google_Art_Project.jpg")
          ExampleImage(url: "https://upload.wikimedia.org/wikipedia/commons/6/66/VanGogh-starry_night_ballance1.jpg")
          AddPhotoView()
        }
        .padding(.horizontal, 12)
      }
    }
}

#Preview {
    NavigationStack {
      VStack(spacing: 0) {
        List {
          
          Section(header: Text("Address")) {
            Text("No Address Specified")
              .foregroundColor(.secondary)
          }
          
          Section {
            NavigationLink {
              EmptyView()
            } label: {
              Label {
                Text("Menu")
                
              } icon: {
                Image(systemName: "menucard")
                  .foregroundColor(.primary)
              }
            }
            NavigationLink {
              EmptyView()
            } label: {
              Label {
                Text("Check-Ins")
              } icon: {
                Image(systemName: "clock.badge.checkmark")
                  .foregroundColor(.primary)
              }
            }
          }
          ImageGallery()
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
        }
        .listSectionSpacing(15)
      }
      // Enable this to have the image carousel expand to the full width of the screen
      // .listStyle(.plain)
      .navigationBarTitleDisplayMode(.inline)
      .navigationTitle("Place Name")
    }
}

效果对比 #

• 使用.insetGrouped样式：图片轮播左右存在明显内边距，无法铺满屏幕宽度
• 使用.plain样式：图片轮播全屏显示，但List的分组样式消失，所有内容平铺

解决方案 #

核心思路是让图片轮播所在的List行突破默认内边距限制，同时保留其他Section的.insetGrouped样式。

1. 调整ImageGallery布局 #

修改ImageGallery，强制ScrollView占满屏幕宽度，并优化内部间距：

struct ImageGallery: View {
    var body: some View {
      ScrollView(.horizontal) {
        HStack(spacing: 12) {
          ExampleImage(url:  "https://upload.wikimedia.org/wikipedia/commons/b/b1/Van-willem-vincent-gogh-die-kartoffelesser-03850.jpg")
          ExampleImage(url :"https://upload.wikimedia.org/wikipedia/commons/8/87/Vincent_van_Gogh_-_Head_of_a_skeleton_with_a_burning_cigarette_-_Google_Art_Project.jpg")
          ExampleImage(url: "https://upload.wikimedia.org/wikipedia/commons/6/66/VanGogh-starry_night_ballance1.jpg")
          AddPhotoView()
        }
        .padding(.horizontal, 12)
      }
      .frame(maxWidth: .infinity) // 强制占满屏幕宽度
    }
}

2. 配置List行属性 #

在List中给ImageGallery设置无内边距的行属性，并清除默认背景：

ImageGallery()
  .listRowInsets(EdgeInsets(top: 15, leading: 0, bottom: 0, trailing: 0))
  .listRowBackground(Color.clear)

3. 启用.insetGrouped样式 #

给List设置.insetGrouped样式，保留其他Section的分组视觉效果：

List {
  // 原有Section内容...
  ImageGallery()
    .listRowInsets(EdgeInsets(top: 15, leading: 0, bottom: 0, trailing: 0))
    .listRowBackground(Color.clear)
}
.listStyle(.insetGrouped)
.listSectionSpacing(15)

可选：优化视觉衔接 #

如果需要让轮播和其他分组的视觉衔接更自然，可以给ImageGallery添加对齐的分隔线：

struct ImageGallery: View {
    var body: some View {
      VStack(spacing: 0) {
        Divider()
          .padding(.horizontal, 16) // 和其他Section分隔线对齐
        ScrollView(.horizontal) {
          // 原有HStack内容...
        }
        .frame(maxWidth: .infinity)
        .padding(.vertical, 12)
      }
    }
}

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