SwiftUI列表行添加首尾元素：Overlay被截断的解决方法咨询

我需要创建一个SwiftUI List，让部分行包含前置或后置元素。尝试用overlay实现时，List Row会截断超出范围的overlay内容（比如示例中偏移到左侧的信息图标被隐藏）。

示例代码：

GeometryReader { geo in
    List {
        Text("Test 1")
            .overlay {
                Image(systemName: "info.circle")
                    .offset(x: -50)
            }
        Text("Test 2")
        Text("Test 3")
    }
    .padding(.horizontal, geo.size.width * 0.1)
}

已尝试的无效方法：

• 在主列表旁添加另一个列表：首尾元素无法同步滚动
• 使用clipShape修改裁剪行为：仅对整个列表生效，单独应用到行上无效
• 用ScrollView自定义列表：需要保留sections和Apple原生列表样式，重写成本过高

方案1：用HStack直接整合元素（推荐） #

放弃overlay，直接把前置/后置元素和主内容放在同一个HStack里，配合调整List行的内边距，完全贴合原生List的布局逻辑：

GeometryReader { geo in
    List {
        // 带前置元素的行
        HStack(alignment: .center, spacing: 12) {
            Image(systemName: "info.circle")
            Text("Test 1")
            Spacer()
            // 若需要后置元素，可在这里添加：
            // Image(systemName: "chevron.right")
        }
        .listRowInsets(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10))
        
        Text("Test 2")
        Text("Test 3")
        
        // 支持sections示例
        Section(header: Text("分组标题")) {
            HStack {
                Image(systemName: "exclamationmark.triangle")
                Text("带提示的行")
            }
        }
    }
    .padding(.horizontal, geo.size.width * 0.1)
}

这种方法不会出现内容截断，完美支持sections和原生List样式，是最省心的实现方式。

方案2：禁用行裁剪+调整内边距（适配overlay场景） #

如果一定要用overlay，给目标行禁用裁剪，同时调整行内边距让主内容偏移，给overlay元素留出显示空间（需要iOS 16+）：

GeometryReader { geo in
    List {
        Text("Test 1")
            .overlay(Image(systemName: "info.circle").offset(x: -50))
            .clipped(false) // 关闭当前行的裁剪
            .listRowInsets(EdgeInsets(top: 0, leading: 60, bottom: 0, trailing: 10)) // 增大左内边距，避免主内容和图标重叠
        
        Text("Test 2")
        Text("Test 3")
    }
    .padding(.horizontal, geo.size.width * 0.1)
}

方案3：ZStack+禁用列表整体裁剪（适配超出padding区域的场景） #

如果需要元素显示在List的padding区域内，用ZStack包裹内容，同时关闭List的整体裁剪：

GeometryReader { geo in
    List {
        ZStack(alignment: .leading) {
            Text("Test 1")
            // 计算偏移量，让图标显示在List的左侧padding区域
            Image(systemName: "info.circle")
                .offset(x: -(geo.size.width * 0.1 + 20))
        }
        
        Text("Test 2")
        Text("Test 3")
    }
    .padding(.horizontal, geo.size.width * 0.1)
    .clipShape(.rect(cornerRadius: 0)) // 关闭List的整体裁剪，允许内容超出padding范围
}

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