iOS Weather App (demo)

ContentView.swift

//
//  ContentView.swift
//  SwiftUI-Weather
//
//  Created by David Zhang on 2023/11/23.
//

import SwiftUI

struct ContentView: View {
    @State private var degree: Int = 76
    
    var body: some View {
        ZStack {
            LinearGradient(gradient: Gradient(colors: [Color.blue, Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing)
                .edgesIgnoringSafeArea(.all)
            
            VStack(spacing: 20) {
                Text("Beijing")
                    .font(.system(size: 32))
                    .foregroundStyle(.white)
                    .padding()
                
                VStack(spacing: 8) {
                    Image(systemName: "cloud.sun.fill")
                        .renderingMode(.original)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 180, height: 180)
                    
                    Text("\(degree)°")
                        .font(.system(size: 70, weight: .medium))
                        .foregroundStyle(.white)
                        .onTapGesture {
                            degree -= 1
                        }
                
                }
                .padding(.bottom, 40)
                
                HStack(spacing: 20) {
                    WeatherDayView(day: "TUE", imageName: "cloud.sun.fill", degree: 70)
                    WeatherDayView(day: "WES", imageName: "sun.max.fill", degree: 80)
                    WeatherDayView(day: "THU", imageName: "wind.snow", degree: 65)
                    WeatherDayView(day: "FRI", imageName: "sunset.fill", degree: 28)
                    WeatherDayView(day: "SAT", imageName: "cloud.sun.fill", degree: 33)
                    
                }
                
            
                Spacer()
                
                Button {
                    degree += 1
                } label: {
                    Text("Incr Degree")
                        .fontWeight(.bold)
                        .frame(width: 280, height: 50)
                        .background(.white)
                        .cornerRadius(10)
                }

                Spacer()
            }
        }
    }
}

#Preview {
    ContentView()
}

struct WeatherDayView: View {
    var day: String
    var imageName: String
    var degree: Int
    
    var body: some View {
        VStack(spacing: 15) {
            Text(day)
                .font(.system(size: 16))
                .foregroundStyle(.white)
            Image(systemName: imageName)
                .renderingMode(.original)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 36, height: 36)
            Text("\(degree)°")
                .font(.system(size: 28, weight: .medium))
                .foregroundStyle(.white)
        }
    }
}