swiftUi ios 14 list 组件如何实现下拉刷新 上拉加载 swiftui list 选中

admin2024-06-05  9




用 enums 切换视图状态

你可能已经见过常规的 Swift 条件语句,用于区分两种视图呈现,代码像下面这样:


Group {
    if Bool.random() {
        Rectangle()
    } else {
        Circle()
    }
}


条件视图在我们需要展示不同状态的时候非常有用,如果我们计划有序,保持代码规模足够小,可以确保代码清爽整洁。但是状态多了怎么办呢?保持视图代码的简短,训练自己设计 SwiftUI 应用架构的能力。

解决方案分两部分,第一部分是为各种视图状态定义枚举。举个例子,你可以利用一个嵌套的 enum 定义几种状态:


enum LoadingState {
    case loading, success, failed
}


接下来,为每种状态创建单独的视图,简单起见,我这里就写文本视图。但是,在工程实践中,如果视图比较复杂,拆分就显得非常有必要了。


struct LoadingView: View {
    var body: some View {
        Text("Loading...")
    }
}

struct SuccessView: View {
    var body: some View {
        Text("Success!")
    }
}

struct FailedView: View {
    var body: some View {
        Text("Failed.")
    }
}


这些嵌套的视图是否有存在的必要,完全取决于你的 app 的大小,以及你是否打算复用视图。

有了这两部分,我们现在可以在 ContentView 中用一个简单的 wrapper 来追踪当前应用的状态,然后展示相应的子视图。


var loadingState = LoadingState.loading


然后根据状态显示不同视图,完成 body 属性,像下面这样:


Group {
    if loadingState == .loading {
        LoadingView()
    } else if loadingState == .success {
        SuccessView()
    } else if loadingState == .failed {
        FailedView()
    }
}


采用上面这种方法,我们的 body 属性的代码就不会随着新增的代码不断膨胀,因为它不需要去关系加载,成功,失败几种状态下具体的视图外观,它们由嵌套的子视图负责。


译自 Integrating MapKit with SwiftUI】

将 MapKit 集成进 SwiftUI 应用

从 2007 年的第一个代 iPhone 开始,地图就是一个核心的特性,其支撑的 framework 也从那个开始就对开发者开放。这个框架被称为 MapKit。正如我们可以在 SwiftUI 中使用 UIKit ,我们同样可以在 SwiftUI 中使用 MapKit ,只要我们不介意稍稍引入一些额外的工作。是的,这意味着要引入 coordinator 。

让我们先从一些简单的工作开始吧。创建一个新的 SwiftUI 视图,名字叫 “MapView”,然后添加一句 MapKit 的 import 。这一次我们不会用到 UIViewControllerRepresentable 协议,因为 MapKit 并不使用视图控制器

有一种经典的构建软件的模式叫 “MVC”,它把我们的代码分成三类对象,即 Model (我们的数据), View (我们的布局) 和 Controller (连接 Model 和 View 的代码)。 Apple 在 UIKit 和它的其他框架中采用了 MVC ,包括 MapKit,但是增加了一些有趣的改变:view controllers 。它们究竟是 views,controllers,两者都是,或者两者都不是呢? Apple 官方并没有给出答案,这也是为什么你会在 iOS 开发中看到大量 MVC 变体的原因。

当我开始教授 UIKit 时,我是通过向大家解释一个视图是一块布局,注入文本,按钮,图像,而一个视图控制器是一屏内容这样的方式开始的。随着你对 UIKit 知识的掌握,你会知道你其实可以在一屏上拥有许多视图控制器,不过我的方式对于刚开始学习的你是一种有助益的心智模型。

这些之所以很重要,因为我们用到过 UIImagePickerController ,它被设计用来展示一整屏的信息 —— 我们不会视图给它添加功能,因为它被设计时是预期以一种自包含单位的方式运作的。 作为对比,MapKit 提供了MKMapView,从名字上你也知道它是一个视图而不是一个视图控制器,这意味着它只做展示内容这件事。

这也是为什么我们在处理 MapKit 时不用 UIViewControllerRepresentable 的原因: MKMapView 用视图,所以我们需要用 UIViewRepresentable 。不过运作方式基本一致:我们需要实现 makeUIView() 方法和 updateUIView() 方法,这两个方法处理实例化地图视图和 SwiftUI 状态变化时地图视图的更新。不过, update 方法在视图中相比视图控制器充当了更重要的角色,因为 SwiftUI 代码和 UIView 对象之间需要有更多的交互代码 —— 因此我们在 view controller 里放空这个方法,但 view 里则很常用。

我们稍晚一些再来解决更新方法,现在我们解决 make 方法,这个方法会创建一个新的 MKMapView 并且返回它。

把 MapView 结构体改造成下面这样:


struct MapView: UIViewRepresentable {
    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
        let mapView = MKMapView()
        return mapView
    }

    func updateUIView(_ view: MKMapView, context: UIViewRepresentableContext<MapView>) {
    }
}


在继续之前,我想想你展示一个 Swift 的小魔法,在前面的项目中,我介绍 UIViewControllerRepresentable 协议的时候,我们简单实用了 typealias 。这是 Swift 中给已经存在的类型起别名的方式,这么做可以让它们更容易记忆。

UIViewControllerRepresentable 和 UIViewRepresentable 都内建了别名。如果你右键跳转 UIViewRepresentable的定义,你会在这个协议的定义里面看到这样一行代码:


typealias Context = UIViewRepresentableContext<Self>


这行代码创建了一个叫 “Context” 的别名,每当 Swift 看见 Context的时候,它会视为 UIViewRepresentableContext<Self>,其中 Self代表我们正在处理的类型。实践中,这表明我们只需要写 Context 而不是UIViewRepresentableContext<MapView>,两者的含义一模一样。

回到 ContentView.swift 替换文本视图成下面的代码:


MapView()
    .edgesIgnoringSafeArea(.all)


在 Xcode 中预览地图的体验目前还不是很好,所以我建议你在模拟器中运行 app 以查看效果。你会发现你可以在地图点击和拖曳,如果你按住 Option 键,你会看到第二个虚拟的手指,以便你可以做缩放和旋转的操作。一行代码就能得到这些,还不赖哦。

当然,我们真正想要的是让地图来到生活实际中的某处地表,我们会在下一节解决这个问题。


译自 Communicating with a MapKit coordinator

用 MapKit coordinator 和 MapView 交互

把一个空的 MKMapView 嵌入 SwiftUI 只是小试牛刀,如果你真的想用地图干掉有用的事,那你需要引入一个 coordinator —— 这个类充当你的地图视图的委托,负责和 SwiftUI 之间交换数据。

就像使用 UIImagePickerController 一样,我们需要创建一个继承自NSObject的嵌套类,令它遵循我们的视图或者视图控制器要求的委托协议,并让它持有父亲结构体的引用以便回传数据给 SwiftUI 。

对于地图视图,我们关心的协议是 MKMapViewDelegate,因此我们可以立即着手写一个 coordinator 类。在MapView 类添加下面这样一个嵌套类:


class Coordinator: NSObject, MKMapViewDelegate {
    var parent: MapView

    init(_ parent: MapView) {
        self.parent = parent
    }
}


和 UIViewControllerRepresentable 协议相似,我们需要添加一个方法 makeCoordinator() ,它返回一个配置好的Coordinator 实例。下面的代码需要添加在 MapView 结构体这一级,它把自己传入 coordinator 的构造器,以便后者可以报告发生的事情。


func makeCoordinator() -> Coordinator {
    Coordinator(self)
}


然后,在 makeUIView() 方法中构造地图视图的地方,把 MKMapView 和我们的 coordinator 连接起来:


mapView.delegate = context.coordinator


这样一来的我们的配置就完成了,接下来我们需要给 coordinator 添加方法,以响应地图视图的活动。记住,coordinator 是地图视图的委托,这意味着只要有事发生,它被会通知 —— 比如地图发生移动的时候,地图开始加载或者完成加载的时候,或者当用户在地图上被定位的时候,又或者当地图被缩放的时候,等等。

MapKit 会自动检查 coordinator 类,以了解我们关心哪些通知。这个动作是通过函数签名实现的:用精确的函数名和参数列表来匹配,并调用它们。

为了演示这一点,我们将添加一个叫 mapViewDidChangeVisibleRegion() 的方法,它接收单一的 MKMapView 参数。是的,这个方法名非常长。不过,相信我, UIKit 里比这长的多的是。我个人最爱的 API (现在已经废弃了) ,叫做willAnimateSecondHalfOfRotationFromInterfaceOrientation()!

言归正传,把下面这个方法添加到 Coordinator 类中:


func mapViewDidChangeVisibleRegion(_ mapView: MKMapView) {
    print(mapView.centerCoordinate)
}


上面这个方法会被每一次地图改变可见区域的时候被调用,所以移动,放大或者旋转都会触发。我们只是简单的把中心坐标打印出来,如果你是在模拟器里运行 app ,那你会在 Xcode 的输出窗口看到大量的坐标信息。

地图视图的 coordinator 还负责提供更多地图需要的信息。举个例子,我们可以向地图添加标注,作为想要交互的兴趣点。作为 model 数据,相对于数据的视觉呈现,它只有标题和坐标,因此地图视图想要渲染我们的标注时,它会向 coordinator 要这些数据。

为了演示这一点,我们需要修改 makeUIView() 方法,以便我们向地图发送一个伦敦市的标注,就像下面这样:


func makeUIView(context: Context) -> MKMapView {
    let mapView = MKMapView()
    mapView.delegate = context.coordinator

    let annotation = MKPointAnnotation()
    annotation.title = "London"
    annotation.subtitle = "Capital of England"
    annotation.coordinate = CLLocationCoordinate2D(latitude: 51.5, longitude: 0.13)
    mapView.addAnnotation(annotation)

    return mapView
}


MKPointAnnotation 是一个遵循 MKAnnotation 协议的类,它被 MapKit 用于显示标注。如果你需要,可以创建自己的标注类型,不过在这里MKPointAnnotation已经够用了,它让你提供标题,副标题和坐标。如果你好奇的话,CLLocationCoordinate2D 之所以以 “CL” 开头是因为它来自另一个 Apple 的框架,叫做 Core Location 。

加好标注后,你不用再做什么 app 就已经可以运行了,找一找伦敦在哪,你会看到一个标记,点击它能够展示我们的副标题。

如果你想自定义标注的外观,我们又需要回到 coordinator 。地图视图会在我们的 coordinator 里查找一个特定的方法,叫 mapView(_:viewFor:),如果存在就会调用它。这个方法创建一个自定义的标注视图,不过 Apple 还是给了我们优雅的实现,叫 MKPinAnnotationView。

往 Coordinator 类中添加一下代码:


func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
    let view = MKPinAnnotationView(annotation: annotation, reuseIdentifier: nil)
    view.canShowCallout = true
    return view
}


如你所见,我们需要传给 MKPinAnnotationView 标记实例,然后设置 canShowCallout为真,以便点击这个标记时显示信息。

在结束地图介绍之前,我想简单提一下 reuseIdentifier 属性。创建视图的开销可能是昂贵的。因此在 SwiftUI 中有 Identifiable 协议,如果它能唯一标识视图,那么它就能知道哪些视图发生变化,哪些没有发生变化,以便最小化需要的工作。

像 UIKit 和 MapKit 这样的框架有类似概率的简单版本,叫做 reuse identifiers。这些标识可以是我们想用的任何字符串,被框架用来重用一个数组里的视图。我们可以用特定的 ID 来向框架请求一个视图,如果存在,就不需要重新创建。

上面我们指定了 nil作为 reuse identifier ,这意味着我们不想要重用这个视图。鉴于我们正在学习,这样做没关系,不过之后我会向你展示更高效的方式,即重用视图。


扩展

接下来我们对传给 MapView 结构体的数据采用 @Binding ,以存储这个值。 Coordinator 会从 MapKit 接收到这个值,然后传给 MapView,然后 MapView把这个值放进一个 @Binding 属性,也就是把它另存起来了。

先往 MapView 里添加一个属性:


@Binding var centerCoordinate: CLLocationCoordinate2D


这个操作会立刻破坏 MapView_Previews 结构体,因为这时它也需要提供这个绑定了。这里的预览实际没有用处,因为 MKMapView 在预览上不起作用,所以即使删了也没关系。或者,你可以添加一些样例数据,以便修正预览的代码:


extension MKPointAnnotation {
    static var example: MKPointAnnotation {
        let annotation = MKPointAnnotation()
        annotation.title = "London"
        annotation.subtitle = "Home to the 2012 Summer Olympics."
        annotation.coordinate = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.13)
        return annotation
    }
}


有了上面的代码,修正 MapView_Previews:


struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView(centerCoordinate: .constant(MKPointAnnotation.example.coordinate))
    }
}


稍后我们会添加更多东西,在这之前我们先把它放进 ContentView。如果用户想要把他们想去的地点添加到地图上,我们需要在地图上用一个半透明的圆表示。这里简单采用一个ZStack 确保目标点总是在地图中央。

在 ContentView 里添加一个存储当前地图的中央坐标的属性。稍后我们会用它来添加地点标记:


@State private var centerCoordinate = CLLocationCoordinate2D()


接下来填充 body 属性:


ZStack {
    MapView(centerCoordinate: $centerCoordinate)
        .edgesIgnoringSafeArea(.all)
    Circle()
        .fill(Color.blue)
        .opacity(0.3)
        .frame(width: 32, height: 32)
}


当你运行 app ,你会发现你可以自由地在地图上移动,但是中央失踪有一个蓝色半透明的圆浮在中央。

如果我们需要蓝圈保持在中央的话,我们需要centerCoordinate 属性随着地图的移动而更新。 在 mapViewDidChangeVisibleRegion() 方法中改造:


func mapViewDidChangeVisibleRegion(_ mapView: MKMapView) {
    parent.centerCoordinate = mapView.centerCoordinate
}


接下来我们要在右下角增加一个按钮,以便我们在地图添加地点标记。因为我们已经处于 ZStack 中,最便捷的方式是利用一个 VStack 加一个 HStack以及 spacer 将这个按钮做对齐。Spacer 会吃掉竖向或者横向剩余的所有空间,使得按钮处于右下角。

按钮的功能我们稍后添加,我们先处理一下它的样式:

下面的代码添加到刚才的圆下面:


VStack {
    Spacer()
    HStack {
        Spacer()
        Button(action: {
            // create a new location
        }) {
            Image(systemName: "plus")
        }
        .padding()
        .background(Color.black.opacity(0.75))
        .foregroundColor(.white)
        .font(.title)
        .clipShape(Circle())
        .padding(.trailing)
    }
}


注意这里我们添加了两次 padding() modifier —— 第一次用在添加背景色之前增大按钮,第二次用来把按钮从角落里推出来一些。

接下来比较有趣,我们在地图上放置大头针。前面我们已经绑定了一个属性到地图视图,但发送坐标需要用别的方式。

第一部分很显然,我们需要一个位置的数组,存放所有用户想去的地点。

往ContentView里加上这个属性:


@State private var locations = [MKPointAnnotation]()


接下来,每当按钮被点击时添加一个按钮。我们先不管地点的标题和副标题,只需要简单创建一个 MKPointAnnotation 然后利用centerCoordinate作为坐标。


let newLocation = MKPointAnnotation()
newLocation.coordinate = self.centerCoordinate
self.locations.append(newLocation)


接下来是挑战的部分:我们怎么同步地图视图呢?

updateUIView() 在这里派上用场了:SwiftUI 会在有任何数据被传入 UIViewRepresentable 结构体导致它改变时自动调用这个方法,这个方法负责同步视图的最新状态。

在我们的案例中,我们发送了 centerCoordinate 绑定给 MapView,这意味着每当用户在地图中移动导致这个值改变,会一直触发 updateUIView() 。 之前这个过程一直安静地发生,因为 updateUIView() 那时候还是空的。简单添加一句 print()调用:


func updateUIView(_ view: MKMapView, context: Context) {
    print("Updating")
}


在移动地图,你会看到 “Updating” 不断地被打印。

我们把 locations 数组传给 MapView ,让它利用数组里的点为我们插入标记。

因此,MapView里也需要声明持有所有地点的标记:


var annotations: [MKPointAnnotation]


MapView_Previews 也需要更新一遍发送样例标记点。


MapView(centerCoordinate: .constant(MKPointAnnotation.example.coordinate), annotations: [MKPointAnnotation.example])


然后,我们还需要实现updateUIView() 它把当前标记和上一次标记做比较,如果不一样则替换。当然,我们可以逐一比较两个数组里的元素,但其实可以不用这么做。因为我们不可能同时添加或者删除标记,所以我们只需要简单比较前后两次数组的长度就知道变化是否发生。如果发生了,清空旧数组,重新填满就行。

修改 updateUIView()方法如下:


func updateUIView(_ view: MKMapView, context: Context) {
    if annotations.count != view.annotations.count {
        view.removeAnnotations(view.annotations)
        view.addAnnotations(annotations)
    }
}


最后,更新 ContentView,让它把 locations 数组发给地图:


MapView(centerCoordinate: $centerCoordinate, annotations: locations)


地图的介绍就到此为止。现在你可以在地图上随便移动,点击按钮来添加地点标记了。

你可以留意一下,当两个标记很近的时候,iOS 会自动合并这些大头针。举个例子,如果在 1 公里以内的范围放置了好几枚标记, iOS 会将其中的一些隐藏以便影响地图的阅读。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!