iOS 위젯을 지원하는 데 알고 싶었던 점

작업에서 위젯을 지원할 때 필요했던 몇 가지 발견이 있었기 때문에 요약하십시오.
앞으로 위젯을 지원하는 사람의 도움이되면

사이즈 지정

supportedfamilies 로 지정

struct SampleWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: "sample", provider: SampleWidget.Provider()) { entry in
            SampleWidgetEntryView(entry: entry)
        }
        .supportedFamilies([.systemSmall, .systemMedium])
        .configurationDisplayName("displayName")
        .description("description")
    }
}

WidgetBundle의 다중 위젯

WidgetBundle 에서 다중 패턴 위젯 구성 가능
@main 어노테이션을 잊지 않고

@main
struct Widgets: WidgetBundle {
    var body: some Widget {
        Widget1()
        Widget2()
        Widget3()
    }
}

Image의 둥근

위젯 자체가 둥근이므로 이미지도 둥글게하는 것이 정석이라고 생각하기 때문에clipshape 와 RoundedRectangle 에서 가능

iOS14에서 등장했다.

  struct ImageView: View {
        let image: UIImage
        var body: some View {
           Image(uiImage: image)
                .resizable()
                .scaledToFit()
                .clipShape(RoundedRectangle(cornerRadius: 8))
        }
    }

미리보기

라이트 모드, 다크 모드, 플레이스홀더, 사이즈 차이를 단번에 확인하고 싶기 때문에

위젯 크기

previewContext.clipShape(ContainerRelativeShape()) 로 지정

라이트 모드, 다크 모드

colorScheme.previewContext(WidgetPreviewContext(family: .systemMedium)) 로 지정

자리 표시자
.environment(\.colorScheme, .light) 로 지정

struct SampleWidget_Previews: PreviewProvider {
    static var previews: some View {
        /// ライトモード
        SampleEntryView(entry: .init(date: Date())
            .previewContext(WidgetPreviewContext(family: .systemMedium))
            .environment(\.colorScheme, .light)
        /// ダークモード
        SampleEntryView(entry: .init(date: Date())
            .previewContext(WidgetPreviewContext(family: .systemMedium))
            .environment(\.colorScheme, .dark)
        /// プレースホルダー表示
        SampleEntryView(entry: .init(date: Date())
            .previewContext(WidgetPreviewContext(family: .systemMedium))
            .redacted(reason: .placeholder)
    }
}

Spacer의 minLength

doc 페이지

12ProMax에서 초대 SE까지의 레이아웃에 대응하지 않으면 안되며, .redacted(reason: .placeholder)
지정한 좌표분 최저한 스페이스를 취해, 묘화 영역에 여유가 있으면 자동으로 퍼져 주기 때문에 매우 편리!