6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【SwiftUI】テキストの左寄せ・中央揃え・右寄せを混在させる

Last updated at Posted at 2020-09-21

SwiftUIでテキストの左寄せ・中央揃え・右寄せを混在させる方法です。
最初はやり方が分からず、この方法を見つけるまでに時間がかかってしまいました...

やり方

まず、一番外側のVStackに"alignment: .center"を指定します。(指定しない場合は無条件でcenterになるので、指定しなくてもOKです。)

左寄せの場合は、TextをHStackで囲み、Textの後にSpacerを追加します。
右寄せの場合も、TextをHStackで囲み、Textの前にSpacerを追加します。

以上!

ContentView.swift

struct ContentView: View {

    var body: some View {
        
        VStack(alignment: .center) {
            
            // 左寄せ
            HStack {
                Text("左寄せ")
                Spacer()
            }
            
            // 中央揃え
            Text("中央揃え")
            
            // 右寄せ
            HStack {
                Spacer()
                Text("右寄せ")
            }
            
        }.padding()
        
    }
}
CompletedImage

このようなレイアウトも楽々です。
CompletedImage

6
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?