【SwiftUI】テキストの色の変更方法を3パターン紹介

今回はテキストの色の変更方法を紹介します。

テキスト以外にもあらゆるパーツの色指定に使用できますので覚えておけば開発もスムーズに進められるはずです！

Colorで元々用意されている色にテキストの色を変更する方法
アトリビュートインスペクタでテキストの色を変更する
Colorを拡張してオリジナルの色を作る
まとめ
SwiftUI勉強中の方へ

Colorで元々用意されている色にテキストの色を変更する方法

.foregroundColorを使用してTextに色をつけることができます。またColorは省略可能なため、VStackの一つ目のブロックと二つ目のブロックは同じ内容になります。

struct ContentView: View {
    var body: some View {
        HStack {
            VStack {
                Text("テキストの色指定")
                    .foregroundColor(Color.red)
                Text("テキストの色指定")
                    .foregroundColor(Color.orange)
                Text("テキストの色指定")
                    .foregroundColor(Color.yellow)
                Text("テキストの色指定")
                    .foregroundColor(Color.green)
                Text("テキストの色指定")
                    .foregroundColor(Color.cyan)
                Text("テキストの色指定")
                    .foregroundColor(Color.blue)
                Text("テキストの色指定")
                    .foregroundColor(Color.purple)
            }
            VStack {
                Text("テキストの色指定")
                    .foregroundColor(.red)
                Text("テキストの色指定")
                    .foregroundColor(.orange)
                Text("テキストの色指定")
                    .foregroundColor(.yellow)
                Text("テキストの色指定")
                    .foregroundColor(.green)
                Text("テキストの色指定")
                    .foregroundColor(.cyan)
                Text("テキストの色指定")
                    .foregroundColor(.blue)
                Text("テキストの色指定")
                    .foregroundColor(.purple)
            }
        }
    }
}

アトリビュートインスペクタでテキストの色を変更する

色を変更したいTextをcommand+クリックします。

「Show SwiftUI Inspector…」をクリック

「Color」をクリック

「Custom」をクリック

好みの色を選択

foregroundColor(Color(red: ○○, green: ○○, blue: ○○))が追加され、テキストが選択した色に変更されます。

Colorを拡張してオリジナルの色を作る

これは覚えておくと非常に便利なのでぜひ使ってみてください！

extension Colorを使用してColorを拡張し、事前に用意したColor(red: ○○, green: ○○, blue: ○○)を呼び出せる様にします。

extension Color {
    static var originalColor: Color {
        return Color(red: 0/255, green: 255/255, blue: 255/255)
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Text("テキストのオリジナル色指定")
                .foregroundColor(.originalColor)
        }
    }
}