SwiftUIでリストを作成した際に画像が黒く塗りつぶされてしまったので対応方法の覚書です。
以下の様な画像と名称のみのセルを持ったシンプルなリストを定義します。
struct ContentView: View {
var body: some View {
VStack {
List {
ForEach(0..<2, id: \.self) { index in
Button(action: {
print("タップ")
}) {
SpotCell()
}
}
}
}
}
}
struct SpotCell: View {
var body: some View {
HStack(alignment: .top) {
Spacer().frame(width: 20)
VStack(alignment: .leading) {
HStack(alignment: .top) {
VStack {
Spacer().frame(height: 16)
Image(uiImage: UIImage(named: "otaru")!)
.resizable()
.scaledToFill()
.frame(width: 60, height: 60)
.clipped()
.cornerRadius(4.0)
Spacer().frame(height: 16)
}
VStack(alignment: .leading) {
Spacer().frame(height: 16)
Text("小樽運河").font(.subheadline)
Spacer()
}
}
}
Spacer()
}
}
}
こちらiOS14以上で実行すると問題なく画像が表示されますが、iOS13の実機で実行すると以下の様に画像が黒く塗り潰されてしまいました。
iOS13以下だとImageを定義する際に.renderingMode(.original)を付けなればならない様です。
以下の様にresizableの後ろにつけることによって画像が正常に表示されました。
※リストの外に画像を配置した場合は.renderingModeを付けなくても正常に表示されるのですが、リストの中に画像を配置すると上のように黒く塗り潰されてしまう様です。
Image(uiImage: UIImage(named: "otaru")!)
.resizable()
.renderingMode(.original)
.scaledToFill()
.frame(width: 60, height: 60)
.clipped()
.cornerRadius(4.0)