iOS 小组件开发第四篇：小组件的尺寸 - 知乎

这里每天分享一个 iOS 的新知识，快来关注我吧

前言

前三天我们讲了小组件的基础和实战了一个简单的项目，感兴趣可以去看一下。

iOS 小组件开发第一篇：基础介绍

iOS 小组件开发第二篇：时间线

iOS 小组件开发第三篇：实战

之前忘了讲小组件的尺寸，今天特意补一篇。

小组件尺寸

目前小组件支持设置基础的三个尺寸，即：小、中、大。

设置方式是在 Widget 上添加 supportedFamilies 属性：

less 复制代码

struct MyWidget: Widget {
    let kind: String = "MyWidget" // 唯一标识

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            MyWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("这是小组件的名称")
        .description("这是小组件的描述.")
        .supportedFamilies([.systemSmall, .systemMedium, .systemLarge]) // 支持小、中、大尺寸
    }
}

从 iOS 15 开始 ，支持 systemExtraLarge 超大型号的组件，专门在 iPad 上使用的。

从 iOS 16 开始 ，支持 accessoryCircular 、 accessoryRectangular 和 accessoryInline 类型，这几种小部件可以用在手表中，也可以出现在 iOS 的锁定屏幕上（这个会在后面的文章中详细介绍）。

在 Widget View 中可以从环境变量（Environment）中获取当前的小组件类型，获取之后以做不同的 UI 适配：

java 复制代码

struct MyWidgetEntryView : View {
    // 环境变量获取当前的小组件类型
    @Environment(\.widgetFamily) var family: WidgetFamily
}

然后我们可以写个计算属性，把小组件类型渲染出来：

dart 复制代码

var familyString: String {
    switch family {
    case .systemSmall:
        return "小组件"
    case .systemMedium:
        return "中等组件"
    case .systemLarge:
        return "大号组件"
    case .systemExtraLarge:
        return "超大号组件"
    case .accessoryCircular:
        return "圆形组件"
    case .accessoryRectangular:
        return "方形组件"
    case .accessoryInline:
        return "内联小组件"
    @unknown default:
        return "其他类型小组件"
    }
}

最后在 View 上显示：

scss 复制代码

var body: some View {
    
    VStack(spacing: 10) {
        Image(systemName: entry.time.icon)
            .imageScale(.large)
            .fontWeight(.medium)
            .foregroundColor(.red)
        HStack {
            Text("现在是:")
            Text(entry.time.text)
        }
        .font(.subheadline)
        Text("这是:\(familyString)")
    }
}

最后看下效果：

这里每天分享一个 iOS 的新知识，快来关注我吧

本文同步自微信公众号 "iOS新知"，每天准时分享一个新知识，这里只是同步，想要及时学到就来关注我吧！