iOS 16中SwiftUI List分隔符异常问题及解决办法咨询

问题说明 #

iOS 16 里 SwiftUI List 的分隔符表现更贴近原生 TableView，但存在特殊场景异常：分隔符会从检测到的文本对象位置开始绘制。多数场景下没问题，但在圆形内嵌套 ZStack 放置文本的场景中，分隔符无法对齐列表左侧，显示效果不符合预期。

问题代码示例 #

struct ContentView: View {
    var numbers = 1...10
    var body: some View {
        List
        {
            Section("Images") {
                ForEach(numbers, id: \.self) { number in
                    HStack {
                        Image(systemName: "\(number).circle")
                        Text(String(number))
                    }
                }
            }
            
            Section("Circles") {
                ForEach(numbers, id: \.self) { number in
                    HStack {
                        ZStack {
                            Circle()
                                .strokeBorder(.black, lineWidth: 2)
                                .frame(width: 20, height: 20)
                            Text(String(number))
                                .font(.caption)
                        }
                        Text(String(number))
                    }
                }
            }
        }
        .listRowInsets(EdgeInsets())
        .padding()
    }
}

问题场景截图 #

可行解决办法 #

方案1：轻量修复——调整文本层级 #

把 ZStack 内的文本移到 overlay 中，让 SwiftUI 的分隔符检测逻辑不会将其识别为独立的文本元素，从而保持分隔符从左侧开始绘制：

// 修改Circles部分的列表项
ForEach(numbers, id: \.self) { number in
    HStack {
        ZStack {
            Circle()
                .strokeBorder(.black, lineWidth: 2)
                .frame(width: 20, height: 20)
        }
        .overlay( // 将文本移到overlay里
            Text(String(number))
                .font(.caption)
        )
        Text(String(number))
    }
}

这个方案不需要改动列表的全局设置，仅调整单个元素的布局层级，就能解决分隔符偏移问题。

方案2：完全自定义分隔符 #

如果需要更彻底的控制，可以隐藏系统自带的分隔符，手动添加自定义分隔符：

struct ContentView: View {
    var numbers = 1...10
    var body: some View {
        List
        {
            Section("Images") {
                ForEach(numbers, id: \.self) { number in
                    HStack {
                        Image(systemName: "\(number).circle")
                        Text(String(number))
                    }
                    .listRowSeparator(.hidden) // 隐藏系统分隔符
                    .overlay( // 添加自定义分隔符
                        Rectangle()
                            .frame(height: 0.5)
                            .foregroundColor(.separator),
                        alignment: .bottomLeading
                    )
                }
            }
            
            Section("Circles") {
                ForEach(numbers, id: \.self) { number in
                    HStack {
                        ZStack {
                            Circle()
                                .strokeBorder(.black, lineWidth: 2)
                                .frame(width: 20, height: 20)
                            Text(String(number))
                                .font(.caption)
                        }
                        Text(String(number))
                    }
                    .listRowSeparator(.hidden)
                    .overlay(
                        Rectangle()
                            .frame(height: 0.5)
                            .foregroundColor(.separator),
                        alignment: .bottomLeading
                    )
                }
            }
        }
        .listRowInsets(EdgeInsets())
        .padding()
    }
}

这种方式可以完全控制分隔符的位置、颜色和高度，适合需要统一自定义列表样式的场景。

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