如何在 VStack 中水平居中視圖

Question

我試圖提出這樣的觀點：

我有一些代碼可以制作一個三角形

struct Triangle: View {

    @State var height: CGFloat = 300
    @State var width: CGFloat = 300

    var body: some View {
        Path { path in
            path.move(to: CGPoint(x: 0, y: 0))
            path.addLine(to: CGPoint(x: width / 2.0, y: height))
            path.addLine(to: CGPoint(x: width, y: 0))
        }
    }
}

struct Triangle_Previews: PreviewProvider {
    static var previews: some View {
        Triangle(height: 200, width: 300)
            .previewLayout(.sizeThatFits)
    }
}

這看起來不錯：

但是，我無法在垂直堆棧中將三角形居中。 我已經注釋掉了我失敗的嘗試。

import SwiftUI

struct AccentView: View {

   //  var proxy: GeometryProxy!

    var body: some View {
        VStack(
         //   alignment: .center,
            spacing: 0
        ) {
            EmphasizeButton()
            Triangle(height: 10, width: 10)
                //.frame(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                //.alignmentGuide(.center)
                // .padding([.leading, .trailing])
//                .alignmentGuide(.center, computeValue: {
//                    _ in return -self.proxy.size.width / 2.0
//                })
                .foregroundColor(.green)
        }
    }
}

struct AccentView_Previews: PreviewProvider {
    static var previews: some View {
        AccentView()
    }
}

這是我的結果：

Answer 1

我認為將Triangle作為Shape並為其定義frame會更好。 現在，它正在擴展以占用可用寬度：

struct Triangle : Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            path.move(to: CGPoint(x: 0, y: 0))
            path.addLine(to: CGPoint(x: rect.size.width / 2.0, y: rect.size.height))
            path.addLine(to: CGPoint(x: rect.size.width, y: 0))
        }
    }
}

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center, spacing: 0) {
            Rectangle()
                .foregroundColor(.green)
                .frame(height: 30)
            Triangle().frame(width: 10, height: 10)
            .foregroundColor(.green)
        }
    }
}

使用alignment: .center完成水平居中 - 您也可以使用帶有Spacer的HStack來完成：

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            Rectangle()
                .foregroundColor(.green)
                .frame(height: 30)
            HStack {
                Spacer()
                Triangle().frame(width: 10, height: 10)
                    .foregroundColor(.green)
                Spacer()
            }
        }
    }
}