🌤 SwiftUI Weather App

Overview

WeatherApp

《SwiftUI 与 Combine 编程》(喵神) 读后实践

一个天气 App,可搜索、关注城市,查看城市详细天气预报。

由 SwiftUI 驱动的跨平台 app,包括 UI 布局、状态管理、网络数据获取和本地数据存储等等。

编译环境:macOS 12.0.1, Xcode 13.3, iOS 15.4

preview.mp4

分栏和导航

NavigationView {
    // 第一个 view 为左侧 sidebar
    List {
        // 点击 link 会 push 到 destination;如果是分屏下,destination 会显示在 detailView。
        NavigationLink(destination: CityView(city: city)) {
            Text(city.description)
        }
    }
    // 第二个 view 为右侧 detail view
    Image(systemName: "cloud.sun").font(.largeTitle)
}

状态管理

类 Redux 的架构

  1. 状态决定用户界面,所有 State 储存在 Store 对象中。
  2. view 不能直接操作 state, 只能通过发送 Action,Store 的 Reducer 处理这些 action,生成新的 state。
  3. 新的 state 会替换 store 中原有的状态,并驱动页面更新。
  4. Reducer 生成新 state 时可能会带副作用,额外返回一个 Command
  5. 异步的 command 需要更改 state,也是通过 action。
class Store: ObservableObject { // 1
    @Published var appState = AppState() // 1
    
    // 2
    static func reduce(state: AppState, action: AppAction) -> (AppState, AppCommand?) {
        var appState = state
        var appCommand: AppCommand?
        
        switch action {
            // case ...   
        }
        
        // 3, 4
        return (appState, appCommand)
    }
}
struct FindAppCommand: AppCommand {

    func execute(in store: Store) {
        // await ...
        store.dispatch(action) // 5
    }
}

网络请求

struct FindRequest: AppRequest {
    
    var publisher: AnyPublisher {
        URLSession.shared
            .dataTaskPublisher(for: url)
            .map { $0.data }
            .decode(type: Find.self, decoder: JSONDecoder())
            .mapError { AppError.networkingFailed($0) }
            .eraseToAnyPublisher()
    }
}

屏幕适配

通过 @Environment 获取 horizontalSizeClass 环境变量。

horizontalSizeClass == .compact,可能是竖屏的 iPhone 或者分屏下的 iPad。

@Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?

var body: some View {
    if horizontalSizeClass == .compact {
        VStack {
            // ...
        }
    } else {
        HStack {
            // ...
        }
    }
}

同样还有 verticalSizeClass

数据来源

openweathermap openweathermap.org

源码不含 appid,需要编译看效果可以去官网注册免费的 appid。然后赋值 FindRequst.swift

extension AppRequest {
    var appid: String { "" }
}
You might also like...
Demo app for SwiftUI state management
Demo app for SwiftUI state management

StateObject vs ObservedObject Demo Demo app for SwiftUI state management Run the app and push 3 buttons to increase each counter. Toggle one of the to

Official demo app released by Apple to teach SwiftUI

Landmarks This repository contains a demo application that I developed while following Apple's SwiftUI tutorials. Cloning Clone the repository using c

A simple demo app to showcase streaming HLS with SwiftUI Videoplayer

HLS Streaming with SwiftUI Basic implementation of VideoPlayer for SwiftUI to play remote media files using HTTP Live Streaming (HLS). Multiple views

SwiftUI Todo app example using a React/Redux monolithic state store with flux like dispatch/reduce actions
SwiftUI Todo app example using a React/Redux monolithic state store with flux like dispatch/reduce actions

SwiftUI-Todo-Redux SwiftUI Todo Redux app example using a React/Redux monolithic state store with flux like dispatch/reduce actions Background SwiftUI

SwiftUI Navigation example app

SwiftUINavigationExample SwiftUI Navigation example app. Navigation is managed by a single class called NavSwitches. This contains all the booleans th

Repository for the first challenge of the SwiftUI Animation Challenges. Create the likeable now playing animation from the Spotify app.
Repository for the first challenge of the SwiftUI Animation Challenges. Create the likeable now playing animation from the Spotify app.

Repository for the first challenge of the SwiftUI Animation Challenges. Create the likeable now playing animation from the Spotify app.

 The App Brewery Complete App Development course project
The App Brewery Complete App Development course project

Destini The App Brewery Complete App Development course project. "A Choose Your

Scrumdinger-ios - Built as a part of iOS app dev tutorials from app-dev-training
Scrumdinger-ios - Built as a part of iOS app dev tutorials from app-dev-training

Scrumdinger This repository contains the code written during my course of taking

Tipsy - Bill splitting and tip calculating App developed during iOS & Swift classes - The Complete App Development Bootcamp
Tipsy - Bill splitting and tip calculating App developed during iOS & Swift classes - The Complete App Development Bootcamp

Tipsy 💵 Bill splitting and tip calculating App developed during iOS & Swift cla

Releases(2.1-tca-reducer-protocol)
  • 2.1-tca-reducer-protocol(Nov 22, 2022)

    WeatherApp

    《SwiftUI 与 Combine 编程》 + TCA - SwiftUI 的救星? (喵神) 读后实践

    一个天气 App,可搜索、关注城市,查看城市详细天气预报。

    由 SwiftUI 驱动的跨平台 app,包括 UI 布局、状态管理、网络数据获取和本地数据存储等等。

    编译环境:macOS 13.0, Xcode 14.1, iOS 16.1

    Full Changelog: https://github.com/Starkrimson/WeatherApp/commits/2.1-tca-reducer-protocol

    Source code(tar.gz)
    Source code(zip)
Owner
Tsui
Tsui
A beautiful, dark-mode enabled weather app

What I create I have made a beautiful, dark-mode enabled weather app. You'll be able to check the weather for the current location based on the GPS da

Olexsii Levchenko 0 Nov 17, 2021
Weather Forecast Assigment is an iOS application built to highlight MVP and Clean Architecture concepts

Weather Forecast Assigment - iOS - MVP + Clean Architecture Description Weather Forecast Assigment is an iOS application built to highlight MVP (Model

Khôi Việt 2 Oct 30, 2021
SwiftUI Project built using the fundamentals of SwiftUI that I have learned.

GhibliLog About: I wanted to test my ability to create an application with a responsive SwiftUI interface that would format and display data pulled fr

Daniel Whitehorn 0 Nov 9, 2021
Todolist-swiftui - An example of using SwiftUI with CoreData

todolist-swiftui An example of using SwiftUI with CoreData Installation Install

null 0 Dec 30, 2021
Challenge-swiftui-space - Project for SwiftUI Dev Sprints on Devpass

SwiftUI Challenge - Space App ?? Neste desafio, desenvolveremos a interface de u

Devpass 7 Dec 27, 2022
'SwiftUI Apps' application that made with SwiftUI

SwiftUI Apps 'SwiftUI Apps' application that made with SwiftUI, which includes many sample applications, was made by Hamit Seyrek, the founder of the

Hamit SEYREK 12 Oct 15, 2022
Concept for organizing View and Data layers within SwiftUI App

SwiftUI MVVM Concept It is not about how to create Lists and Charts and View design. It's about possibility how to organize View and Data layers withi

Igor 16 May 16, 2022
This is a sample project that supplements the tutorial written over at my blog on 'Building a music recognization app in SwiftUI with ShazamKit'

Shazam-Kit-Tutorial This is a sample project that supplements the tutorial written over at my blog on 'Building a music recognization app in SwiftUI w

Swapnanil Dhol 7 Mar 17, 2022