iOS 16导致列表行分隔线出现问题

Question

我有一个包含1个或多个行的章节标题列表。

自从更新到iOS 16后，行分隔线已经被推到了右侧（如第一张截图所示）。

在 iOS 15.7 上运行时，行分隔符是正常的（如第二张截图所示）。

我的应用程序的最低目标操作系统是iOS 15.5。

以下是我的代码（为了简洁只包含了第一部分标题）：

var videoGuideRight: CGFloat {
    switch UIDevice.current.name {
    case "iPhone SE (1st generation)", "iPod touch (7th generation)":
        return 0.18
    default:
        return 0.2
    }
}

var contactRight: CGFloat {
    switch UIDevice.current.name {
    case "iPhone SE (1st generation)", "iPod touch (7th generation)":
        return 0.04
    default:
        return 0.12
    }
}

var contactLeft: CGFloat {
    switch UIDevice.current.name {
    case "iPhone SE (1st generation)", "iPod touch (7th generation)":
        return 0.255
    default:
        return 0.27
    }
}

var contactButtonWidth: CGFloat {
    switch UIDevice.current.name {
    case "iPhone SE (1st generation)", "iPod touch (7th generation)":
            return 1/4.25
    default:
        return 1/5
    }
}

var contactFrameWidth: CGFloat {
    switch UIDevice.current.name {
    case "iPhone SE (1st generation)", "iPod touch (7th generation)":
        return 0.175
    default:
        return 0.15
    }
}

var body: some View {
    NavigationView {
        VStack {
            List {
                Section(header: Text("Support")) {
                    HStack {
                        Image("about")
                        Text("About")
                            .font(.system(size: 15))
                            .frame(width: UIScreen.main.bounds.width * 0.65, height: 15, alignment: .center)
                        NavigationLink(destination: AboutView()) { EmptyView() }
                    }
                    HStack {
                        Image("userGuide")
                        Text("Handbook")
                            .font(.system(size: 15))
                            .frame(width: UIScreen.main.bounds.width * 0.65, height: 15, alignment: .center)
                        NavigationLink(destination: UserGuideView()) { EmptyView() }
                    }
                    HStack {
                        Image("videoGuide")
                        Link(destination: URL(string: "https://www.tirnaelectronics.co.uk/polylingo-guide")!) { }
                        Spacer().frame(width: UIScreen.main.bounds.width * 0.04, height: nil, alignment: .center)
                        Text("Video Guide")
                            .font(.system(size: 15))
                            .frame(width: UIScreen.main.bounds.width * 0.3, height: 15, alignment: .leading)
                        Spacer().frame(width: UIScreen.main.bounds.width * videoGuideRight, height: nil, alignment: .center)
                    }
                    HStack {
                        Image("contact")
                        Spacer().frame(width: UIScreen.main.bounds.width * contactLeft, height: nil, alignment: .center)
                        Text("Contact")
                            .font(.system(size: 15))
                            .frame(width: UIScreen.main.bounds.width * contactFrameWidth, height: 15, alignment: .center)
                        Spacer().frame(width: UIScreen.main.bounds.width * contactRight, height: nil, alignment: .center)
                        Text("E-mail")
                             .fontWeight(.bold)
                             .frame(width: screenSize.width * contactButtonWidth, height: 20, alignment: .center)
                             .font(.footnote)
                             .padding(8)
                             .background(Color.systemBlue)
                             .cornerRadius(5)
                             .foregroundColor(.white)
                             .overlay(
                                 RoundedRectangle(cornerRadius: 5)
                                     .stroke(Color.systemBlue, lineWidth: 2)
                             )
                             .onTapGesture{ mailto() }
                    }
                }
            }
            .navigationBarTitle("More", displayMode: .inline).opacity(0.8)
            .listStyle(InsetGroupedListStyle())
            .background(Color.init(.systemGroupedBackground))
            
            if resetScoresPresented {
                ResetScoresAlert(isShown: $resetScoresPresented, title: "Are you sure?", message: "All test progress will be lost.  This cannot be undone!", onOK: { reset in
                    if reset {
                        resetTests()
                    }
                })
            }
            if noEmailAlertPresented {
                NoEmailAlert(showAlert: noEmailAlertPresented)
            }
        }
    }
}

- Tirna

---

屏幕截图太糟糕了，我什么都看不清楚，太暗太模糊了。 - workingdog support Ukraine

@workingdogsupportUkraine 我已经将截图更改为浅色模式，并将它们放大，以便它们不会模糊。 - Tirna

Answer 1

我刚遇到了同样的问题。试着使用

.alignmentGuide(.listRowSeparatorLeading) { _ in 0 }

针对你的章节（来源：https://sarunw.com/posts/swiftui-list-row-separator-insets/）

- finebel

---

看看我对自己问题的回答。我从苹果那里得到了一个解释，但在他们回复之前找到了一个临时解决方法！ - Tirna

Answer 2

@finebel 感谢您的建议！我从苹果那里得到了以下回复：

在 iOS 16 及更高版本中，默认情况下，如果存在文本，则列表行分隔符与每行中的前导文本对齐。这是设计上的。如果您想覆盖此外观以匹配 iOS 15 及更早版本，请考虑使用以下 API，该 API 也在 iOS 16 中引入：

SwiftUI：HorizontalAlignment - listRowSeparatorLeading https://developer.apple.com/documentation/swiftui/horizontalalignment/listrowseparatorleading

您还需要在 Swift 中使用可用性属性，以确保项目仍然可以编译为 iOS 15：

Swift 编程语言：属性 https://docs.swift.org/swift-book/ReferenceManual/Attributes.html

我发现通过使用：Text("") 来解决问题。

所以：

HStack {
    Text("")
    Image("\(language.name ?? "")")
    Text(language.name ?? "")
        .navigationTextFormatter()
}

- Tirna