SwiftUI控件篇-List

废话不说，直接上菜。

1:最简单的List

 List{
            Text("111")
            Text("111")
            Text("111")
        }

需要注意的是，里面数据超过十个报错，语法不符合，超出其重用机制。

2:ForEach 加载

1，0到10循环
List{
        ForEach(0..<10){ I in
            NavigationLink("行\(i)", destination: BottomeView())
        }
2，循环一个数组
List{
        let txtArr:[String] = ["1","2","3","4","5","6","7"]
        ForEach(txtArr,
                id:\.self){ txt in
            Text(txt)
        }
}

NavigationLink的用法，可自己看，也可等后面讲到

3:使用List遍历Array

let txtArr:[String] = ["1","2","3","4","5","6","7"]
    
    List(txtArr ,id: \.self){
       
        ListCell(txt: $0)
        NavigationLink($0, destination: ListDetail(txt: $0))
    }

此方式需要注意，Navi Link中，destination无法使用自定义cell，如若解决，可用以下方式

 List(txtArr,id: \.self) { txt in
        NavigationLink(destination: ListDetail(txt: txt)) {
            ListCell(txt: txt)
        }
    }

4:可选中的List

1，定义数据

struct Person:Identifiable,Hashable {

    let name:String
    let id = UUID()
}
var Persons = [
    Person(name: "JM"),
    Person(name: "HSQ"),
    Person(name: "TD"),
    Person(name: "KJ"),
    Person(name: "BM")
]

2，实现

//单选
@State private var Selection : UUID?
//多选
@State private var multiSelection = Set()

List(Persons, selection: $Selection) {
        NavigationLink($0.name, destination: ListDetail(txt: $0.name))
 }
            .toolbar { EditButton() }

单选和多选，只需要更改List中Selection的绑定的状态值即可

5:分组的List

原Swift和OC中Plan，Group类型的TableView

1，定义数据，在上面4定义的数据的基础上

//用于分组
struct Family:Identifiable,Hashable {
    let name:String
    let persons:[Person]
    let id = UUID()
}
var familys = [
    Family(name: "家庭一", persons: [Person(name: "JM"),Person(name: "JM"),Person(name: "JM"),Person(name: "JM")]),
    Family(name: "家庭二", persons: [Person(name: "JM"),Person(name: "JM"),Person(name: "JM"),Person(name: "JM")]),
    Family(name: "家庭三", persons: [Person(name: "JM"),Person(name: "JM"),Person(name: "JM"),Person(name: "JM")]),
    Family(name: "家庭四", persons: [Person(name: "JM"),Person(name: "JM"),Person(name: "JM"),Person(name: "JM")])
]

2，实现

 List(selection: $singleSelection){
        ForEach(familys) { family in
            Section(header: Text(" \(family.name)")) {
                ForEach(family.persons) { person in
                    NavigationLink(person.name, destination: ListDetail(txt: person.name))
                }
            }
        }
    }

若要实现分组可选中，可结合上述4，可选中的List来看

扩展 listStyle

         InsetGroupedListStyle
         GroupedListStyle      平铺
         PlainListStyle        组头悬浮
         SidebarListStyle      可折叠组

用法

List{   }.listStyle(SidebarListStyle())

6:等级List

取官方例子，想不出来什么更好的例子
1，定义数据

struct FileItem: Hashable, Identifiable, CustomStringConvertible {
    var id: Self { self }
    var name: String
    var children: [FileItem]? = nil
    var description: String {
        switch children {
        case nil:
            return " \(name)"
        case .some(let children):
            return children.isEmpty ? " \(name)" : " \(name)"
        }
    }
}
let fileHierarchyData: [FileItem] = [
    FileItem(name: "users", children:
                [FileItem(name: "user1234", children:
                            [FileItem(name: "Photos", children:
                                        [FileItem(name: "photo001.jpg"),
                                         FileItem(name: "photo002.jpg")]),
                             FileItem(name: "Movies", children:
                                        [FileItem(name: "movie001.mp4")]),
                             FileItem(name: "Documents", children: [])
                            ]),
                 FileItem(name: "newuser", children:
                            [FileItem(name: "Documents", children: [FileItem(name: "test")])
                            ])
                ]),
    FileItem(name: "private", children: nil)
]

2，实现

List(fileHierarchyData, children: \.children) { item in
        if (item.children == nil){
            NavigationLink(item.description, destination: ListDetail(txt: item.description))
        }else{
            Text(item.description)
        }   
    }

7，可编辑List

List{
        ForEach(
            items,
            id:\.self
        ){
            item in
            Text(item);
        }
        .onDelete(perform: { indexSet in
            items.remove(at: indexSet.last ?? 0)
            print(items)
        })
        .onMove(perform: { indices, newOffset in
            items.move(fromOffsets: indices, toOffset: newOffset)
            print(items)
        })
    }
    .navigationTitle("按钮二")
    //.navigationBarHidden(true)
    
    .toolbar(content: {
        EditButton()
    })

8，更改cell高度

只需要更改内部控件的高度即可

List(txtArr,id: \.self) { landmark in
        NavigationLink(destination: ListDetail(txt: landmark)) {
            ListCell(txt: landmark).frame(height:100)
        }
    }

组件基本看完，目前在实战应用，哪天想起来，我会再更的，铁鸡们

Simulator Screen Shot - iPhone 11 Pro Max - 2021-02-11 at 00.36.26.png

Simulator Screen Shot - iPhone 11 Pro Max - 2021-02-11 at 00.36.33.png