ArkUI Button：按钮分清主次，用户才知道往哪走

这次我们只看 Button。不写登录，不写提交，也不弹窗，先把按钮本身讲明白。

按钮最怕什么？一排全是蓝色，一眼看过去每个都像主操作。用户不知道该点哪个，后面逻辑写得再漂亮也白搭。

所以这个案例只做几种按钮：主按钮、次按钮、危险按钮、弱按钮、整行按钮、并排按钮和禁用态。

参考文档：

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

先分出主次

主按钮给最重要的动作。次按钮给辅助动作。这个判断比颜色更重要。

Button('主按钮')
  .width('100%')
  .height(44)
  .fontSize(15)
  .fontWeight(700)
  .fontColor('#FFFFFF')
  .backgroundColor('#2563EB')
  .borderRadius(8)

Button('次按钮')
  .width('100%')
  .height(44)
  .fontSize(15)
  .fontColor('#1D4ED8')
  .backgroundColor('#DBEAFE')
  .borderRadius(8)

这里把主按钮做得更重，次按钮做得更轻。不是说蓝色就一定对，只是先让两者别长得一样。

危险动作别藏起来

删除、退出登录、覆盖数据，这类按钮最好单独拎出来。

Button('危险按钮')
  .width('100%')
  .height(44)
  .fontSize(15)
  .fontWeight(700)
  .fontColor('#FFFFFF')
  .backgroundColor('#DC2626')
  .borderRadius(8)

Button('弱按钮')
  .width('100%')
  .height(44)
  .fontSize(15)
  .fontColor('#334155')
  .backgroundColor('#F1F5F9')
  .borderRadius(8)

危险按钮不用做得吓人，但要让人知道它不是普通操作。弱按钮则相反，适合那些“点不点都行”的轻动作。

宽度决定按钮的语气

整行按钮看起来更像“我要你现在完成这件事”。并排按钮更像“这里有两个选择”。

Button('整行按钮')
  .width('100%')
  .height(46)
  .fontSize(15)
  .fontWeight(700)

Row({ space: 10 }) {
  Button('取消')
    .layoutWeight(1)
    .height(40)

  Button('确定')
    .layoutWeight(1)
    .height(40)
}

并排按钮这里用了 layoutWeight(1)，让两个按钮平分宽度。比手写固定宽度稳一点，尤其是屏幕变宽变窄的时候。

禁用态别只靠颜色骗自己

有些页面只是把按钮调灰，但实际还能点。这个坑很常见，也很烦。

Button('暂不可用')
  .width('100%')
  .height(44)
  .fontSize(15)
  .fontColor('#94A3B8')
  .backgroundColor('#E2E8F0')
  .borderRadius(8)
  .enabled(false)

关键是最后的 enabled(false)。样式告诉用户“不能点”，属性也真的让它不能点。

看案例时看什么

打开案例页后，重点看这几组对比：

• 主按钮是不是明显更重要。
• 危险按钮有没有和普通按钮拉开。
• 整行按钮和并排按钮的语气是不是不一样。
• 禁用态是不是看起来不可点，也真的不可点。

这篇还是不跑 hvigor。打开案例页面看效果就够了。

你可以顺手改一下

把主按钮背景色换成你项目里的品牌色，再把次按钮改浅一点。只要主次能拉开，不一定非要照抄这个配色。

你见过最容易误点的按钮是什么样的？主按钮太多、危险按钮不明显，还是禁用态看起来像能点？评论区吐槽一下。

完整示例代码

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

@Entry
@Component
struct ArkUIButtonDemo {
  @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)
  }

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

        Text('按钮先分清主次，再谈好看')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('今天我们先不写点击后的业务，只把按钮角色摆清楚：哪个是主操作，哪个是辅助，哪个需要提醒风险。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('主按钮和次按钮', '主按钮负责最重要的动作，次按钮负责辅助动作。一个区域里不要到处都是主按钮。')

          Button('主按钮')
            .width('100%')
            .height(44)
            .fontSize(15)
            .fontWeight(700)
            .fontColor('#FFFFFF')
            .backgroundColor('#2563EB')
            .borderRadius(8)

          Button('次按钮')
            .width('100%')
            .height(44)
            .fontSize(15)
            .fontColor('#1D4ED8')
            .backgroundColor('#DBEAFE')
            .borderRadius(8)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F8FAFC')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('危险按钮和弱按钮', '删除、退出登录、覆盖数据这类动作要单独区分。弱按钮适合不想打断用户的轻操作。')

          Button('危险按钮')
            .width('100%')
            .height(44)
            .fontSize(15)
            .fontWeight(700)
            .fontColor('#FFFFFF')
            .backgroundColor('#DC2626')
            .borderRadius(8)

          Button('弱按钮')
            .width('100%')
            .height(44)
            .fontSize(15)
            .fontColor('#334155')
            .backgroundColor('#F1F5F9')
            .borderRadius(8)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#FFFFFF')
        .border({ width: 1, color: '#E2E8F0' })
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('宽度和高度', '整行按钮适合表单提交，紧凑按钮适合工具区。不要把所有按钮都写成同一个尺寸。')

          Button('整行按钮')
            .width('100%')
            .height(46)
            .fontSize(15)
            .fontWeight(700)
            .fontColor('#FFFFFF')
            .backgroundColor('#0F766E')
            .borderRadius(8)

          Row({ space: 10 }) {
            Button('取消')
              .layoutWeight(1)
              .height(40)
              .fontSize(14)
              .fontColor('#334155')
              .backgroundColor('#E2E8F0')
              .borderRadius(8)

            Button('确定')
              .layoutWeight(1)
              .height(40)
              .fontSize(14)
              .fontColor('#FFFFFF')
              .backgroundColor('#0F172A')
              .borderRadius(8)
          }
          .width('100%')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F0FDFA')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('禁用态', '禁用态不是把颜色调淡就完事，用户要能一眼看出这个动作现在不能点。')

          Button('暂不可用')
            .width('100%')
            .height(44)
            .fontSize(15)
            .fontColor('#94A3B8')
            .backgroundColor('#E2E8F0')
            .borderRadius(8)
            .enabled(false)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#FFF7ED')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}