如何使图像和文本对齐与 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)
}
结果:关于gridview - 如何使 SwiftUI 文本多行文本对齐从顶部和中心开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66361758/