概览

在用 SwiftUI Form 设计 App 界面时，最头疼的就是内部视图对齐的问题了。好不容易适配了 iOS 中的布局，到了 iPadOS 或 MacOS 上却变得一团糟。

有没有一劳永逸，简单方便的办法呢？

在这里插入图片描述

如上图所示：我们利用 SwiftUI 4.0 中新的 LabeledContent 视图完美解决了所有平台上视图对齐的问题。

在本篇博文中，我们就来聊聊如何实现它吧！😉

Let’s go！！！

旧式的 badge 对齐方式

从 SwiftUI 3.0（iOS 15+）开始，Apple 就为我们提供了 badge() 修改器方法来实现文本附加内容的对齐功能：

在这里插入图片描述

我们可以直接在视图上调用 badge() 方法来实现对齐：

Text("明天上班吗？").badge("绝对不上！")

badge() 方法可以产生与 LabeledContent 类似的效果，不过它的缺陷也很明显：对齐的内容只能是数字或文本。

在这里插入图片描述

万物皆可对齐：LabeledContent

岁月穿梭，时光荏苒，从 SwiftUI 4.0（iOS 16+）开始，Apple 推出了新的 LabeledContent 专门用于规划 Form 中的视图对齐。

在这里插入图片描述

我们可以利用 LabeledContent 实现任何视图在任意平台上的对齐，非常方便：

Form {
    LabeledContent("Name", value: "大熊猫侯佩")
    LabeledContent("Age", value: "121")
    
    LabeledContent(content: {
        Image(systemName: "house")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 100)
            .foregroundStyle(.blue.gradient)
            .shadow(radius: 5.0)
    }, label: {
        Text("Address")
    })
    
    Text("明天上班吗？").badge("绝对不上！")
    
    LabeledContent("免疫"){
        Toggle("", isOn: .constant(true))
    }
    
    LabeledContent {
            Text("5")
        } label: {
            Text("战斗力")
            Text("未变成超级赛亚人时")
        }
    
    LabeledContent {
            Text("1000w")
        } label: {
            Text("变成超级赛亚人时")
            Text("超二形态")
            Text("超三形态")
            Text("超四形态")
        }
    
    LabeledContent("变身口令") {
        TextField("默认口令吃葡萄不吐葡萄皮", text: .constant(""))
    }
    
    LabeledContent("核武器启动密码") {
        SecureField("", text: .constant("123456789"))
    }
    
    LabeledContent {
        Slider(value: .constant(0.5))
    } label: {
        Text("Brightness")
    }
}