如何以这种方式定位文本和按钮

Question

这是我尝试做的一个例子。链接到要实现的设计图像。我不确定如何在swiftui中以这种方式将按钮和文本定位在屏幕顶部。或者，我想我可以在线使用导航栏并自定义它，但我不确定。

var body: some View {
VStack (alignment: .trailing) {
HStack(spacing:10) {
Button(action: {

}) {
Image(systemName: "line.horizontal.3")
.font(.headline)
}
Text("WeCollab")
.foregroundColor(.white)
.font(.title)
//padding(.leading,40)
Spacer()
}
.padding(.top,UIApplication.shared.windows.first?.safeAreaInsets.top)
.background(customPurpleColour)
Spacer()
}
.edgesIgnoringSafeArea(.top)
}
}

Answer 1

看起来你走在了正确的轨道上。为了保持标题居中，制作ZStack似乎更容易。菜单按钮得到了它自己的.leading对齐的VStack，然后标题就在上面了。

edgesIgnoringSafeArea和padding可以简化，这样您就不必使用屏幕大小的安全区域。

struct ContentView: View {
var body: some View {
VStack {
ZStack {
VStack {
Button(action: { }) {
Image(systemName: "line.horizontal.3")
.font(.headline)
}.padding(.leading)
}.frame(maxWidth: .infinity, alignment: .leading)

Text("WeCollab")
.foregroundColor(.white)
.font(.title)
}
.background(Color.purple.edgesIgnoringSafeArea(.top))

Spacer() //other content goes here
}
}
}