ArkUI Select：下拉一收，页面立刻清爽

这篇我们看 Select。

有些选项不值得全部摊在页面上。比如“轻量、标准、完整”，如果每个地方都平铺按钮，页面很快就会变挤。Select 的价值就是把这类短选项收起来，让页面先保持干净。

这个 Demo 只展示 Select 本身：选项数组、默认选中、按钮显示文案、选项文字样式和禁用态。不写 onSelect，也不做状态同步。

参考文档：

• https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui
• https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-ui-development

选项从数组开始

Select 接收一个选项数组，每一项至少有 value。

Select([{ value: '轻量' }, { value: '标准' }, { value: '完整' }])
  .selected(1)
  .value('标准')

selected(1) 表示默认选中第二项，索引从 0 开始。value('标准') 是按钮上直接显示的文字。

这两个最好对齐。索引选的是“标准”，按钮上却显示“完整”，用户会马上困惑。

文字样式可以分层

按钮本身的文字可以用 font 和 fontColor 调整。

Select([{ value: '轻量' }, { value: '标准' }, { value: '完整' }])
  .font({ size: 14, weight: 700 })
  .fontColor('#2563EB')

下拉选项也能单独设置文字样式，比如普通项和选中项可以做出一点差别。

.optionFontColor('#334155')
.selectedOptionFontColor('#2563EB')

颜色不用太多。Select 本来就是为了收纳信息，样式太花，反而会让它变成视觉中心。

箭头位置别制造意外

案例里用的是：

.arrowPosition(ArrowPosition.END)

这也是大多数人熟悉的方向：文字在前，箭头在后。除非你的页面有很强的设计理由，否则先用这个最稳。

禁用态也要说清楚

禁用 Select 很简单：

Select([{ value: '轻量' }, { value: '标准' }, { value: '完整' }])
  .enabled(false)

但页面上要告诉用户为什么点不开。比如“当前由管理员统一配置”，这句话比单纯变灰更有用。

打开案例页时，可以点开下拉看看选项样式。你项目里有没有那种选项越来越多、按钮越排越长的地方？这种地方通常就适合先收进 Select。

完整示例代码

文件位置：entry/src/main/ets/pages/arkUI/basic/ArkUISelectDemo.ets

@Entry
@Component
struct ArkUISelectDemo {
  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 4 }) {
      Text(title)
        .width('100%')
        .fontSize(16)
        .fontWeight(700)
        .fontColor('#0F172A')

      Text(desc)
        .width('100%')
        .fontSize(13)
        .fontColor('#64748B')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  selectBlock(title: string, desc: string, selectedIndex: number, value: string, color: string, bgColor: string,
    enabled: boolean) {
    Column({ space: 10 }) {
      Text(title)
        .width('100%')
        .fontSize(15)
        .fontWeight(700)
        .fontColor(enabled ? '#0F172A' : '#94A3B8')

      Text(desc)
        .width('100%')
        .fontSize(12)
        .fontColor(enabled ? '#64748B' : '#94A3B8')
        .lineHeight(18)

      Select([{ value: '轻量' }, { value: '标准' }, { value: '完整' }])
        .selected(selectedIndex)
        .value(value)
        .font({ size: 14, weight: 700 })
        .fontColor(color)
        .optionFont({ size: 14 })
        .optionFontColor('#334155')
        .selectedOptionFont({ size: 14, weight: 700 })
        .selectedOptionFontColor(color)
        .arrowPosition(ArrowPosition.END)
        .width('100%')
        .height(42)
        .enabled(enabled)
    }
    .width('100%')
    .padding(14)
    .backgroundColor(enabled ? '#FFFFFF' : '#F1F5F9')
    .border({ width: 1, color: enabled ? bgColor : '#CBD5E1' })
    .borderRadius(8)
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI Select')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('下拉一收，页面立刻清爽')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('这一页只看 Select 自己：选项数组、默认选中、按钮显示文案、选项文字样式和禁用态。不写 onSelect，也不做状态同步。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('选项很多时，别全摊开', '三个以上的短选项，平铺会占地方。收进 Select，页面会轻很多。')

          this.selectBlock('消息密度', '把“轻量、标准、完整”收成一个下拉选择。', 1, '标准', '#2563EB', '#BFDBFE', true)
          this.selectBlock('阅读节奏', '同样的选项，可以换一套场景文案。', 0, '轻量', '#0F766E', '#99F6E4', true)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('按钮上显示的是当前判断', 'selected 是索引，value 是按钮上展示的文字。二者最好对得上，别让用户看到错位文案。')

          this.selectBlock('同步范围', '默认显示“完整”，读者一眼知道当前选择。', 2, '完整', '#7C3AED', '#DDD6FE', true)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F5F3FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('禁用态要留出原因', '下拉点不开时，先用文案交代清楚，比只让按钮变灰更稳。')

          this.selectBlock('企业策略', '当前由管理员统一配置，暂时不能自己选择。', 1, '标准', '#64748B', '#CBD5E1', false)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F8FAFC')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}