HarmonyOS6.0开发之Select组件，就像一个“会收缩的魔法抽屉”

Hello！我是程序员Feri------ 13 年编程老炮，实战派技术人，拆解编程技巧、分享副业心得，记录程序员的进阶路，AI 时代一起稳稳向前。

在APP里做单选选择时，总不能让一堆按钮挤在界面上吧？今天要聊的Select组件，就像一个"会收缩的魔法抽屉"------平时只露一个选项，点一下就弹出所有选择，既省空间又清爽，专治"选项太多挤得慌"的难题！

一、Select组件：啥玩意儿？用来干啥？

Select组件的核心技能很简单：提供下拉单选功能。就像你点外卖时的"口味选择"------默认显示一个（比如"微辣"），点一下展开列表（微辣、中辣、特辣、不辣），选一个就自动收起，还不占地方～

它支持给选项加小图标，让选择更有辨识度，不过记住：每个选项里**"value（选项内容）是必填项"**，图标就是"可选装饰"，加不加看你的界面颜值需求～

基本用法长这样，像给抽屉里塞选项卡片：

typescript 复制代码

Select([
  { value: &#34;选项1&#34;, icon: 图标路径 }, // 带图标的选项
  { value: &#34;选项2&#34; } // 纯文字选项
])
.onSelect((索引, 内容) => {
  // 选完后的操作
})
.属性名(属性值) // 给抽屉打扮打扮

二、Select组件的"三大核心魔法"：别搞混啦！

想玩转这个"魔法抽屉"，先把这三个核心点吃透，像掌握抽屉的"开关密码"一样简单～

1. value属性：抽屉的"门面话"

默认显示在抽屉外的文本，比如你打开外卖APP，默认显示"微辣"，这个"微辣"就是value的值。

作用：告诉用户"当前选的啥"，没选之前先亮个默认选项撑场面～

2. selected属性：抽屉里的"默认心头好"

指定打开抽屉时，哪个选项是预先选中的（用索引表示，从0开始算）。

比如选项列表是[北京、南京、武汉]，selected(2)就默认选中"武汉"------相当于打开抽屉时，提前把"武汉"的卡片翻到最前面～

3. onSelect事件：选完后的"情报接收器"

这是最关键的"互动环节"！点选某个选项后，它会立马返回两个"情报"：

第一个是索引（number类型）：告诉我们选的是第几个选项（比如选"南京"是第1个，索引就是1）；
第二个是内容（string类型） ：直接返回选中的选项文字（比如"南京"）。
有了这两个情报，就能做后续操作啦～

三、实战演练：两个"趣味小案例"秒会用法

光说不练假把式，咱们用两个生活化的例子，手把手教你用Select组件，就像玩小游戏一样简单！

案例1：带图标的"城市旅行清单"

想做一个"选择旅行目的地"的下拉框，每个城市配个小图标，选完还能在控制台看到结果～

代码拆解：

typescript 复制代码

// 城市选择下拉框：带图标更直观
Select([
  { value: &#34;北京&#34;, icon: $r(&#34;sys.media.AI_phone&#34;) }, // 北京+手机图标
  { value: &#34;南京&#34;, icon: $r(&#34;sys.media.app_lock_picture&#34;) }, // 南京+锁定图标
  { value: &#34;武汉&#34;, icon: $r(&#34;sys.media.AI_form&#34;) }, // 武汉+表单图标
  { value: &#34;郑州&#34;, icon: $r(&#34;sys.media.AI_play&#34;) }, // 郑州+播放图标
  { value: &#34;上海&#34;, icon: $r(&#34;sys.media.AI_translation&#34;) }, // 上海+翻译图标
  { value: &#34;杭州&#34;, icon: $r(&#34;sys.media.Celia&#34;) } // 杭州+Celia图标
])
.width(&#34;80%&#34;) // 抽屉宽度占屏幕80%，不挤不窄
.value(&#34;武汉&#34;) // 默认显示"武汉"（门面话）
.selected(2) // 默认选中索引2的"武汉"（心头好）
.onSelect((i: number, v: string) => {
  // 选完后打印情报：索引和城市名
  console.log(`选中了第${i}个城市：${v}，准备出发！`);
})

案例2：联动文本的"书籍推荐官"

做一个选书籍的下拉框，选完后自动在界面上显示"你喜欢的书籍：XXX"，像个智能推荐小助手～

代码拆解：

typescript 复制代码

@Entry
@Component
struct Demo4 {
  // 先准备好书籍清单：像整理好的书单数组
  books: SelectOption[] = [
    { value: &#34;《三体》&#34; },
    { value: &#34;《水浒传》&#34; },
    { value: &#34;《围城》&#34; }
  ];
  // 存储选中的书籍信息，默认空字符串
  @State msg: string = '';

  build() {
    Column({ space: 20 }) {
      // 书籍选择下拉框：直接用数组传选项，更简洁
      Select(this.books)
        .width(&#34;50%&#34;) // 宽度占50%，精致小巧
        .onSelect((i: number, v: string) => {
          // 选完后更新文本内容，联动显示
          this.msg = `你喜欢的书籍：${v}`;
        });

      // 显示选中结果的文本：像个小黑板
      Text(this.msg)
        .fontSize(18)
        .fontWeight(FontWeight.Bold);
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center); // 居中显示，更美观
  }
}

四、小技巧：让你的Select组件更"贴心"

图标别乱加：只有需要区分选项时加图标（比如城市、分类），纯文字选项加图标反而显乱；
宽度要合适：根据选项文字长度设置width（比如城市名用80%，书籍名用50%），别太窄导致文字截断；
默认值要合理：value和selected最好对应上（比如value设为"武汉"，selected就设2），避免"显示的和默认选中的不一样"的小bug～

总结

Select组件就像APP里的"精简单选神器"------不用占用大量界面空间，还能让用户快速完成选择，不管是选城市、选书籍，还是选口味，用它准没错！

如果大家想考取鸿蒙开发者认证的，欢迎加入我的专属考试链接中：developer.huawei.com/consumer/cn...

按照上面的例子练一遍，分分钟就能搞定下拉单选需求，界面瞬间变清爽～