Stack の間隔と配置
積み重ねたビュー間の間隔と配置を調整します。
「Stack の間隔と配置」はCoddyKit上の無料SwiftUI Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。
スタックを細かく調整する
viewは3方向に積み重ねられますが、実際のレイアウトではview間の間隔や端の位置を調整する必要があります。ここで調整方法を学びましょう。🎛️
spacing引数
すべてのスタックでは、子view間の間隔を設定するspacingの値を指定できます。数値を大きくすると、view同士の間隔が広がります。
VStack(spacing: 20) {
Text("Top")
Text("Bottom")
}間隔をゼロにする
spacing: 0を渡すと間隔を完全になくし、子view同士をぴったり接して配置できます。余白のない、端から端までのデザインに便利です。
デフォルトの間隔
引数を省略すると、SwiftUIがAppleのデザインガイドラインに合った適切なデフォルトの間隔を選びます。必要な場合だけ上書きすれば十分です。
VStackの位置揃え
VStackのalignment引数は、水平方向の配置を制御します。.leadingを使うと、中央揃えではなく子viewを左揃えにできます。
VStack(alignment: .leading) {
Text("Name")
Text("Email")
}Leading、Center、Trailing
VStackのalignmentには、.leading、.center、.trailingがあります。子viewを左端、中央、右端のどこに寄せるかを決めます。
HStackの位置揃え
HStackのalignmentは、代わりに垂直方向の配置を制御します。.top、.center、.bottomを使って、上端、中央、下端を揃えます。
HStack(alignment: .top) {
Text("Tall")
Text("Short")
}間隔と位置揃えの組み合わせ
2つの引数を同時に設定できます。alignmentを先に、spacingを後に指定すると、1行でレイアウトを完全に制御できます。
VStack(alignment: .leading, spacing: 8) {
Text("A")
Text("B")
}Spacerの紹介
Spacerは、隣り合うviewを引き離すために広がる柔軟なviewです。スタック内の残りのスペースをすべて吸収します。
HStack {
Text("Left")
Spacer()
Text("Right")
}viewを端に寄せる
2つのviewの間にSpacerを置くと、それぞれを反対側の端に配置できます。1つのviewの前に置けば、そのviewをtrailing側の端まで押し出せます。
テキストのベースライン揃え
フォントサイズが異なる場合、HStackの.firstTextBaselineを使うと、異なるサイズのラベルを読みやすい同じ基準線に揃えられます。
クイックチェック
各スタックのalignmentが何を制御するか確認しましょう。
振り返り：間隔と位置揃え
よくできました！spacingで間隔を設定し、alignmentで子viewの位置を決め、Spacerでどのスタックのviewも端に寄せられます。🚀
AI チューターと学ぶ Swift — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「Stack の間隔と配置」レッスンは無料ですか？
はい。「Stack の間隔と配置」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。
「Stack の間隔と配置」で何を学びますか？
積み重ねたビュー間の間隔と配置を調整します。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
SwiftUI Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Stack の間隔と配置」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwiftUI Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ビューを縦方向に積み重ねる
- HStack で行を作る
- ZStack で重ねる
- Stack の間隔と配置