如何在SwiftUI中实现可平滑展开的自定义图标选择Picker？

这是一个完全符合你需求的自定义Picker实现，代码里加了详细注释，适合新手理解：

import SwiftUI

struct CustomIconPicker: View {
    // 存储选中的图标名称，初始设为第一个图标
    @State private var selectedIcon = "house"
    // 控制选项列表的展开/收起状态
    @State private var isExpanded = false
    
    // 定义可选的图标列表，你可以根据需求替换成自己的图标
    private let iconOptions = ["house", "heart", "star", "bell", "person"]
    
    var body: some View {
        ZStack(alignment: .bottomLeading) {
            // 背景透明层，点击空白处收起列表
            Color.clear
                .onTapGesture {
                    withAnimation {
                        isExpanded = false
                    }
                }
            
            VStack(alignment: .leading, spacing: 8) {
                // 展开时显示的垂直选项列表
                if isExpanded {
                    ForEach(iconOptions, id: \.self) { icon in
                        Image(systemName: icon)
                            .font(.title)
                            .frame(width: 50, height: 50)
                            .background(Color.gray.opacity(0.2))
                            .cornerRadius(25)
                            .onTapGesture {
                                withAnimation {
                                    selectedIcon = icon
                                    isExpanded = false
                                }
                            }
                    }
                }
                
                // 主按钮：显示选中的图标，点击切换展开状态
                Image(systemName: selectedIcon)
                    .font(.title)
                    .frame(width: 50, height: 50)
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(25)
                    .onTapGesture {
                        withAnimation {
                            isExpanded.toggle()
                        }
                    }
            }
            .padding(20)
        }
        .ignoresSafeArea()
    }
}

// 预览视图
struct CustomIconPicker_Previews: PreviewProvider {
    static var previews: some View {
        CustomIconPicker()
    }
}

关键部分说明： #

• 状态管理：@State变量selectedIcon记录当前选中的图标，isExpanded控制选项列表的显示/隐藏
• 动画效果：withAnimation让展开和收起的过程带有平滑过渡，提升用户体验
• 交互逻辑：点击主按钮切换展开状态；点击任意图标选项，会更新选中图标并自动收起列表；点击屏幕空白处也能收起列表
• 布局控制：用ZStack的bottomLeading对齐把整个组件固定在屏幕左下角，VStack垂直排列展开的选项
• 自定义扩展：你可以替换iconOptions里的系统图标名称，换成自己的自定义图标（需要先把图标导入项目）

内容的提问来源于stack exchange，提问作者Francesco