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

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

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

方法

Textを中央に寄せる方法は、３つあります。

frame修飾子

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

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

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

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

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

使用例

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

multilineTextAlignment修飾子

２つ目は、multilineTextAlignment修飾子を使う方法です。

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

そして、multilineTextAlignmentの引数に「.center」を指定します。

Text("テキスト")
    .multilineTextAlignment(.center)

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello\nSwiftUI\nこんにちは\nスウィフトユーアイ")
                .multilineTextAlignment(.leading)
        }
    }
}

VStack

３つ目は、VStackを使う方法です。

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

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

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

使用例

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

まとめ

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

• frame修飾子を使う方法
• multilineTextAlignmnet修飾子を使う方法
• VStackを使う方法