日20 - 22 : Swiftuiの100日-旗(プロジェクト2)を推測してください

https://www.hackingwithswift.com/100/swiftui/20
https://www.hackingwithswift.com/100/swiftui/21
https://www.hackingwithswift.com/100/swiftui/22
ゲスフラグプロジェクトは、スタック、画像、色、グラデーション、および警告を含むSwiftuiビューの別のセットを紹介します.

スタックを使用してビューを配置する

複数のビューをレンダリングする場合は便利です.

vstack

これを使用して、2つ以上のビューを配置します.

var body: some View {
    VStack {
        Text("Hello, world!")
        Text("This is inside a stack")
    }
}

ビュー間の間隔を追加できます.また、VStackとHStackプロパティを使用して配置できます.

VStack(alignment: .leading, spacing: 20) {
    Text("Hello, world!")
    Text("This is inside a stack")
}

スタック

これはZStackと同じです.

HStack(spacing: 20) {
    Text("Hello, world!")
    Text("This is inside a stack")
}

Zstack

Zstackは、ビューを重ねることでビューをオーバーラップするためのものです.

ZStack {
    Text("Hello, world!")
    Text("This is inside a stack")
}

色とフレーム

色はビューそのものです.色が自動的に利用可能なすべてのスペースを取る.spacing修飾子を使用して特定のサイズを設定します.

ZStack {
    Color.red
        .frame(width: 200, height: 200)
    Text("Your content")
}

また、最小と最大の幅と高さを指定することができます.

Color.red
    .frame(minWidth: 200, maxWidth: .infinity, maxHeight: 200)

勾配

使用する勾配には3種がある.

線形勾配

線形勾配は一方向に行く.

LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom)

また、グラデーションの停止を提供することができます、あなたの色を指定し、どのくらいのグラデーションに沿って色を使用する必要があります.

LinearGradient(gradient: Gradient(stops: [
    Gradient.Stop(color: .white, location: 0.45),
    Gradient.Stop(color: .black, location: 0.55),
]), startPoint: .top, endPoint: .bottom)

放射勾配

放射状勾配は円形状で外側に動く

RadialGradient(gradient: Gradient(colors: [.blue, .black]), center: .center, startRadius: 20, endRadius: 200)

角度勾配

角度グラデーションサイクルは、円の周りの色ではなく、外側に放射し、いくつかの美しい効果を作成することができます.

AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), center: .center)

ボタンとイメージ

ボタンを見てカスタマイズすることができますいくつかの異なる方法があります.最初はalignmentです.

Button("Delete selection", role: .destructive){}

第二に、我々はボタンのビルトインスタイルの1つを使用することができます

VStack {
    Button("Button 1") { }
        .buttonStyle(.bordered)
    Button("Button 2", role: .destructive) { }
        .buttonStyle(.bordered)
    Button("Button 3") { }
        .buttonStyle(.borderedProminent)
        .tint(.mint)
    Button("Button 4", role: .destructive) { }
        .buttonStyle(.borderedProminent)
}

ラベルをカスタマイズするか、またはVStackを使用する場合は、2番目の末尾の閉鎖を使用できます.

VStack {
    Button {
        print("Button was tapped")
    } label: {
        Text("Tap me!")
            .padding()
            .foregroundColor(.white)
            .background(.red)
    }
    Button {
        print("Edit button was tapped")
    } label: {
        Image(systemName: "pencil")
    }
    Button {
        print("Edit button was tapped")
    } label: {
        Label("Edit", systemImage: "pencil")
    }
}

警告メッセージの表示

アラートはビュー上の別の修飾子として存在します.ビューは、表示されるべきかどうかを知るためにある特定の状態にバインドされます.

@State private var isShowingAlert = false

var body: some View {
    Button("Show Alert") {
        self.isShowingAlert = true
    }
    .alert("Important message", isPresented: $isShowingAlert) {
        Button("Cancel", role: .cancel) { }
        Button("Delete", role: .destructive) { }
    } message: {
        Text("Please read this.")
    }
}

アプリチャレンジ

ユーザーのスコアを格納するために@状態のプロパティを追加し、それが正しいか間違っているときに、それを変更し、アラートとスコアラベルでそれを表示します.

誰かが間違ったフラグを選択すると、彼らにあなたの警告メッセージの間違いを教えてください-例えば、“間違っている!フランスの旗は、”.

ゲームは、彼らのスコアを判断し、最終的な警告を参照してくださいゲームを再起動することができます参照してください8の質問だけを確認します.

出力

ソースコード

Github