![](/img/trans.png)
[英]How to: Layout in Swift UI using ZStack, VStack, HStack
[英]How to center button inside VStack Swift UI
var body: some View {
VStack(alignment: .leading) {
Text("Title")
.bold()
.font(Font.custom("Helvetica Neue", size: 36.0))
...
Button(action: {}){
Text("Create")
.bold()
.font(Font.custom("Helvetica Neue", size: 24.0))
.padding(20)
.foregroundColor(Color.white)
.background(Color.purple)
.cornerRadius(12)
}
}.padding(20)
}
我想要這兩個特定元素的不同對齊方式。 標題必須有一個前導對齊,但另一方面按鈕位於中心。 現在我將 VStack 對齊設置為領先。 我對 Swift UI 不太熟悉,所以第一個想法是使用幾個具有不同對齊方式的垂直堆棧,但我認為它可以更容易地完成。 如果我向按鈕添加對齊指南,它也不起作用。
我會在下面的演示中使用包含的HStack
var body: some View {
VStack(alignment: .leading) {
Text("Title")
.bold()
.font(Font.custom("Helvetica Neue", size: 36.0))
HStack {
Spacer()
Button(action: {}){
Text("Create")
.bold()
.font(Font.custom("Helvetica Neue", size: 24.0))
.padding(20)
.foregroundColor(Color.white)
.background(Color.purple)
.cornerRadius(12)
}
Spacer()
}
}.padding(20)
}
您可以為此使用GeometryReader
:
一個容器視圖,將其內容定義為其自身大小和坐標空間的函數。
https://developer.apple.com/documentation/swiftui/geometryreader
GeometryReader { geometry in
VStack(alignment: .leading) {
Text("Title")
.bold()
.font(Font.custom("Helvetica Neue", size: 36.0))
Button(action: {
}) {
Text("Create")
.bold()
.font(Font.custom("Helvetica Neue", size: 24.0))
.padding(20)
.foregroundColor(Color.white)
.background(Color.purple)
.cornerRadius(12)
.frame(width: geometry.size.width / 2, height: geometry.size.height / 2, alignment: .center)
}
}.padding(20)
}
VStack
一種方法是使用具有中心對齊和 maxWidth 的VStack
。
VStack(alignment: .leading) {
Text("Title")
.bold()
.font(Font.custom("Helvetica Neue", size: 36.0))
VStack(alignment: .center) {
Button(action: {}){
Text("Create")
.bold()
.font(Font.custom("Helvetica Neue", size: 24.0))
.padding(20)
.foregroundColor(Color.white)
.background(Color.purple)
.cornerRadius(12)
}
}.frame(maxWidth: .infinity)
}.padding(20)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.