SwiftUI Label如何实现图标与多行文本垂直居中对齐

原因说明 #

原生SwiftUI Label 默认采用首行文本基线对齐规则，单独修改Image的alignmentGuide仅调整了图标自身的对齐锚点，没有改变Label全局的布局对齐逻辑，因此无法实现图标与多行文本整体垂直居中的效果。

可行解决方案 #

方案1：自定义LabelStyle（推荐，复用性最高） #

自定义Label样式显式指定内部元素的对齐规则，后续所有同类需求可直接复用该样式：

// 自定义居中对齐Label样式
struct CenteredIconLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        // 显式指定HStack对齐规则为垂直居中，spacing可根据需求调整
        HStack(alignment: .center, spacing: 8) {
            configuration.icon
            configuration.title
        }
    }
}

// 便捷调用扩展
extension LabelStyle where Self == CenteredIconLabelStyle {
    static var centeredIcon: Self { .init() }
}

使用时直接给目标Label添加样式即可：

Label {
    Text("Test fdasf \n adfsa dsfsd f asdf \n asd fasd fads sad fda")
} icon: {
    Image(systemName: true ? "checkmark.circle.fill" : "circle")
}
.labelStyle(.centeredIcon)

方案2：手动用HStack实现等价布局 #

如果只有单一场景需要该效果，无需复用，可直接放弃原生Label的封装，手动写布局：

HStack(alignment: .center, spacing: 8) {
    Image(systemName: true ? "checkmark.circle.fill" : "circle")
    Text("Test fdasf \n adfsa dsfsd f asdf \n asd fasd fads sad fda")
}

两种方案最终都能实现图标与多行文本整体垂直居中的效果。

内容的提问来源于stack exchange，提问作者Godfather