【Swift UI】Text構造体を真ん中(center)に配置する方法!

この記事からわかること

  • Swift UIText構造体中央(center)に寄せる方法
  • List構造体内で真ん中にする方法
  • multilineTextAlignmentの使い方
  • VStack(alignment:)の使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Text構造体を真ん中(center)に寄せる方法

Swift UIでText構造体を画面の真ん中に配置する方法を4つ紹介します。

紹介する方法

  1. frame
  2. multilineTextAlignment
  3. VStack
  4. HStack
【Swift UI】Text構造体を真ん中(center)に配置する方法!

frame

frameモディファイアの引数alignmentcenterを渡すことで中央寄せにすることができます。

Text("frame")
    .frame(width: 200, alignment: .center)

List構造体の中で中央寄せにする

List構造体の中ではinfinityなどリストの横幅と同等のサイズを渡すことで文字を中央寄せにすることができます。

List {
  Text("frame")
            .frame(maxWidth: .infinity, alignment: .center)
}
【Swift UI】Text構造体を真ん中(center)に配置する方法!

multilineTextAlignment

multilineTextAlignmentモディファイアを使用することでも中央寄せにすることが可能です。

Text("multilineTextAlignment")
  .multilineTextAlignment(.center)

VStack

VStackの引数alignmentcenterを渡すことでも中央寄せにすることが可能です。

VStack(alignment: .center){
  Text("VStack")
}

HStack

HStackSpacerを使用をすることでも中央寄せにすることが可能です。

HStack {
  Spacer()
  Text("HStack")
  Spacer()
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

自作iOSアプリ

\ アプリをリリースしました /

mapping

自分だけの地図を作ろう!-mapping-

無料posted withアプリーチ

割り勘アプリ-bill-

旅行におすすめ!
割り勘アプリ-bill-

無料posted withアプリーチ

Imakoko

現在地を取得するアプリ!Imakoko

無料posted withアプリーチ

ふるログ

ふるさと納税管理アプリ-ふるログ-

無料posted withアプリーチ

Remind-シンプル通知アプリ-

シンプル通知アプリ-Remind-

無料posted withアプリーチ

CLIPURL

好きな記事をクリップしよう!-CLIPURL-

無料posted withアプリーチ

記録カレンダー

続けたを可視化できるアプリ!記録カレンダー

無料posted withアプリーチ

CART-共有できるお買い物リスト-

CART-共有できるお買い物リスト-

無料posted withアプリーチ

QuickPressPanel

早押しゲーム-QuickPressPanel-

無料posted withアプリーチ

貸し借り管理アプリ

友達とのお金の管理-貸し借り管理アプリ-

無料posted withアプリーチ

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Githubにて
iOSアプリのソースコードを公開中!

自作Webアプリ

子育て知識共有サイト-mikata-

子育て知識共有サイト-mikata-

New Article

index