ListSwipeActions, Badges 的使用

1. ListSwipeActions 列表滑动操作

  1.1 实现

/// 列表滑动操作
struct ListSwipeActionsBootcamp: View {
    /// 水果
    @State var fruits: [String] = [
        "apple", "orange", "banana", "peach"
    ]
    
    var body: some View {
        List{
            ForEach(fruits, id: \.self) {fruit in
                Text(fruit.capitalized)
                    .swipeActions(edge: .trailing,
                                  allowsFullSwipe: true) {
                        Button("Archive") {
                        }
                        .tint(.green)
                        Button("Save") {
                        }
                        .tint(.blue)
                        Button("Junk") {
                        }
                        .tint(.yellow)
                    }.swipeActions(edge: .leading,
                                   allowsFullSwipe: true) {
                        Button("Share") {
                        }
                        .tint(.orange)
                    }
            }
            //.onDelete(perform: delete)
        }
    }
    /// 删除
    func delete(indexSet: IndexSet) {
    }
}

  1.2 效果图:

2. Badges 徽章/提示小红点的使用

  2.1 实现

// 一般会使用的控件:
// List
// TabView

/// 徽章/提示小红点
struct BadgesBootcamp: View {
    
    var body: some View {
        //badges1
        badges2
    }
    
    // 方式二
    var badges2: some View{
        List{
            Text("Hello, world!")
                .badge("New Items")
            Text("Hello, world!")
            Text("Hello, world!")
            Text("Hello, world!")
            Text("Hello, world!")
        }
    }
    
    // 方式一
    var badges1: some View{
        TabView{
            Color.red
                .tabItem {
                    Image(systemName: "heart.fill")
                    Text("Hello")
                }
                .badge("New")
            Color.green
                .tabItem {
                    Image(systemName: "heart.fill")
                    Text("Hello")
                }
            Color.blue
                .tabItem {
                    Image(systemName: "heart.fill")
                    Text("Hello")
                }
        }
    }
}

  2.2 效果图: