[SwiftUI]Text(テキスト)を左に寄せるには？

SwiftUI

2022.05.02

どうも、ちょげ(@chogetarou)です。

Textを左に寄せる方法を紹介します。

方法
1. frame修飾子
2. VStack
まとめ

方法

Textを左に寄せる方法は、２つあります。

frame修飾子

１つ目は、frame修飾子を使う方法です。

まず、Textにframe修飾子を付与します。

frame修飾子の引数「maxWidth」に横幅を指定します。

そして、frame修飾子の引数「alignment」に「.leading」を指定します。

Text("テキスト")
    .frame(maxWidth: 横幅, alignment: .leading)

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, SwiftUI")
                .frame(maxWidth: .infinity, alignment: .leading)
        }
    }
}

VStack

もう１つは、VStackを使う方法です。

具体的には、VStackの引数「alingment」に「.leading」を指定します。

VStack(alignment: .leading) {
    ・・・
}

VStackの引数「alignment」に「.leading」を指定することで、VStack内にあるTextが左寄せになります。

使用例

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Hello")
            Text("SwiftUI")
            Text("こんにちは")
            Text("Swift")
        }
    }
}