swiftui - SwiftUI は、Divider が HStack で垂直方向に拡張するのを防ぎます

Question

UIHostingController を使用して UIKit コードから表示するアラートポップアップのようなものを作成するために SwiftUI を使用しています。ビューは次のようになります。

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は、別のスタックオーバーフローの質問で見つけたものです。HStack の両側でテキストを中央揃えにします。

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

このように見えます。ごみ。

.fixedSize()仕切りの上に置くと、これが行われます。ひどいわけではありませんが、仕切りは見栄えが悪く、ボタンのサイズまで拡大しません.

score 13 · Accepted Answer

これは、その人工的な拡張なしで、可能な単純化された代替のデモです。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

より適切な視覚的フィードバックを提供するよりも、

swiftui - SwiftUI は、Divider が HStack で垂直方向に拡張するのを防ぎます

3 に答える 3

Related

Reference