如何解决如何在 VStack 中为子视图排列底部文本
var body: some View {
vstack(spacing: 0) {
HStack(spacing: 0) {
Rectangle()
.fill(Color.green)
.overlay(
vstack {
Text("11 / 11 /11 /111/1 111")
.font(.system(size: 100.0))
Text("data")
}
)
Rectangle()
.fill(Color.red)
.overlay(
vstack {
Text("111 / 111")
.font(.system(size: 100.0))
Text("data 2")
}
)
}
}
}
我如何让文本 data
与文本 data 2
对齐,即使它上面的视图(文本)要大得多,文本 "11 / 11 /11 /111/1 111"
,并导致底部视图将进一步向下推?我将如何阻止这种情况发生?
我还应该提到我不希望 "11 / 11 /11 /111/1 111"
被截断。
编辑:如果该长文本与其下方的文本相比具有较小的字体大小,则没关系。我也尝试过 minimumScaleFactor
,但底部文本视图仍然相对于带有长文本的顶部视图进行推送。
这是我想要完成的。
解决方法
我会简单地将 Spacer()
放在 Text()
之间的 VStack()
之间。
struct ContentView: View {
var body: some View {
VStack(spacing: 0) {
HStack(spacing: 0) {
Rectangle()
.fill(Color.green)
.overlay(
VStack {
Text("11 / 11 /11 /111/1 111")
.font(.system(size: 100.0))
Spacer() // add Spacer() here
Text("data")
.padding() // I padded it so this was up a bit from the bottom. Adjust as necessary.
}
)
Rectangle()
.fill(Color.red)
.overlay(
VStack {
Text("111 / 111")
.font(.system(size: 100.0))
Spacer() // add Spacer() here
Text("data 2")
.padding() // I padded it so this was up a bit from the bottom. Adjust as necessary.
}
)
}
}
}
}
这段代码让你知道:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。