SwiftUI でButtonの中のImageの色が変えられない

Buttonの中にTextやImageを内包するとボタンが青色になってしまう。

実行環境

• Xcode 11.6
• iOS 13.6

問題の挙動

やりたいこととしては、下図のように目のアイコンボタンをタップして、ONの時は赤色、OFFの時はグレーの表示にしたい。

UIの想定としてはONになってればパスワードを表示して、OFFになっていればパスワードを隠すようなことをしたい。ログイン画面や新規登録画面で多用する予定なので、このようなViewを作成した。

SwiftUIではTint Colorの代わりにcolorMultiply Modifierを使うと聞いた。

struct EyeView: View {
    
    @Binding var showPassword: Bool
    
    var body: some View {
        Button(action: { self.showPassword.toggle() }) {
            Image(uiImage: UIImage(named: "eye")!)
                .renderingMode(.template)
                .colorMultiply(self.showPassword ? Color.red : Color.gray)
        }
    }
}

しかし、このコードではButtonに内包されるImageは青色になってしまう。

解決編

画像のRenderingModeを Template にする。

下記のようにforegroundColor Modifierで色を指定したところ、意図通りにアイコンの色が変わってくれた。

import SwiftUI

struct EyeView: View {
    
    @Binding var showPassword: Bool
    
    var body: some View {
        Button(action: { self.showPassword.toggle() }) {
            Image(uiImage: UIImage(named: "eye")!)
                .foregroundColor(self.showPassword ? Color.red : Color.gray)
        }
    }
}

別解。

import SwiftUI

struct EyeView: View {
    
    @Binding var showPassword: Bool
    
    var body: some View {
        Button(action: { self.showPassword.toggle() }) {
            Image(uiImage: UIImage(named: "eye")!)
                .accentColor(self.showPassword ? Color.red : Color.gray)
        }
    }
}