[SwiftUI]テキスト（Text）を寄せるには？

テキストを寄せる方法を、２つ紹介します。

frameモディファイア

ひとつは、frameモディファイアの「alignment」引数を使う方法です。

frame( alignment : Alignment )

Alignment構造体のタイププロパティで、どこに寄せるかを指定します。

以下は、タイププロパティの一覧です。

• .center（中央）
• .leading（左）
• .trailing（右）
• .top（上）
• .bottom（下）
• .topLeading（左上）
• .topTrailing（右上）
• .bottomLeading（左下）
• .bottomTrailing（右下）

以下は、使用例です。

VStack {
           //左寄せ
            Text("Leadging")
                .frame(width: 200, alignment: .leading)
            
　　　　　　　　　//中央寄せ
            Text("Center")
                .padding()
                .frame(width: 200, alignment: .center)
            
　　　　　　　　　//右寄せ
            Text("Trailing")
                .frame(width: 200, alignment: .trailing)
        }

スタックレイアウト

もうひとつは、スタックレイアウトの引数「alignment」を使う方法です。

スタックレイアウトとは、VStackやHStack、ZStackなどのことです。

これらには、それぞれframeモディファイアと同じようにalignment引数があり、指定した方向にレイアウト内のビューを全て寄せます。

ただ、frameモディファイアと違い寄せれる方向が決まっています。

• VStack : .leading , .center , .trailing
• HStack : .top , .center , .bottom
• ZStack : 全方向

指定の仕方は、frameモディファイアと同じです。

VStack (alignment: .trailing){
          
}

HStack (alignment : .bottom) {

}

ビュー内のテキスト全てを寄せたいならば、こちらの方が向いています。

まとめ

Textを寄せるには、frameモディファイア、もしくはスタックレイアウトの「alignment」引数を使います。

オススメの記事

[SwiftUI]Textのフォント(font)一覧

2021.8.22 extに使用できる主なフォントをまとめました。

www.choge-blog.com

2021.08.22

[SwiftUI][網羅性あり]Textビューとそのモディファイア

SwiftUIでは、様々なビューがあります。

その中で最も使用頻度の多いのは、Textビューではないでしょうか。

この記事では、Textビューとそのモディファイアについて解説します。

www.choge-blog.com

2021.05.16

[SwiftUI]「ビュー全体」を左寄せにする方法

2021.8.22 一部のビューだけでなく、全体のビューを左寄せにする方法を紹介します。

www.choge-blog.com

2021.08.22