主页 / coding / 问题 / 79203531
Accepted
loonn
Asked: 2024-11-19 21:01:37 +0800 CST

SwiftUI 分段控件选择器

  • 772

我正在尝试实现一个分段选择器，并添加一个附加行为，即再次点击所选选项即可取消选择。但是，此代码似乎无法按预期运行。

Picker("",selection: $selectedOption) {
    ForEach(["A","B","C","D","E"], id:\.self) { option in
        Text(option)
            .onTapGesture {
                if selectedOption == option {
                    selectedOption = ""
                }
            }
    }
}
.pickerStyle(.segmented)
swift

1 个回答

  1. Best Answer

    这种行为可以通过将所选选项与覆盖层叠加并将点击手势附加到覆盖层来实现。点击后，可以取消选择。

    • 获得正确定位的一种方法是使用.matchedGeometryEffect。
    • 使用文本标签本身作为的源是行不通的.matchedGeometryEffect，但在后台使用不可见的占位符是可行的。
    • 使用选择器选项的id作为匹配的id。
    • 将应用.contentShape到透明覆盖层，使其能够接受点击手势。
    struct ContentView: View {
    let options = ["A", "B", "C", "D", "E"]
    @State private var selectedOption = ""
    @Namespace private var ns

    var body: some View {
        Picker("", selection: $selectedOption) {
            ForEach(options, id:\.self) { option in
                Text(option)
            }
        }
        .pickerStyle(.segmented)
        .background {

            // A row of placeholders
            HStack(spacing: 0) {
                ForEach(options, id: \.self) { option in
                    Color.clear
                        .matchedGeometryEffect(id: option, in: ns, isSource: true)
                }
            }
        }
        .overlay {
            if selectedOption != "" {
                Color.clear
                    .contentShape(Rectangle())
                    .matchedGeometryEffect(id: selectedOption, in: ns, isSource: false)
                    .onTapGesture {
                        selectedOption = ""
                    }
            }
        }
    }
}

    动画片

    • 0

相关问题