SwiftUI 教程

由于 API 变动，此文章部分内容已失效，最新完整中文教程及代码请查看 https://github.com/WillieWangWei/SwiftUI-Tutorials

SwiftUI 简介

SwiftUI 是一种为任何Apple 平台声明用户界面的现代化方式。以前所未有的速度，创建漂亮、动态的应用程序。
SwiftUI 是一种非常简单的创新方法，可以利用 Swift 的强大能力在所有苹果设备平台上构建用户界面。通过 SwiftUI，开发者仅使用一组工具和 API 就能为所有苹果设备构建用户界面。SwiftUI 使用易于阅读和编写的声明式 Swift 语法，可与新的 Xcode 设计工具无缝协作，使你的代码和设计完美同步。SwiftUI 自动支持动态类型、黑暗模式、本地化和可访问性，你的 SwiftUI 代码将成为你写过的最强大的 UI 代码。

基础组件

Text 用来显示文字类似于UIKit中的UILabel

Image 用来显示图片类似于UIKit中的UIImageView

Spacer用来填充空白

布局组件

VStack 竖直摆放的组合组件

HStack 水平摆放的组合组件

List用来展示列表类似于UIKit中的UITableView

功能型组件

NavigationView 展示导航栏类似于UINavigationBar
NavigationButton类似于pushViewController:方法

那么通过代码如何实现以下

效果展示

1.首先创建MapView

主要是创建地图

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    
    //
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
        //
    }
    
    func updateUIView(_ view: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

2.首先创建CircleImage

用于图片的创建

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("-e-pt3")
            .frame(width: 200, height: 200)
            //调用 .clipShape(Circle()) ，将图像裁剪成圆形。
            .clipShape(Circle())
            //进行描边
            .overlay(
                Circle().stroke(Color.red,lineWidth: 4))
            //加阴影
            .shadow(radius: 10)
    }
}

struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

3.最后在ContentView里面以下操作

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            
            //添加地图
            MapView()
                .frame(height: 300)
                //为了将地图内容扩展到屏幕的上边缘
                .edgesIgnoringSafeArea(.top)
            
            //添加头像
            CircleImage()
                .offset(y: -100)
                .padding(.bottom,-100)
            
            //添加文字
            VStack(alignment: .leading) {
                Text("步入SwiftUI的世界")
                    //改变字体大小
                    .font(.title)
                    //改变字体颜色
                    .foregroundColor(.black)
                HStack {
                    Text("这个还是有意思的")
                        .font(.subheadline)
                        .foregroundColor(.blue)
                    //spacer 能撑开 stack 所包含的视图，使它们共用其父视图的所有空间，而不是仅通过其内容定义其大小。
                    Spacer()
                    Text("挺好玩的这个")
                        .font(.subheadline)
                        .foregroundColor(.green)
                }
            }
            .padding()
            
            Spacer()
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}