如何使 SwiftUI Text multilineTextAlignment 从顶部和中心开始
How to make SwiftUI Text multilineTextAlignment start from Top and Center
如何使图像和文本对齐与 SwiftUI LazyVGrid 中的其他 3 个对齐方式相同,如下图所示?
我认为问题是如果文本是多行的,如何使文本从顶部开始。在 Android 中我可以使用 gravity="top|center" 但在 SwiftUI 中我使用 .multilineTextAlignment(.center) 但结果并不像我预期的那样。
这是我刚刚在我的代码中尝试的内容:
LazyVGrid(columns: gridItemLayout, spacing: 0) {
ForEach((0...7), id: \.self) { i in
VStack {
RemoteImageView(url: vm.listService[i].image_uri)
.frame(width: 100, height: 100)
Text(vm.listService[i].name)
.font(.body)
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity, alignment: .center)
}
}
}
.padding(.horizontal, 25.0)
对于Text
的框架,您需要:
- 将
maxHeight
设置为.infinity
,这样它也可以垂直展开
- 将
alignment
设置为 .top
,使其与顶部对齐
let names = ["Hi", "Hello world", "Long long text"]
let gridItemLayout = [
GridItem(.adaptive(minimum: 80))
]
var body: some View {
LazyVGrid(columns: gridItemLayout, spacing: 0) {
ForEach((0...7), id: \.self) { i in
VStack {
Image(systemName: "folder")
.frame(width: 100, height: 100)
.background(Color.green)
Text(names.randomElement() ?? "")
.font(.body)
.multilineTextAlignment(.center)
/// here!
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
}
}
}
.padding(.horizontal, 25.0)
}
结果:
如何使图像和文本对齐与 SwiftUI LazyVGrid 中的其他 3 个对齐方式相同,如下图所示?
我认为问题是如果文本是多行的,如何使文本从顶部开始。在 Android 中我可以使用 gravity="top|center" 但在 SwiftUI 中我使用 .multilineTextAlignment(.center) 但结果并不像我预期的那样。
这是我刚刚在我的代码中尝试的内容:
LazyVGrid(columns: gridItemLayout, spacing: 0) {
ForEach((0...7), id: \.self) { i in
VStack {
RemoteImageView(url: vm.listService[i].image_uri)
.frame(width: 100, height: 100)
Text(vm.listService[i].name)
.font(.body)
.multilineTextAlignment(.center)
.frame(maxWidth: .infinity, alignment: .center)
}
}
}
.padding(.horizontal, 25.0)
对于Text
的框架,您需要:
- 将
maxHeight
设置为.infinity
,这样它也可以垂直展开 - 将
alignment
设置为.top
,使其与顶部对齐
let names = ["Hi", "Hello world", "Long long text"]
let gridItemLayout = [
GridItem(.adaptive(minimum: 80))
]
var body: some View {
LazyVGrid(columns: gridItemLayout, spacing: 0) {
ForEach((0...7), id: \.self) { i in
VStack {
Image(systemName: "folder")
.frame(width: 100, height: 100)
.background(Color.green)
Text(names.randomElement() ?? "")
.font(.body)
.multilineTextAlignment(.center)
/// here!
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
}
}
}
.padding(.horizontal, 25.0)
}
结果: