SpacerとZStack
CoddyのSwiftジャーニー「SwiftUI入門」セクションの一部。レッスン 12/50。
Spacerはスタック内の空きスペースをすべて占めます。HStackでは、前にあるビューを左へ、後にあるビューを右へ押しやります。
HStack {
Text("Total")
Spacer()
Text("$12.50")
}VStackでは、Spacerがビュー同士を垂直方向に離します。
ZStackはビューを互いに重ねて配置します。最初のビューが一番奥にあり、その次のビューがその上に重なります。
ZStack {
Color.blue
Text("On top")
.foregroundStyle(.white)
}ビューとして使用されたColor.blueは、与えられたスペース全体を塗りつぶすため、ここではテキストの背後に青い背景として表示されます。
チャレンジ
簡単合計の行を幅いっぱいに広げましょう。Totalと$12.50の間にSpacerを追加して、価格が右端に寄るようにします。
自分で試してみよう
import SwiftUI
@main
struct CoddyApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
SwiftUI入門のすべてのレッスン
自分で練習してみよう: SwiftUIプレイグラウンド