事象

Widget付きiOSアプリをSwift言語で開発中

Widgetの背景色を設定しようとしてもうまく設定できない。

コードこんな感じ

// MARK: - ビュー
struct GarbageWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        ZStack {
            Color("WidgetBackground")
                    .ignoresSafeArea()
            HStack{
                VStack(alignment: .leading) {
                    // ウィジェットの表示日付(例: 〇〇日)
                    Text(formatDate(entry.date))
                        .alignmentGuide(.leading) { d in d[.leading] }
                    LineView()
                    
                    if let garbageStrList = entry.garbageStrList, !garbageStrList.isEmpty {
                        // リスト内のデータを表示するコード
                        
                        ForEach(garbageStrList, id: \.self) { model in
                            Text(model)
                            
                        }
                    } else {
                        Text("ゴミの日はありません")
                    }
                }
                
                
                if let firstImage = entry.garbageImgList?.first {
                    firstImage
                        .resizable()
                        .frame(width: 100, height: 100)
                } else {
                    Text("データ取れてない")
                }
            }
        }
    }
}

Zstackの配下に色指定したんですが、こんな状態

縁が色指定できない。

原因

どうやらiOS17からWidgetの背景色の設定の方法が変わったみたい。

解決策

ZStackの色指定と合わせて、StaticConfigurationの中で色を指定する

Struct GarbageWidget: Widget {
    let kind: String = "GarbageWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            if #available(iOS 17.0, *) {
                GarbageWidgetEntryView(entry: entry)
//                    .containerBackground(.fill.tertiary, for: .widget)//ここを
                    .containerBackground(Color("WidgetBackground"), for: .widget)//こうする

                
            } else {
                GarbageWidgetEntryView(entry: entry)
                    .padding()
                    .background()
            }
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

ちなみにこの構造体はWidget追加した際に自動生成されるやつです。

containerBackgroundの内容変更することで全体の色が指定できました。

ほな、また〜

投稿者 nikudango

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です