SwiftUI 阻止 Divider 在 HStack 中垂直扩展

Question

我正在使用 SwiftUI 创建类似警报弹出窗口的东西，我使用 UIHostingController 从 UIKit 代码中呈现。 View 如下所示:

VStack(spacing: 0) {
    // Some text ...   

    HStack(spacing:0) {
        Button(action: self.onCancel) { Text("Cancel") }
           .padding().inExpandingRectangle().fixedSize(horizontal: false, vertical: true)

        // This divider is the problem
        Divider() // .fixedSize()

        Button(action: self.onDelete) {  Text("Delete") }
           .padding().inExpandingRectangle().fixedSize(horizontal: false, vertical: true)
    }
}.frame(minHeight: 0)

inExpandingRectangle 是我在另一个 stackoverflow 问题中找到的。它将 HStack 每一侧的文本居中。

extension View {
    func inExpandingRectangle() -> some View {
        ZStack {
            Rectangle().fill(Color.clear)
            self
        }
    }
}

它看起来像这样。垃圾。



如果我将 .fixedSize() 放在分隔符上，它就会这样做。并不可怕，但分隔器看起来很愚蠢，并且不会扩展到按钮的大小。

Answer 1

这是一个可能的简化替代的演示，没有那个人为的扩展。使用 Xcode 11.4/iOS 13.4 测试。

Divider() // or Rectangle().fill(Color.gray).frame(height: 1)
HStack {
    Button(action: {}) { Text("Cancel").fixedSize() }
        .padding().frame(maxWidth: .infinity)

    Divider() // or Rectangle().fill(Color.gray).frame(width: 1)

    Button(action: {}) {  Text("Delete").fixedSize() }
        .padding().frame(maxWidth: .infinity)

}.fixedSize(horizontal: false, vertical: true)

注意:还值得考虑自定义分隔线，例如

Rectangle().fill(Color.gray).frame(width: 1) // or any other color

可能会给出很多合适的视觉反馈，比如