投稿

ラベル(VStack)が付いた投稿を表示しています

【SwiftUI】 タイトルTextの下にサブタイトルTextをつける / Textの間に余白を入れる

イメージ
この記事の概要 SwiftUIで、.subheadLineプロパティを使って、サブタイトルを設定すると同時に、VStackや Hstackの使い方もマスターします。 目次 この記事の概要 目次 前回からの変更点 タイトルTextにサブタイトルを導入しよう サブタイトルにHStackViewを導入してViewを分割しよう 余白を入れよう まとめ 前回からの変更点 よくよく考えたら、ハイキュー!!のロゴってオレンジじゃん......... ということで修正              Text ( "ハイキュー!!" )                  . font (. title )                  . fontWeight (. heavy )                  . foregroundColor ( Color . pink ) から、              Text ( "ハイキュー!!" )                  . font (. title )                  . fontWeight (. heavy )                  . foregroundColor ( Color . orange ) に修正。 タイトルTextにサブタイトルを導入しよう まず、ライブプレビュー画面になっている方は、スマホの横に青い円ボタン...

【SwiftUI】alignment(左寄せ・右寄せ)が効かない

イメージ
この記事の概要 VStack内のTextの.multilineTextAlignmentプロパティが、全然効かなくて、色々と試行錯誤をしました。とりあえずはそれっぽい仕様が出来たのですが、あまり有効な手段ではないです。※この問題に対する解決法は現在調査中です。分かり次第追記します。 目次 この記事の概要 目次 やろうとしたこと コード全文 対処法 懸念点 まとめ 参考文献 やろうとしたこと この記事を執筆した2020年3月23日現在、週刊少年ジャンプ連載の古舘春一さん原作のアニメ「ハイキュー!!」シリーズの、4期にあたる「ハイキュー!! TO THE TOP」が放送されていたので、SwiftUIの練習がてら、このアニメを紹介する簡単なアプリケーションのUIを、実装しようとした。 [図1]現在のライブプレビュー画面 ©古舘春一/集英社・「ハイキュー!!」製作委員会・MBS さて見て分かる通り、すべての要素が中央揃えになっていることが分かるだろうか。自分はこのデザインはあまり意図しておらず、Text:作品概要の位置を左寄せに、Text:絶賛放送中の位置を右寄せにしようとした。 コード全文 import SwiftUI struct ContentView : View {     var body : some View {         VStack (alignment: . center , spacing: 10.0 ) {             Text ( "ハイキュー!! TO THE TOP" )                 . font (. title )                 . fontWeight (. black )                 . f...