如何在SwiftUI中实现TabView项的位置互换功能？

要实现点击Tab项时与当前选中项交换位置（包含内容视图一起交换），核心是通过动态数组管理Tab的配置与内容，修改数组顺序即可同步更新Tab栏的排列和对应内容。以下是完整实现代码：

import SwiftUI

// 适配你原有的自定义Icon枚举，可根据实际情况调整
enum Icon {
    case camera, cart, drawer
}

extension Image {
    init(icon: Icon) {
        switch icon {
        case .camera:
            self.init(systemName: "camera")
        case .cart:
            self.init(systemName: "cart")
        case .drawer:
            self.init(systemName: "sidebar.left")
        }
    }
}

// 封装Tab的所有配置信息
struct TabItemModel: Identifiable {
    let id: String
    let icon: Icon
    let text: String
    let content: AnyView
}

struct DashboardTabBarView: View {
    
    @State private var selectedTabId: String = "home"
    // 初始Tab列表，对应你原有的三个Tab
    @State private var tabItems: [TabItemModel] = [
        TabItemModel(id: "cart", icon: .camera, text: "cart", content: AnyView(Color.red)),
        TabItemModel(id: "home", icon: .cart, text: "home", content: AnyView(Color.green)),
        TabItemModel(id: "noti", icon: .drawer, text: "noti", content: AnyView(Color.blue))
    ]
    
    var body: some View {
        TabView(selection: $selectedTabId) {
            // 遍历动态数组生成Tab内容
            ForEach(tabItems) { item in
                item.content
                    .tag(item.id)
                    .tabItem {
                        Image(icon: item.icon)
                        Text(item.text)
                    }
            }
        }
        // 监听Tab选中变化，处理交换逻辑
        .onChange(of: selectedTabId) { newId in
            guard let oldIndex = tabItems.firstIndex(where: { $0.id == selectedTabId }),
                  let newIndex = tabItems.firstIndex(where: { $0.id == newId }) else {
                return
            }
            // 交换两个Tab在数组中的位置
            tabItems.swapAt(oldIndex, newIndex)
            // 确保选中状态保持在刚点击的Tab上
            selectedTabId = newId
        }
    }
}

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

关键逻辑说明： #

• TabItemModel：把每个Tab的标识、图标、文本、内容视图打包，实现统一管理
• 动态数组tabItems：用@State修饰，修改数组顺序会自动同步到TabView的排列
• onChange监听选中变化：当用户点击新Tab时，找到原选中项和新选中项的索引，调用swapAt交换位置，实现Tab栏和内容的同步交换

内容的提问来源于stack exchange，提问作者Rehan Ali Khan