SwiftUI 均等分布，内容对齐

Posted 2023-02-23

【中文标题】SwiftUI 均等分布，内容对齐

【英文标题】：SwiftUI equal distribution with content alignment

【发布时间】：2021-02-10 10:14:37

【问题描述】：

我想要三个标签，每个标签都有一个字幕并平均分配。

第一个标题/副标题应前导对齐（见下面的绿色边框） 中心标题/副标题应居中（见下方蓝色边框） 最后一个标题/副标题应尾随对齐。 （见下方红色边框） 只要宽度相等，它们都应该尽可能宽

这是我需要的草图：

这是我可以使用的 SwiftUI 视图

问题是我无法根据需要对齐标题。

这是我当前无法工作的代码

import SwiftUI

struct MyView: View 
    public var body: some View 
        HStack(spacing: 0) 
            cellView(top: "Leading",
                     bottom: "subtitle",
                     alignment: .leading)
                .border(Color.green)



            cellView(top: "Centered",
                     bottom: "subtitle",
                     alignment: .center)
                .border(Color.blue)



            cellView(top: "Trailing",
                     bottom: "subtitle",
                     alignment: .trailing)
                .border(Color.red)
        
            .padding()
    

    private func cellView(top: String, bottom: String, alignment: HorizontalAlignment) -> some View 
        VStack(alignment: alignment, spacing: 0) 
            Text(top)
                .frame(maxWidth: .infinity)
                .font(.subheadline)
                .lineLimit(1)
                .border(Color.black)

            Text(bottom)
                .font(.subheadline)
                .lineLimit(1)
                .border(Color.black)
        

        .border(Color.black)
    


struct MyView_Previews: PreviewProvider 
    static var previews: some View 
        MyView()
    

【参考方案1】：

您可以让它们都喜欢扩展，然后直接对齐其框架的内容，而不是尝试对齐堆栈的子视图（请注意，由于对齐选项在 HorizontalAlignment 和 Alignment 之间匹配，您无需更改在你的body):

private func cellView(top: String, bottom: String, alignment: Alignment) -> some View 
    VStack(spacing: 0) 
        Text(top)
            .frame(maxWidth: .infinity, alignment: alignment)
            .font(.subheadline)
            .lineLimit(1)
            .border(Color.black)

        Text(bottom)
            .frame(maxWidth: .infinity, alignment: alignment)
            .font(.subheadline)
            .lineLimit(1)
            .border(Color.black)
    
    .border(Color.black)

产生期望的结果

---

PS：您甚至可以通过对常用修饰符进行分组来简化 cellView：

private func cellView(top: String, bottom: String, alignment: Alignment) -> some View 
    VStack(spacing: 0) 
        Group 
            Text(top)
                .font(.subheadline)
            Text(bottom)
                .font(.subheadline)
        
        .frame(maxWidth: .infinity, alignment: alignment)
        .lineLimit(1)
        .border(Color.black)
    
    .border(Color.black)