Ant Design Mobile 选择器组件大全：Picker、Selector、Cascader 使用指南

Ant Design Mobile 选择器组件大全：Picker、Selector、Cascader 使用指南

【免费下载链接】ant-design-mobile Essential UI blocks for building mobile web apps. 项目地址: https://gitcode.com/gh_mirrors/an/ant-design-mobile

Ant Design Mobile 是一个专业的移动端UI组件库，提供了丰富的选择器组件来满足不同的业务场景需求。本文将详细介绍 Picker、Selector 和 Cascader 三大核心选择器组件的使用方法和最佳实践。

🎯 选择器组件概述

Ant Design Mobile 的选择器组件专为移动端设计，具有流畅的交互体验和优雅的视觉效果。这些组件广泛应用于表单选择、数据筛选、多级联动等场景。

Picker 选择器

Picker 是基础的选择器组件，支持单列和多列选择，常用于日期、时间、地区等数据的选择。

核心特性：

• 支持单列和多列数据
• 自定义标题和按钮文字
• 弹窗式交互设计
• 丰富的回调函数支持

Selector 选择器

Selector 是轻量级的选择器，适合在页面内直接展示选择项，常用于标签选择、单选/多选场景。

核心特性：

• 平铺式布局设计
• 支持单选和多选模式
• 灵活的自定义样式
• 简洁的API设计

Cascader 级联选择器

Cascader 支持多级联动选择，适用于省市区选择、分类选择等需要层级关系的场景。

核心特性：

• 多级联动数据支持
• 异步数据加载
• 自定义选项渲染
• 流畅的联动效果

📱 组件使用示例

Picker 基础用法

import { Picker } from 'antd-mobile'

const columns = [
  [
    { label: '周一', value: 'Mon' },
    { label: '周二', value: 'Tue' },
    { label: '周三', value: 'Wed' },
  ],
  [
    { label: '上午', value: 'am' },
    { label: '下午', value: 'pm' },
  ],
]

function App() {
  return (
    <Picker
      columns={columns}
      onConfirm={(value) => console.log(value)}
    />
  )
}

Selector 选择示例

import { Selector } from 'antd-mobile'

const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3', disabled: true },
]

function App() {
  return (
    <Selector
      options={options}
      defaultValue={['1']}
      onChange={(value) => console.log(value)}
    />
  )
}

Cascader 级联选择

import { Cascader } from 'antd-mobile'

const options = [
  {
    label: '北京',
    value: 'beijing',
    children: [
      { label: '朝阳区', value: 'chaoyang' },
      { label: '海淀区', value: 'haidian' },
    ],
  },
  {
    label: '上海',
    value: 'shanghai',
    children: [
      { label: '浦东新区', value: 'pudong' },
      { label: '静安区', value: 'jingan' },
    ],
  },
]

function App() {
  return (
    <Cascader
      options={options}
      onConfirm={(value) => console.log(value)}
    />
  )
}

🎨 自定义样式和主题

Ant Design Mobile 选择器组件支持丰富的自定义样式选项：

/* 自定义选择器样式 */
.adm-picker {
  --header-button-font-size: 16px;
  --title-font-size: 18px;
  --item-font-size: 16px;
  --item-height: 44px;
}

.adm-selector {
  --border-radius: 8px;
  --color: #1677ff;
}

🔧 高级功能配置

异步数据加载

const AsyncCascader = () => {
  const [options, setOptions] = useState([])
  
  const loadData = async (selectedOptions) => {
    const targetOption = selectedOptions[selectedOptions.length - 1]
    targetOption.loading = true
    
    // 模拟异步加载
    const children = await fetchChildren(targetOption.value)
    targetOption.children = children
    targetOption.loading = false
    
    setOptions([...options])
  }

  return (
    <Cascader
      options={options}
      loadData={loadData}
      changeOnSelect
    />
  )
}

自定义渲染

const CustomPicker = () => (
  <Picker
    columns={columns}
    renderLabel={(item) => (
      <div style={{ color: item.disabled ? '#ccc' : '#000' }}>
        {item.label}
      </div>
    )}
  />
)

📊 性能优化建议

1. 大数据量优化：对于大量数据的Picker，建议使用虚拟滚动
2. 内存管理：及时清理不再使用的选择器实例
3. 组件复用：合理使用React.memo和useCallback优化渲染性能

🚀 最佳实践

• 在表单中使用选择器时，结合Form组件实现数据校验
• 移动端优先考虑手势操作的流畅性
• 提供清晰的用户反馈和加载状态
• 适配不同的屏幕尺寸和设备类型

Ant Design Mobile 的选择器组件经过精心设计和优化，能够为移动端应用提供出色的用户体验。通过合理配置和使用，可以轻松实现各种复杂的选择需求。

【免费下载链接】ant-design-mobile Essential UI blocks for building mobile web apps. 项目地址: https://gitcode.com/gh_mirrors/an/ant-design-mobile