这个控件叫：Picker/选择器/拾取器

Posted 2023-04-13

参考技术A Picker（选择器/拾取器/选取器）是指提供多个选项集合供用户选择其中一项的控件。在不同平台Picker的具体控件表现形式不同。在ios端Picker一般称之为滚轮选择器，而在android端，Picker的主要表现形式是Dialog（对话框）或dropdown menu（下拉菜单）。

在移动端Picker最常见的用途是选择时间，iOS和Android将时间相关的Picker封装成原生控件。

如果Date Picker呈现形式是日历，也可以称之为Calendar Date Picker（日历选择器）。Date Range Picker（日期范围选择器）是用来选择某个日期范围，常用于旅行、住宿等时间周期相关事项。

Picker展示区域有限，大部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用Picker。

这个控件叫：Badge/徽标/小红点
这个控件叫：A-Z index/字母索引导航
这个控件叫：Segment Controls/分段控件（附录与Tabs的区别）
这个控件叫：Skeleton Screen/加载占位图
这个控件叫：Page Indicator/Page Controls/页面指示器
这个控件叫：Stepper/步进器
这个控件叫：Switch/开关/滑动开关/切换开关
Toast（吐司提示）的曾经、现在与未来
这个控件叫：Soft Keyboard/Virtual Keyboard/软键盘/虚拟键盘
这个控件叫：Action Sheet/动作菜单/动作面板/行动列表
这个控件叫：Popover/气泡弹出框/弹出式气泡/气泡
这个控件叫：Text fields/输入框/文本框
这个控件可能叫：Notice Bar/通告栏

带有选取器（分段控件）子视图和选择手势的列表项

【中文标题】带有选取器（分段控件）子视图和选择手势的列表项

【英文标题】：List Item with Picker (segmented control) subview and selection gesture

【发布时间】：2021-03-07 13:02:40

【问题描述】：

我有一个包含 Picker 视图（分段控制样式）的列表和项目。我想分别处理选择和选择器状态。未选择列表项时应禁用选择器。

问题是：

第一次点击 - 选择列表项。 （选定 = 真） 点击选择器 - 设置选择 = false

在 UIKit 上，Button/SegmentControl/etc...抓住“点击”，不要进入 TableView 选择状态。

struct ListView: View 
    @State var selected = Set<Int>()
    let items = (1...10).map  ItemDataModel(id: $0) 
    
    var body: some View 
        List(items)  item in
            ListItemView(dataModel: item)
                .onTapGesture  if !(selected.remove(item.id) != .none)  selected.insert(item.id) 
        
    


struct ListItemView: View 
    @ObservedObject var dataModel: ItemDataModel
    
    var body: some View 
        let pickerBinding = Binding<Int>(
            get:  dataModel.state?.rawValue ?? -1 ,
            set:  dataModel.state = DataState(rawValue: $0) 
        )
        HStack 
            Text(dataModel.title)
            Spacer()
            Picker("sdf", selection: pickerBinding) 
                Text("State 1").tag(0)
                Text("State 2").tag(1)
                Text("State 3").tag(2)
            .pickerStyle(SegmentedPickerStyle())
        
    



enum DataState: Int 
    case state1, state2, state3


class ItemDataModel: Hashable, Identifiable, ObservableObject 
    let id: Int
    let title: String
    @Published var state: DataState? = .state1
    
    init(id: Int) 
        self.id = id
        title = "item \(id)"
    
    
    func hash(into hasher: inout Hasher) 
        hasher.combine(title)
    
    
    static func == (lhs: ItemDataModel, rhs: ItemDataModel) -> Bool 
        return lhs.id == rhs.id
    

[请尝试忽略语法错误（如果存在）并专注于手势问题]

【参考方案1】：

一种可能的解决方案是仅在未选择 Picker 时应用修饰符：

struct ListView: View 
    @State var selected = Set<Int>()
    let items = (1 ... 10).map  ItemDataModel(id: $0) 

    var body: some View 
        List(items)  item in
            if selected.contains(item.id) 
                ListItemView(dataModel: item)
             else 
                ListItemView(dataModel: item)
                    .disabled(true)
                    .onTapGesture 
                        if !(selected.remove(item.id) != .none) 
                            selected.insert(item.id)
                        
                    
            
        
    

【讨论】：

场景：当项目被“选中”并且我希望更改选择器上的选择时。结果：项目未被选中，而不是通过 Picker 更改状态枚举。我不明白你的建议如何解决这个问题

@gutte 我不确定我是否了解您的需求。您能否更清楚地描述您的问题 - 可能将所有场景添加到问题中？