swiftui - 如何在 SwiftUI 中交换 TabView 项目？

Question

import SwiftUI

struct DashboardTabBarView: View {
    
    @State private var selection: String = "home"

    
    var body: some View {
        
        TabView(selection: $selection) {
            
                Color.red
                    .onTapGesture {
                        selection = "cart"
                    }
                    .tabItem {
                        Image(icon: .camera)
                        Text("cart")
                    }
                
                Color.green
                    .onTapGesture {
                        selection = "home"
                    }
                    .tabItem {
                        Image(icon: .cart)
                        Text("home")
                    }
                
                Color.blue
                    .onTapGesture {
                        selection = "noti"
                    }
                    .tabItem {
                        Image(icon: .drawer)
                        Text("noti")
                    }
            
           
        }
        
        }
}

struct DashboardTabBarView_Previews: PreviewProvider {
    static var previews: some View {
        DashboardTabBarView()
    }
}

这是我的代码，我只想交换示例中单击时选项卡项的位置，假设我有三个选项卡项，一个在中间，另外两个在左右:

A B C

当我单击 A 时，选项卡应如下所示:

B A C

其余情况是:A C B

C A B

C B A

B A C

注意:项目应该与其内容(包含 View )交换，而不仅仅是名称/图像。

Answer 1

一种可能的方法是基于某些模型动态构造 TabView，因此唯一需要的是重新排序选择项以将选择置于中心。

这是一个演示。使用 Xcode 13.4/iOS 15.5 测试

*注意:不要使用索引作为标识符，因为在重新排序时索引不会更改，因此 ForEach 不会更新!

struct DashboardTabBarView: View {

    @State private var selection: String = "home"

    struct Item {
        let title: String
        let color: Color
        let icon: String
    }

    @State var items = [
        Item(title: "cart", color: .red, icon: "cart"),
        Item(title: "home", color: .blue, icon: "house"),
        Item(title: "car", color: .green, icon: "car"),
    ]

    var body: some View {

        TabView(selection: $selection) {
            ForEach(items, id: \.title) { item in // << dynamically !!
                item.color
                    .tabItem {
                        Image(systemName: item.icon)
                        Text(item.title)
                    }
            }
        }
        .onChange(of: selection) { title in // << reorder with centered item
            let target = 1
            if var i = items.firstIndex(where: { $0.title == title }) {
                if i > target {
                    i += 1
                }
                items.move(fromOffsets: IndexSet(integer: target), toOffset: i)
            }
        }
    }
}

Test code on GitHub