列出 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)
            }
        }
    }
}

Answer 1

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

.alignmentGuide(.listRowSeparatorLeading) { _ in 0 }

对于您的部分（来源：https://sarunw.com/posts/swiftui-list-row-separator-insets/）

Answer 2

@finebel 谢谢你的建议！我收到苹果的以下回复：

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

SwiftUI：水平对齐 – 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()
}

Answer 3

另一种解决方案是您可以使用

.listRowSeparator

修饰符来扩展行分隔符