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入門のすべてのレッスン
自分で練習してみよう: Swiftプレイグラウンド