TextはSwiftUIで画面に文字列を表示することができるViewです。

最も基本的なコンポーネントで、さまざまな場面で使用されます。

Modifierを使ってフォントを変更したり、文字色を変更したり、サイズを変更することができます。

以下具体的な手順を説明します。

最もシンプルな使用例

最も基本的な使い方です。Textの引数として表示したい文字列を渡します。

struct TextBasic: View {
    var body: some View {
        Text("Hello, World!")
    }
}

画面の中央に「Hello, World!」という文字列が表示されます。

フォントの指定

表示される文字列のフォントを指定することもできます。.largeTitleや.titleなどあらかじめ定義されたフォントを指定することで、見た目の統一感を出すことができます。

struct TextFont: View {
    var body: some View {
        VStack {
            Group {
                Text("largeTitle")
                    .font(.largeTitle)
                Text("title")
                    .font(.title)
                Text("title2")
                    .font(.title2)
                Text("title3")
                    .font(.title3)
                Text("headline")
                    .font(.headline)
                Text("subheadline")
                    .font(.subheadline)
            }
            Group {
                
                Text("body")
                    .font(.body)
                Text("callout")
                    .font(.callout)
                Text("caption")
                    .font(.caption)
                Text("caption2")
                    .font(.caption2)
                Text("footnote")
                    .font(.footnote)
                Text("default")
            }
        }
    }
}

色の指定

表示される文字列の色を指定することもできます。代表的な色はあらかじめ定義されています。

struct TextColor: View {
    var body: some View {
        HStack {
            VStack {
                Text("black").foregroundColor(.black)
                Text("blue").foregroundColor(.blue)
                Text("brown").foregroundColor(.brown)
                Text("cyan").foregroundColor(.cyan)
                Text("gray").foregroundColor(.gray)
                Text("green").foregroundColor(.green)
                Text("indigo").foregroundColor(.indigo)
                Text("mint").foregroundColor(.mint)
                
            }
            VStack {
                Text("orange").foregroundColor(.orange)
                Text("pink").foregroundColor(.pink)
                Text("purple").foregroundColor(.purple)
                Text("red").foregroundColor(.red)
                Text("teal").foregroundColor(.teal)
                Text("white").foregroundColor(.white)
                Text("indigo").foregroundColor(.indigo)
                Text("yellow").foregroundColor(.yellow)
                
            }
        }.font(.largeTitle)
    }
}

行数の指定

標準では、文字列が表示しきれない場合は自動的に折り返して表示されます。lineLimit(行数)で行数を指定することができます。

struct TextLimit: View {
    var body: some View {
        VStack {
            Text("あいうえおかきくけこさしすせそたちつてとなにぬねの")
                .frame(width: 200, height: 100)
                .border(Color.gray)
            
            Text("あいうえおかきくけこさしすせそたちつてとなにぬねの")
                .lineLimit(1)
                .frame(width: 200, height: 100)
                .border(Color.gray)

        }
        
    }
}