如何使 SwiftUI 文本多行文本对齐从顶部和中心开始

Posted 2023-04-13

【中文标题】如何使 SwiftUI 文本多行文本对齐从顶部和中心开始

【英文标题】：How to make SwiftUI Text multilineTextAlignment start from Top and Center

【发布时间】：2021-05-27 09:56:14

【问题描述】：

如何在 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)

【参考方案1】：

对于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)

结果：