williewangwei/swiftui-tutorials

A code example and translation project of SwiftUI. / 一个 SwiftUI 的示例、翻译的教程项目。

构建示例项目需要以下环境：

• macOS 10.15 Catalina 或更高
• Xcode 11.1 或更高

概述

对于初步学习和使用 SwiftUI 的开发者来说，官方教程无疑是最好的范例。它以构建一个 App 为脉络，串联出了 SwiftUI 重要的知识点，并主动抛出开发中一些常见的问题，然后用 SwiftUI 给出了解决方案。通过阅读此教程，你将逐步获得使用 SwiftUI 开发 App 的技能和**。

此项目为 SwiftUI Tutorials 的翻译及代码示例，具体内容请翻阅：

🎉 SwiftUI 教程（中文）

项目中的代码为完成所有教程后的最终成品，你可以直接体验多种 SwiftUI 特性。另外，你也可以在每个教程章节中下载对应的起始和完成代码。

完成本教程，你将获得一个这样的 App 以及一套精彩的 SwiftUI 代码：

平台	预览
iOS
watchOS
macOS

觉得不错？给个 Star 或 Follow 👌

更新日志

版本	内容
v1.0.0	完成初版
v1.0.1	同步官方文档 增加成品预览
v1.0.2	同步官方文档 优化翻译，修复翻译错误，让阅读更流畅 增加了代码高亮 标记出了代码修改范围，便于上下文对比
v1.0.3	新增章节《创建 watchOS App》 修复代码bug 增加 watchOS App 成品预览
v1.0.4	同步官方文档
v1.0.5	添加 Wiki 子模块
v1.0.6	新增章节《创建 macOS App》

调整

图片

为了优化阅读体验，部分图片加上了 #000000 50% 10 Blur 的阴影。

视频

由于 GitHub Wiki 的限制，所有视频已转码成 GIF 。

代码

在实际编码中，由于本地环境和官方教程不一致，导致部分方法的声明和调用方式、代码风格等与官方教程有细微出入，例如：

官方教程：

.
.
.
struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
}
.
.
.

这里的 UIViewRepresentable 是一个协议，它的声明中包含一个 associatedtype :

/// The type of `UIView` to be presented.
associatedtype UIViewType : UIView

在开发中，给此 associatedtype 赋值后 Xcode 对方法的签名补全会有变化，最终写作：

.
.
.
struct MapView : UIViewRepresentable {
    
    typealias UIViewType = MKMapView
    
    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
        return MKMapView(frame: .zero)
    }
}
.
.
.

如此修改不再一一列举，只需记得此类修改不会改变原教程的构建结果即可，不必过于纠结。

微信技术群

SwiftUI 代表未来构建 App 的方向，欢迎加群一起交流技术，解决问题。

加群现在需要申请了，可以先加我微信，备注 "SwiftUI"，我会拉你进群。

Stargazers over time

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

swiftui-tutorials's Issues

我装了xc11，启动的第一个sample时候预览不了，报Keyword '_' cannot be used as an identifier here

我装了xc11，启动的第一个sample时候预览不了，报Keyword '_' cannot be used as an identifier here。发现是在_xctest.swift这个文件里有报错，

import XCTest
@testable import _

class _Tests: XCTestCase {

请问如何解决啊

部分代码需要更新了，一些api已经修改了呢

Building Lists and Navigation 中 MapView 无法传递 coordinate

您好
let coordinate = CLLocationCoordinate2D(latitude: 29.554987, longitude: 115.984963)
在注释掉上行代码后添加
var coordinate: CLLocationCoordinate2D

并在 PreviewProvider 中给 MapView() 添加
MapView(coordinate: landmarkData[0].locationCoordinate)

预览视图就报错了，求解，感谢🙏

代码

错误信息

I can't build successfully, too many errors.

After I downloaded from github, I want to run it. But there are too many swift compiler errors. "Missing flies", or "Unable to infer complex closure return type; add explicit type to disambiguate" etc.

构建列表与导航 章节 编译报错

Landmark.swift 这个文件中 ‘ ImageStore’ 报 ‘Use of unresolved identifier 'ImageStore'’

更新了之后 不能编译了哦

升级完成 想要跑一下，很多编译错误，希望作者能修改一下。谢谢

文章错误

构建列表那篇，cell里漏了一句Spacer,不然cell是居中的

《Drawing Paths and Shapes》 BUG

struct BadgeBackground: View {
    var body: some View {
        GeometryReader { geometry in
            Path { path in
                var width: CGFloat = min(geometry.size.width, geometry.size.height)
                let height = width
                let xScale: CGFloat = 0.832
                let xOffset = (width * (1.0 - xScale)) / 2.0
                width *= xScale
                path.move(
                    to: CGPoint(
                        x: xOffset + width * 0.95,
                        y: height * (0.20 + HexagonParameters.adjustment)
                    )
                )
                
                HexagonParameters.points.forEach {
                    path.addLine(
                        to: .init(
                            x: xOffset + width * $0.useWidth.0 * $0.xFactors.0,
                            y: height * $0.useHeight.0 * $0.yFactors.0
                        )
                    )
                    
                    path.addQuadCurve(
                        to: .init(
                            x: xOffset + width * $0.useWidth.1 * $0.xFactors.1,
                            y: height * $0.useHeight.1 * $0.yFactors.1
                        ),
                        control: .init(
                            x: xOffset + width * $0.useWidth.2 * $0.xFactors.2,
                            y: height * $0.useHeight.2 * $0.yFactors.2
                        )
                    )
                }
            }
            .fill(LinearGradient(
                gradient: .init(colors: [Self.gradientStart, Self.gradientEnd]),
                startPoint: .init(x: 0.5, y: 0),
                endPoint: .init(x: 0.5, y: 0.6)
            ))
/////////////////////// 👇
            //.aspectRatio(1, contentMode: .fit) // 这里是错误的
        }
/////////////////////// 👇
         .aspectRatio(1, contentMode: .fit) // 应该放在这里
    }
    static let gradientStart = Color(red: 239.0 / 255, green: 120.0 / 255, blue: 221.0 / 255)
    static let gradientEnd = Color(red: 239.0 / 255, green: 172.0 / 255, blue: 120.0 / 255)
}

处理用户输入章节BUG

在处理用户输入章节中，在列表只显示收藏的情况下， 点击cell 进入详情， 此时在点击详情中的星星按钮，会出现取消收藏并返回到上一个页面的问题， 按理说代码中应该是只出现取消收藏， 而不应该有返回到上一个页面动作

建议: 项目的图片太大了 , 和文字不协调

可以修改下图片的大小,markDown 可以支持修改图片大小的 , 这样用起来 排版效果更好 , 谢谢您的教程