100 Days of SwiftUI（DAY 96（Project19））

SnowSeeker：はじめに
SnowSeeker: Introduction

SwiftUIで2つのサイドバイサイドビューを操作する
Working with two side by side views in SwiftUI

オプションでのalert（）およびsheet（）の使用
Using alert() and sheet() with optionals

SwiftUIにはアラートとシートを作成する2つの方法があり、これまでは1つしか使用していませんでした。ブール値がtrueになったときにアラートまたはシートを表示するブール値へのバインディングです。

第二の選択肢はそれほど頻繁に使用されませんが、あなたがそれを必要とする数回のために非常に便利です：あなたは、オプションを使用することができIdentifiable、あなたの条件として、オブジェクトを、そのオブジェクトが値を持っている場合、警告またはシートが表示されます。この種類のクロージャーは、条件に使用されたオプションではない値を渡すので、安全に使用できます。

アラートが解除されるとすぐに、SwiftUIはselectedUserに戻りnilます。

import SwiftUI

struct User: Identifiable {
    var id = "Taylor Swift"
}

struct ContentView: View {
    @State private var selectedUser: User? = nil
    @State private var isShowingAlert = false

    var body: some View {
        Text("Hello, World!")
            .onTapGesture {
                self.selectedUser = User()
            }
            .alert(item: $selectedUser) { user in
                Alert(title: Text(user.id))
            }
    }
}

透明なレイアウトコンテナーとしてのグループの使用
Using groups as transparent layout containers

SwiftUIのGroupビューは、10の子ビューの制限を回避するために一般的に使用されますが、別の重要な動作もあります。透明なレイアウトコンテナーとして機能します。つまり、グループ内に一連のビューを作成し、そのグループを異なるスタックにラップして、異なる動作を実現できます。
グループにはレイアウト情報が含まれていないため、3つのテキストフィールドが縦、横、または奥行きのいずれでスタックされるかはわかりません。これは、の透明なレイアウト動作Groupが重要になる場所です。


import SwiftUI

struct UserView: View {
    var body: some View {
        Group {
            Text("Name: Paul")
            Text("Country: England")
            Text("Pets: Luna, Arya, and Toby")
        }
    }
}
/*
struct ContentView: View {
    @State private var layoutVertically = false

    var body: some View {
        Group {
            if layoutVertically {
                VStack {
                    UserView()
                }
            } else {
                HStack {
                    UserView()
                }
            }
        }
        .onTapGesture {
            self.layoutVertically.toggle()
        }
    }
}
 */

struct ContentView: View {
    @Environment(\.horizontalSizeClass) var sizeClass

    var body: some View {
        Group {
            
            if sizeClass == .compact {
                VStack(content: UserView.init)
            } else {
                HStack(content: UserView.init)
            }
            
            /*
            if sizeClass == .compact {
                VStack {
                    UserView()
                }
            } else {
                HStack {
                    UserView()
                }
            }
        */
        }
    }
}