SwiftUI的Label样式定义：图标在右、垂直显示等

Label是SwiftUI里自带的视图，除了官方提供的默认样式使用，我们可以自己定义各种显示方式，Label是一个超级实用的小视图。

一、初始化

通常情况下，我们使用下面的方式初始化使用Label。

struct ContentView: View {
    var body: some View {       
        Label("心有所属", systemImage: "heart.fill") // SF Symbol
        Label("ECG", image: "ecg")//ecg图片来自app bundle
    }
}

通过向初始化程序传递两个参数来创建标签。第一个是我们可以作为普通字符串或LocalizedStringKey传递的标题。第二个是图像、来自 SF Symbols 集合的系统图像或来自应用程序包的自定义图像。

另一个初始化器重载允许使用两个@ViewBuilder闭包来定义标签来构建标签视图。

struct ContentView: View {
    var body: some View {
        Label {
            Text("网络人")
        } icon: {
            Image(systemName: "heart")
        }
    }
}

我喜欢Label视图的主要方面是它如何处理可访问性。它将图像和标题结合在一个无障碍元素中，并使用标题作为整个视图的无障碍标签。这通常是我们在使用带有图像和描述该图像的文本的堆栈时想要实现的目标。

二、自定义样式

SwiftUI 为我们提供了LabelStyle协议来为我们的标签实现不同的样式选项。SwiftUI 已经提供了三种开箱即用的样式选项。您可能已经熟悉 SwiftUI 中的样式协议，因为我已经在我的博客中多次介绍过它:http://www.55mx.com/ios/124.html。

SwiftUI 为我们提供了DefaultLabelStyle、IconOnlyLabelStyle和TitleOnlyLabelStyle样式选项，可以开箱即用。默认的一个是DefaultLabelStyle，它显示标题和图像。IconOnlyLabelStyle仅显示图像，而TitleOnlyLabelStyle仅显示标题。

struct ContentView: View {
    var body: some View {
        Label("网络人", systemImage: "heart.fill")
            .labelStyle(IconOnlyLabelStyle())
        Label("55mx.com", image: "ecg")
            .labelStyle(TitleOnlyLabelStyle())
    }
}

样式协议的伟大之处在于您可以创建自己的实现并按照您需要的方式放置项目。让我们尝试构建另一种样式，根据当前的可访问性类别将图标和标题放置在水平或垂直堆栈中。

//定义一个根据环境变量变化的LabelStyle
struct AccessibleLabelStyle: LabelStyle {
    //当前动态类型大小。
    @Environment(.dynamicTypeSize) var dynamicTypeSize

    @ViewBuilder
    func makeBody(configuration: Configuration) -> some View {
        if sizeCategory.isAccessibilityCategory {
            VStack {
                configuration.icon
                configuration.title
            }
        } else {
            HStack {
                configuration.icon
                configuration.title
            }
        }
    }
}
//在视图里使用LabelStyle
struct ContentView: View {
    var body: some View {
        Button(action: {}) {
            Label("Heart Rate", systemImage: "heart.fill")
        }.labelStyle(AccessibleLabelStyle())
    }
}

正如您在上面的示例中看到的，我们创建了一个名为AccessibleLabelStyle的自定义标签样式。它使用环境来适当地读取大小类别和布局项目。我们使用labelStyle修饰符来设置和共享使用环境的标签样式。

系统自带的图标都是在左侧，下面定义一个比较简单的图标在右侧的样式：

//Label 图标在右边的样式
struct IconInRight: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.title //文本信息
            configuration.icon //图标
        }
    }
}

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/167