主页 / coding / 问题 / 77943728
Accepted
Z S
Asked: 2024-02-06 04:15:11 +0800 CST

使用matchedGeometryEffect为边框创建“滑动”效果

  • 772

我正在尝试创建一个带有水平行选项的自定义“选项卡”选择控件，用户可以选择 N 个选项之一。“选定”选项周围将有一个“边框”。这是我制作的原型：

@objc public enum ContactTabStyle: Int, CaseIterable {
    case one, two, three, four
    
    public var segmentTitle: String {
        switch self {
            case .one: return "Hello"
            case .two: return "World"
            case .three: return "Three"
            case .four: return "Four"
        }
    }
}

struct SwiftUIView: View {
    let segments: [ContactTabStyle] = [.one, .two, .three, .four]
    @State var selectedTab: ContactTabStyle = .one
    
    @Namespace var tabName
    
    var body: some View {
        HStack {
            ForEach(segments, id: \.self) { segment in
                Button {
                    selectedTab = segment
                } label: {
                    Text(segment.segmentTitle)
                        .padding(12.0)
                        .border(selectedTab == segment ? Color.blue : Color.clear, width: 3.0)
                        .cornerRadius(4.0)
                        .matchedGeometryEffect(id: segment.segmentTitle, in: tabName) // doesn't work
                }
            }
        }
    }
}

该视图看起来和工作正常，但我无法让动画从一个选择“滑动”到另一个选择。它只是执行正常的 SwiftUI 淡入淡出。我相信我应该使用matchedGeometryEffect来获得滑动效果，但它似乎不起作用。我也尝试将 添加matchedGeometryEffect到按钮周围的标签，但它也不起作用。

这是它的预览：

在此输入图像描述

swiftui

2 个回答

  1. Best Answer

    sText不需要匹配几何图形 -需要匹配几何图形的是边框。

    如果你用来border制作边框，边框并不是它自己的“视图”，所以你不能只用 来修改边框matchedGeometryEffect。一种解决方法是将边框添加为 thebackground或Textthe Button（这些会产生略有不同的效果 - 看看您更喜欢哪个）。

    Button {
    selectedTab = segment
} label: {
    Text(segment.segmentTitle)
        .padding(12.0)
        .background {
            if selectedTab == segment {
                RoundedRectangle(cornerRadius: 4)
                    .stroke(lineWidth: 3)
                    // every border should have the same id!
                    .matchedGeometryEffect(id: "selection", in: tabName)
            }
        }
        
}

    或者

    Button {
    selectedTab = segment
} label: {
    Text(segment.segmentTitle)
        .padding(12.0)
        
}
.background {
    if selectedTab == segment {
        RoundedRectangle(cornerRadius: 4)
            .stroke(Color.accentColor, style: .init(lineWidth: 3))
            .matchedGeometryEffect(id: "selection", in: tabName)
    }
}
.animation(.default, value: selectedTab)
    • 1

  2. matchedGeometryEffect()适用于更改单个元素的位置时。在这里，您要更改的是 4 个不同元素的颜色。

    我想说你必须将你的盒子定义为 a View（或 aShape等），其位置在某种程度上取决于selectedTab。然后它应该正确地动画化。

    • 0

相关问题