如何实现对 List 中列表项的手动排序

目标及内容

目标:实现对 List 中列表项的手动排序。

主要内容:

  • 使用 ForEach 循环列表项内容
  • 使用 .onMove(perform: )移动列表项目(主要)
  • 使用 UITableView.appearance().separatorStyle = .none 隐藏列表的分隔横线
  • 使用 Spacer(minLength: ) 给底部留白
  • 使用 displayMode 控制 NavigationBarTitle 的显示:.automatic靠左,.inline居中

注: 除”飞行者 1 号”外, 其余飞行器名称都是为了 Demo 需要杜撰的。来不及了,直接看代码吧。(有空再解释,其实看代码里的注释就可以了。)

效果预览

下面的 GIF 展示的是在 iPhone 11 Pro Live Preview 中显示的实时预览效果。

实现代码

import SwiftUI

struct ListDemoView: View {
    //预留数据
    @State private var aircrafts = ["飞行者 1 号", "临空者  1 号", "寻路者 1 号","翼轻航 1 号","飞行者 2 号", "临空者 2 号", "寻路者 2 号","翼轻航 2 号","飞行者 3 号", "临空者 3 号", "寻路者 3 号","翼轻航 3 号"]

    var body: some View {
        VStack{
        NavigationView {
            List {
                ForEach(aircrafts, id: \.self) { aircraft in
                    Text(aircraft)
                        .padding()
                        .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                        .background(Color.init(red: 245/255, green: 246/255, blue: 250/255))
                        .cornerRadius(8)
                    //文本容器样式
                }
                .onMove(perform: moveListItem)
                //移动列表项目
            }
            .navigationBarTitle(Text("List 演示"),displayMode: .inline)
            .navigationBarItems(
                leading: EditButton(),
                trailing:
                Button(action: {
                    //添加点击 Button 的需要执行的动作
                }){
                    Image(systemName: "plus.circle.fill")
                        .imageScale(.large).foregroundColor(.orange)
                }
            )
            .onAppear { UITableView.appearance().separatorStyle = .none }
            //去掉 List 项目之间的分隔线
        }
            Spacer(minLength: 20)//底部留白
            Text("- Findaaron -").font(.footnote)
    }
    }

    func moveListItem(from source: IndexSet, to destination: Int) {
        aircrafts.move(fromOffsets: source, toOffset: destination)
    }//移动列表项目的函数
}

struct ListDemoView_Previews: PreviewProvider {
    static var previews: some View {
        ListDemoView()
    }
}

了解更多

还可通过访问https://www.yuque.com/docs/share/da166bb8-a243-4ceb-b33b-172fa2ddc4dd?#查看本文。

代码仓库:GitHub