SwiftUI全攻略——3.导航与列表

1.导航

导航就是指页面的互相跳转，页面层级由浅入深，需要用到NavigationView包装，内部跳转用NavigationLink

    var body: some View {
        NavigationView {
            ZStack {
                NavigationLink(
                    destination: ContactListView(title: "Contacts", data: contacts),
                    label: {
                        Text("Contacts")
                    })
            }
        }
    }

Navi.gif

2.列表

列表使用List，传入的data就是数据源，后接一个尾随闭包用于展示每一个单元中的数据，

struct ContactListView: View {
    
    let personList = PersonList()
    
    var title: String
    var data: [Contact] = Contact.mockData()
    
    var body: some View {
        List(data) { contact in
            ContactRow(contact: contact)
        }
        .navigationBarTitle(title)
        
    }
}

struct ContactListView_Previews: PreviewProvider {
    static var previews: some View {
        ContactListView(title: "Contacts", data: Contact.mockData())
    }
}

3.子View的生命周期

在debug下可以监测到，在只展示ContentView页面的时候，子页面ContactListView就已经被初始化了，加载时间过早，暂时不知道SwiftUI如何设计的初衷是什么。

考虑到用到再加载，性能优化，设计了一个懒加载的方式，利用逃逸闭包，在View需要展示的时候加载，不需要展示则不会加载。

import SwiftUI

struct NavigationLazyView: View {
    let build: () -> Content
    init(_ build: @autoclosure @escaping () -> Content) {
        self.build = build
    }
    var body: Content {
        build()
    }
}

以后NavigationLink里面的destination，可以用NavigationLazyView包裹，实现懒加载。

struct结构体里没有deinit方法，如果要监听struct对象的生命周期，可以给这个struct添加一个class属性，监听class中的deinit方法，就知道struct何时销毁了。

struct Dog {
    let eat = Eat()
}

class Eat {
    deinit {
        print("eat obj deinit")
    }
}

github仓库地址 https://github.com/SunZhiC/LearningSwiftUI

References

SwiftUI - NavigationLink Content loaded too early
SwiftUI Navigation Links and the Common Pitfalls Faced