html5仿苹果通讯录效果,SwiftUI 2.0 列表实现Alphabet风格仿通讯录效果(封装教程含代码)...

本文价值与收获

看完本文后，您将能够作出下面的界面

字母表风格

动画效果

看完本文您将掌握的技能

掌握封装UITableView技能

实现Alphabet风格界面

代码

1、基础使用

import UIKit

struct ContentView: View {

@State var items = ["中国人民银行","Audi", "Aston Martin","BMW", "Bugatti", "Bentley","Chevrolet", "Cadillac","Dodge","Ferrari", "Ford","Honda","Jaguar","Lamborghini","Mercedes", "Maruti", "Mazda","Nissan","Porsche","Rolls Royce","Toyota","Volkswagen"]

var body: some View {

VStack{

AlphabetView(items: self.$items)

}

}

}

struct ContentView_Previews: PreviewProvider {

static var previews: some View {

ContentView()

}

}

struct AlphabetView:UIViewControllerRepresentable {

@Binding var items:[String]

typealias UIViewControllerType = TableViewController

func makeUIViewController(context: Context) -> TableViewController {

let tv = TableViewController()

tv.cars = self.items

return tv

}

func updateUIViewController(_ uiViewController: TableViewController, context: Context) {

}

}

代码已经封装好了，每次只需修改items内容即可。

2、将下面代码也复制到项目中

```

import UIKit

class TableViewController: UITableViewController {

var carsDictionary = [String: [String]]()

var carSectionTitles = [String]()

var cars = [String]()

override func viewDidLoad() {

super.viewDidLoad()

self.tableView.register(UITableViewCell.self, forCellReuseIdentifier: "Cell")

// cars = ["Audi", "Aston Martin","BMW", "Bugatti", "Bentley","Chevrolet", "Cadillac","Dodge","Ferrari", "Ford","Honda","Jaguar","Lamborghini","Mercedes", "Maruti", "Mazda","Nissan","Porsche","Rolls Royce","Toyota","Volkswagen"]

indexingCars();

}

func indexingCars() {