Codelaby's questions

Estou tentando criar uma visualização circular de conquistas semelhante à vista no Apple Game Center usando SwiftUI. A visualização deve ter texto circular no topo e um texto wrapper de arco centralizado.

Aqui está o que pretendo alcançar:

Texto Circular: Texto organizado de forma circular na parte superior da visualização. Título do Arco: Um título que envolve um arco, centralizado dentro da visualização circular. Tentei usar as visualizações ZStack e Texto com rotação, mas estou tendo problemas para alinhar o texto corretamente em um caminho circular. Além disso, não tenho certeza de como posicionar o título do arco corretamente.

Estou tentando implementar uma visualização SwiftUI que alterna entre diferentes estilos de grade (lista, linha, grade) usando um enum SwitchMode. Quero usar matchedGeometryEffectpara animar a transição entre esses estilos, quando aplico passando seu id, parece que a animação não reproduz, muda repentinamente como se não fosse aplicar

vídeo https://www.youtube.com/shorts/9YRxAZnonYA

Aqui está minha implementação atual:

struct ColorItem: Identifiable {
    let id: UUID = .init()
    let title: String
    let summary: String
    let color: Color
    
    static let allItems: [ColorItem] = [
        ColorItem(title: "Red", summary: "This is red", color: .red),
        ColorItem(title: "Green", summary: "This is green", color: .green),
        ColorItem(title: "Blue", summary: "This is blue", color: .blue),
        ColorItem(title: "Yellow", summary: "This is yellow", color: .yellow),
        ColorItem(title: "Orange", summary: "This is orange", color: .orange),
        ColorItem(title: "Pink", summary: "This is pink", color: .pink),
        ColorItem(title: "Mint", summary: "This is Mint", color: .mint),
        ColorItem(title: "Teal", summary: "This is teal", color: .teal),
        ColorItem(title: "Cyan", summary: "This is cyan", color: .cyan),
        ColorItem(title: "Indigo", summary: "This is indigo", color: .indigo),
        ColorItem(title: "Purple", summary: "This is purple", color: .purple),
        ColorItem(title: "Gray", summary: "This is Gray", color: .gray),
        ColorItem(title: "Brown", summary: "This is Brown", color: .brown),
    ]
}

enum SwitchMode: CustomStringConvertible {

    case list, row, grid

    var iconName: String {
        switch self {
            case .list: return "list.bullet"
            case .row: return "rectangle.grid.1x2"
            case .grid: return "rectangle.grid.2x2"
        }
    }

    var description: String {
        switch self {
            case .list: return "List style"
            case .row: return "Row style"
            case .grid: return "Grid style"
        }
    }
    
}

struct SwitchGridPlayground: View {
    
    @State private var currentStyle: SwitchMode = .list
    @Namespace private var animation
    
    let gridItems = [
        GridItem(.flexible(minimum: 140), spacing: 0),
        GridItem(.flexible(minimum: 140), spacing: 0),
        GridItem(.flexible(minimum: 140), spacing: 0)
    ]
    
    let dataList = ColorItem.allItems
    
    var body: some View {
        
        NavigationStack {
            
            ScrollView {
                
                switch currentStyle {
                    case .list:
                    //let _ = print(dataList.first?.id)
                        LazyVStack {
                            ForEach(dataList) { item in
                                HStack {
                                    Color(item.color)
                                        .aspectRatio(1, contentMode: .fit)
                                    Spacer()
                                    Text(item.title)
                                }
                                .frame(maxHeight: 72)
                                .matchedGeometryEffect(id: item.id, in: animation)

                            }
                        }
                    case .row:
                    //let _ = print(dataList.first?.id)

                        LazyVStack {
                            
                            ForEach(dataList) { item in
                                VStack {
                                    Color(item.color)
                                        .aspectRatio(16 / 9, contentMode: .fit)
                                    Text(item.title)
                                    Text(item.summary)
                                }
                                .matchedGeometryEffect(id: item.id, in: animation)

                            }
                        }
                    case .grid:
                    //let _ = print(dataList.first?.id)

                        LazyVGrid(columns: gridItems, alignment: .center, spacing: 10) {
                            ForEach(dataList) { item in
                                
                                VStack {
                                    Color(item.color)
                                        .aspectRatio(4 / 3, contentMode: .fit)
                                    Text(item.title)
                                    
                                }.matchedGeometryEffect(id: item.id, in: animation)

                            }
                        }
                }
                
            }
            .navigationTitle("Grid switch mode")
            .toolbar {
                myToolBarContent()
            }
        }
    }
    
    //Button for switch grid
    @ToolbarContentBuilder
    func myToolBarContent() -> some ToolbarContent {
        ToolbarItem(placement: .navigationBarTrailing) {
            let nextStyle: SwitchMode = {
                return switch currentStyle {
                    case .list: .row
                    case .row: .grid
                    case .grid: .list
                }
            }()
             
            Menu {
                Picker(selection: $currentStyle, label: Text("Content style")) {
                    Label(SwitchMode.list.description, systemImage: SwitchMode.list.iconName)
                        .tag(SwitchMode.list)
                    Label(SwitchMode.row.description, systemImage: SwitchMode.row.iconName)
                        .tag(SwitchMode.row)
                    Label(SwitchMode.grid.description, systemImage: SwitchMode.grid.iconName)
                        .tag(SwitchMode.grid)
     
                }
                 
            } label: {
                Image(systemName: nextStyle.iconName)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 22)
     
            } primaryAction: {
                switch currentStyle {
                    case .list: currentStyle = .row
                    case .row: currentStyle = .grid
                    case .grid: currentStyle = .list
                }
                 
            }
             
        }
    }
    
}