LoginSignup
0
1

More than 3 years have passed since last update.

SwiftUIでリスト表示する際に画像が黒く塗り潰される

Last updated at Posted at 2021-03-02

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の実機で実行すると以下の様に画像が黒く塗り潰されてしまいました。
IMG_1830.PNG

iOS13以下だとImageを定義する際に.renderingMode(.original)を付けなればならない様です。
以下の様にresizableの後ろにつけることによって画像が正常に表示されました。
※リストの外に画像を配置した場合は.renderingModeを付けなくても正常に表示されるのですが、リストの中に画像を配置すると上のように黒く塗り潰されてしまう様です。


Image(uiImage: UIImage(named: "otaru")!)
                            .resizable()
                            .renderingMode(.original)
                            .scaledToFill()
                            .frame(width: 60, height: 60)
                            .clipped()
                            .cornerRadius(4.0)

IMG_1831.PNG

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1