100 days of swiftui: 20
https://www.hackingwithswift.com/100/swiftui/20

오늘은 다양한 View를 만들었다. 사진과 함께 코드를 기록한다.

Stack(V, H, Z)

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            Text("This is 2")
            VStack(alignment: .leading) {
                Text("This is 0")
                Text("This is 0")
                HStack(alignment: .center) {
                    Text("This is 1")
                    Text("This is 1")
                    Text("This is 1")
                }
            }
        }
    }
}

코드 파일
https://github.com/treesofgroo/Ios-GuessFlags/commit/e17b3841e5f1a1f545870b934b46c40334460bd9

Color with frame

dart/light 모드

struct ContentView: View {
    var body: some View {
        ZStack {
            VStack(spacing: 0) {
                Color.primary
                Color.secondary
            }
            Text("This is a Text")
                .padding(30)
                .background(.ultraThinMaterial)
        }
        .ignoresSafeArea()
        
    }
}

💡 shift + command + A = Features > Toggle Appearance = light/dark 모드 변경

코드 파일
https://github.com/treesofgroo/Ios-GuessFlags/commit/fa2f2737e3ce4ae563631552e46b5b9b03bd8ccd

Gradient

struct ContentView: View {
    var body: some View {
        VStack {
            LinearGradient(stops: [
                Gradient.Stop(color: .white, location: 0.2),
                Gradient.Stop(color: .blue, location: 0.4)
            ], startPoint: .top, endPoint: .bottom)
            LinearGradient(stops: [
                .init(color: .red, location: 0.2),
                .init(color: .cyan, location: 0.8)
            ], startPoint: .leading, endPoint: .trailing)
            RadialGradient(colors: [.brown, .orange, .mint], center: .center, startRadius: 20, endRadius: 150)
            AngularGradient(colors: [.red, .yellow, .blue, .red], center: .center)
            Text("These are gradient")
                .frame(maxWidth: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, maxHeight: .infinity)
                .foregroundStyle(.white)
                .background(.green.gradient)
        }
    }
}

코드 파일
https://github.com/treesofgroo/Ios-GuessFlags/commit/89655262bcb9da32e9b24d4007bd3104369b8489

Button

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Button("default") { }
                .buttonStyle(.automatic)
            Button("plain") { }
                .buttonStyle(.plain)
            Button("bordered") { }
                .buttonStyle(.bordered)
                .tint(.purple)
            Button("borderedProminent") { }
                .buttonStyle(.borderedProminent)
            Button("borderless") { }
                .buttonStyle(.borderless)
            Button(action: {}, label: {
                Text("Custom Button")
                    .padding(20)
                    .foregroundColor(.white)
                    .background(.orange)
            })
            Button("Save", systemImage: "square.and.arrow.down") {}
                .padding(20)
                .foregroundColor(.white)
                .background(.orange)
            Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/, label: {
                Label("record", systemImage: "mic.circle.fill")
                    .font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/)
                    .padding(20)
                    .foregroundColor(.white)
                    .background(.orange)
            })
        }
        .tint(.green)
    }
}

💡 role: .destructive를 통해 경고색으로 나타낼 수 있다. 아래 alert 참고.

❔ deprecated인지 모르겠다.

코드 파일
https://github.com/treesofgroo/Ios-GuessFlags/commit/78fa47e90294f8f9051efff6d8098bdff366d211

Alert

struct ContentView: View {
    @State private var showingAlert = false
    var body: some View {
        VStack(spacing: 20) {
            Button("Show Alert") {
                showingAlert = true
            }
            .buttonStyle(.bordered)
        }
        .tint(.green)
        .alert("Alert Message", isPresented: $showingAlert) {
            Button("Back", role: .cancel) {}
            Button("Delete", role: .destructive) {}
        } message: {
            Text("This is message for alert")
        }
    }
}

코드 파일
https://github.com/treesofgroo/Ios-GuessFlags/commit/8c1cd0d693806570e78d8246430c035808391f7f