如何在 SwiftUI 上制作平滑的自定义选择器？

Question

我想在 swiftUI 中复制这个选择器。特别是，我在屏幕的左下角有一个按钮，当我单击它时，我想显示不同的图标（类似于下图，但垂直）。 只要我点击其中一个选项，按钮就会收缩回带有所选图标的初始形式（圆圈）。

关闭时：

打开时：

我对这种语言和一般的应用程序都不熟悉，我尝试使用弹出菜单，但这不是预期的结果，因为现在我有一个水平分段的选择器。

Answer 1

您不能使用内置的Picker执行此操作，因为它不提供这样的样式，并且PickerStyle不允许您创建自定义 styles（从 2022 版开始）。

您可以使用其他 SwiftUI 视图创建自己的实现。 这是我的简短尝试：

这是代码：

enum SoundOption {
    case none
    case alertsOnly
    case all
}

struct SoundOptionPicker: View {
    @Binding var option: SoundOption
    @State private var isExpanded = false

    var body: some View {
        HStack(spacing: 0) {
            button(for: .none, label: "volume.slash")
                .foregroundColor(.red)
            button(for: .alertsOnly, label: "speaker.badge.exclamationmark")
                .foregroundColor(.white)
            button(for: .all, label: "volume.2")
                .foregroundColor(.white)
        }
        .buttonStyle(.plain)
        .background {
            Capsule(style: .continuous).foregroundColor(.black)
        }
    }

    @ViewBuilder
    private func button(for option: SoundOption, label: String) -> some View {
        Button {
            withAnimation(.easeOut) {
                if isExpanded {
                    self.option = option
                    isExpanded = false
                } else {
                    isExpanded = true
                }
            }
        } label: {
            Image(systemName: label)
                .fontWeight(.bold)
                .padding(10)
        }
        .frame(width: shouldShow(option) ? buttonSize : 0, height: buttonSize)
        .opacity(shouldShow(option) ? 1 : 0)
        .clipped()
    }

    private var buttonSize: CGFloat { 44 }

    private func shouldShow(_ option: SoundOption) -> Bool {
        return isExpanded || option == self.option
    }
}

struct ContentView: View {
    @State var option = SoundOption.none

    var body: some View {
        ZStack {
            Color(hue: 0.6, saturation: 1, brightness: 0.2)
            SoundOptionPicker(option: $option)
                .shadow(color: .gray, radius: 3)
                .frame(width: 200, alignment: .trailing)
        }
    }
}