我正在尝试使用SwiftUI在watchOS上构建一个简单的用户界面,其中有两个信息并排放置在一个按钮上方。
我希望每一边(表示为VStack
在HStack
内)占用可用宽度的一半(因此在黄色父视图中是均匀的50/50分割),以|字符在按钮中心为界。
我希望Short和Longer!!!文本分别在每个侧边的50%内居中显示。
我从以下代码开始,以便将元素放置在正确的位置并显示不同堆栈的边界:
var body: some View {
VStack {
HStack {
VStack {
Text("Short").font(.body)
}
.background(Color.green)
VStack {
Text("Longer!!!").font(.body)
}
.background(Color.blue)
}
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.yellow)
Button (action: doSomething) {
Text("|")
}
}
}
给我这个结果:
![起点](https://istack.dev59.com/nSl4i.webp)
var body: some View {
VStack {
HStack {
VStack {
Text("Short").font(.body)
}
.relativeWidth(0.5)
.background(Color.green)
VStack {
Text("Longer!!!").font(.body)
}
.relativeWidth(0.5)
.background(Color.blue)
}
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.yellow)
Button (action: doSomething) {
Text("|")
}
}
}
但这是我得到的结果: {{link1:
![unexpected widths](https://istack.dev59.com/6rz77.webp)
我该如何使用SwiftUI获得我想要的行为?
更新:在更仔细地查看SwiftUI文档后,我发现这个示例设置了一个框架,然后相对于该框架定义了一个宽度,所以也许我不应该以这种方式使用
relativeWidth
?通过以下代码,我离我想要的目标更近了一步:
var body: some View {
VStack {
HStack {
VStack {
Text("Short").font(.body)
}
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.green)
VStack {
Text("Longer!!!").font(.body)
}
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.blue)
}
.frame(minWidth: 0, maxWidth: .infinity)
.background(Color.yellow)
Button (action: doSomething) {
Text("|")
}
}
}
生成以下结果: 现在,我正在努力弄清楚是什么在两个之间创建了那个额外的空间。到目前为止,尝试去除填充和忽略安全区域似乎都没有影响它。
HStack(spacing: 0) { .. }
来覆盖它)。 - Tomáš KafkaHStack(spacing: 0) { .. }
来覆盖它)。 - undefined