如何為在按鈕標題之間移動的矩形設定影片？

我有一組按鈕，它們的行為類似于分段選擇器。當你點擊一個按鈕時，它會更新一個列舉狀態。我想在頂部顯示一個在按鈕之間運行的指示器，而不是顯示/隱藏。

這就是我所擁有的：

struct ContentView: View {
    enum PageItem: String, CaseIterable, Identifiable {
        case page1
        case page2

        var id: String { rawValue }

        var title: LocalizedStringKey {
            switch self {
            case .page1:
                return "Page 1"
            case .page2:
                return "Page 2"
            }
        }
    }

    @Namespace private var pagePickerAnimation
    @State private var selectedPage: PageItem = .page1

    var body: some View {
        HStack(spacing: 16) {
            ForEach(PageItem.allCases) { page in
                Button {
                    selectedPage = page
                } label: {
                    VStack {
                        if page == selectedPage {
                            Rectangle()
                                .fill(Color(.label))
                                .frame(maxWidth: .infinity)
                                .frame(height: 1)
                                .matchedGeometryEffect(id: "pageIndicator", in: pagePickerAnimation)
                        }
                        Text(page.title)
                            .padding(.vertical, 8)
                            .padding(.horizontal, 12)
                    }
                    .contentShape(Rectangle())
                }
            }
        }
        .padding()
    }
}

我認為這matchedGeometryEffect會有助于做到這一點，但我可能使用錯誤或存在更好的方法。我怎樣才能實作這一點，即按鈕頂部的黑線在一個按鈕上移動并移動到另一個按鈕上？

uj5u.com熱心網友回復：

你錯過了影片：

 struct ContentView: View {
    
    @Namespace private var pagePickerAnimation
    @State private var selectedPage: PageItem = .page1

    var body: some View {
        
        HStack(spacing: 16) {
            
            ForEach(PageItem.allCases) { page in
                
                Button { selectedPage = page } label: {
                    
                    VStack {
                        
                        if page == selectedPage {
                            
                            Rectangle()
                                .fill(Color(.label))
                                .frame(maxWidth: .infinity)
                                .frame(height: 1)
                                .matchedGeometryEffect(id: "pageIndicator", in: pagePickerAnimation)
                            
                        }
                        
                        
                        Text(page.title)
                            .padding(.vertical, 8)
                            .padding(.horizontal, 12)
                        
                        
                        
                    }
                    .contentShape(Rectangle())
                    
                }
            }
        }
        .padding()
        .animation(.default, value: selectedPage) // <<: here
    }
}



enum PageItem: String, CaseIterable, Identifiable {
    case page1
    case page2

    var id: String { rawValue }

    var title: LocalizedStringKey {
        switch self {
        case .page1:
            return "Page 1"
        case .page2:
            return "Page 2"
        }
    }
}

標籤：动画片 迅捷

上一篇：SwiftUIwithAnimation(.linear)上的持續時間引數

下一篇：如何修改CSS文本影片