HarmonyOS6 RcButton 组件使用示例与最佳实践

HarmonyOS6 RcButton 组件使用示例与最佳实践 | 极客日志

// 导入必要的组件和类型
import { RcButton, RcButtonType } from 'rchoui'
// 使用示例
Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.px(10), cross: LengthMetrics.px(10) } }) {
  RcButton({ text: '默认按钮', type: RcButtonType.DEFAULT })
  RcButton({ text: '主要按钮', type: RcButtonType.PRIMARY })
  RcButton({ text: '成功按钮', type: RcButtonType.SUCCESS })
  RcButton({ text: '警告按钮', type: RcButtonType.WARNING })
  RcButton({ text: '错误按钮', type: RcButtonType.ERROR })
  RcButton({ text: '信息按钮', type: RcButtonType.INFO })
}

类型	枚举值	使用场景	视觉特点
默认按钮	`RcButtonType.DEFAULT`	普通操作、次要功能	灰色系，视觉权重低
主要按钮	`RcButtonType.PRIMARY`	主要操作、核心功能	蓝色系，视觉权重最高
成功按钮	`RcButtonType.SUCCESS`	成功提示、确认操作	绿色系，表示正向反馈
警告按钮	`RcButtonType.WARNING`	警告提示、需谨慎操作	橙色系，提示用户注意
错误按钮	`RcButtonType.ERROR`	危险操作、删除功能	红色系，强烈警示
信息按钮	`RcButtonType.INFO`	信息提示、辅助操作	青色系，中性提示

Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.px(10), cross: LengthMetrics.px(10) } }) {
  RcButton({ text: '默认镂空', plain: true })
  RcButton({ text: '主要镂空', type: RcButtonType.PRIMARY, plain: true })
  RcButton({ text: '成功镂空', type: RcButtonType.SUCCESS, plain: true })
  RcButton({ text: '细边框', type: RcButtonType.PRIMARY, plain: true, hairline: true })
}

Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.px(10), cross: LengthMetrics.px(10) } }) {
  RcButton({ text: '默认文本', textButton: true })
  RcButton({ text: '主要文本', type: RcButtonType.PRIMARY, textButton: true })
  RcButton({ text: '成功文本', type: RcButtonType.SUCCESS, textButton: true })
  RcButton({ text: '错误文本', type: RcButtonType.ERROR, textButton: true })
}

import { RcButtonSize } from 'rchoui'
Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.px(10), cross: LengthMetrics.px(10) } }) {
  RcButton({ text: '大号按钮', btnSize: RcButtonSize.LARGE, type: RcButtonType.PRIMARY })
  RcButton({ text: '普通按钮', btnSize: RcButtonSize.NORMAL, type: RcButtonType.PRIMARY })
  RcButton({ text: '小号按钮', btnSize: RcButtonSize.SMALL, type: RcButtonType.PRIMARY })
  RcButton({ text: '迷你按钮', btnSize: RcButtonSize.MINI, type: RcButtonType.PRIMARY })
}

尺寸	枚举值	高度	内边距 (横向)	字号	使用场景
大号	`RcButtonSize.LARGE`	50px	20px	18px	页面主要操作、移动端
普通	`RcButtonSize.NORMAL`	40px	16px	16px	默认尺寸、通用场景
小号	`RcButtonSize.SMALL`	32px	12px	14px	工具栏、表格操作
迷你	`RcButtonSize.MINI`	24px	8px	12px	标签、筛选条件

Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.px(10), cross: LengthMetrics.px(10) } }) {
  // 自定义宽高
  RcButton({ text: '自定义宽高', btnWidth: 200, btnHeight: 60, type: RcButtonType.PRIMARY })
  // 自定义字号
  RcButton({ text: '大号文字', fontSize: 20, type: RcButtonType.SUCCESS })
  // 完全自定义
  RcButton({ text: '完全自定义', btnWidth: 180, btnHeight: 50, fontSize: 18, bordersRadius: 25, color: '#9b59b6' })
}

import { RcButtonShape } from 'rchoui'
Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.px(10), cross: LengthMetrics.px(10) } }) {
  RcButton({ text: '方形按钮', shape: RcButtonShape.SQUARE, type: RcButtonType.PRIMARY })
  RcButton({ text: '圆角按钮', shape: RcButtonShape.ROUND, type: RcButtonType.PRIMARY })
  RcButton({ text: '圆', shape: RcButtonShape.CIRCLE, type: RcButtonType.PRIMARY, btnWidth: 50, btnHeight: 50 })
}

形状	枚举值	圆角值	视觉效果	适用场景
方形	`RcButtonShape.SQUARE`	4px	轻微圆角，现代感	后台管理、数据表格
圆角	`RcButtonShape.ROUND`	高度的一半	两端圆润，友好感	移动应用、社交类 APP
圆形	`RcButtonShape.CIRCLE`	50%	完全圆形，聚焦感	悬浮按钮、快捷操作

Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.px(10), cross: LengthMetrics.px(10) } }) {
  RcButton({ text: '默认禁用', disabled: true, textColor: '#000000' })
  RcButton({ text: '主要禁用', disabled: true, textColor: '#000000' })
  RcButton({ text: '镂空禁用', plain: true, disabled: true, textColor: '#000000' })
  RcButton({ text: '文本禁用', textButton: true, disabled: true, textColor: '#000000' })
}.width('100%')

@Component struct FormExample {
  @State username: string = ''
  @State password: string = ''
  build() {
    Column({ space: 20 }) {
      TextInput({ placeholder: '请输入用户名' }).onChange((value) => this.username = value)
      TextInput({ placeholder: '请输入密码', type: InputType.Password }).onChange((value) => this.password = value)
      // 根据表单验证结果动态控制禁用状态
      RcButton({ 
        text: '登录', 
        type: RcButtonType.PRIMARY, 
        block: true, 
        disabled: !this.username || !this.password,
        onBtnClick: () => {
          console.log('执行登录')
        }
      })
    }
  }
}

@Component struct LoadingExample {
  @State loadingState: boolean = false
  build() {
    Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.px(10), cross: LengthMetrics.px(10) } }) {
      // 静态加载状态
      RcButton({ text: '加载按钮', loading: true, type: RcButtonType.PRIMARY })
      // 自定义加载文字
      RcButton({ loadingText: '加载中...', loading: true, type: RcButtonType.SUCCESS })
      // 仅显示加载动画
      RcButton({ loading: true, type: RcButtonType.WARNING })
      // 动态控制加载状态
      RcButton({ 
        text: this.loadingState ? '加载中...' : '点击加载', 
        loading: this.loadingState, 
        type: RcButtonType.PRIMARY,
        onBtnClick: () => {
          this.loadingState = true
          setTimeout(() => {
            this.loadingState = false
          }, 2000)
        }
      })
    }
  }
}

@Component struct AsyncOperationExample {
  @State loading: boolean = false
  @State resultMessage: string = ''
  // 模拟 API 请求
  async submitData() {
    this.loading = true
    this.resultMessage = ''
    try {
      // 模拟网络请求
      await new Promise((resolve) => setTimeout(resolve, 2000))
      this.resultMessage = '提交成功！'
    } catch (error) {
      this.resultMessage = '提交失败，请重试'
    } finally {
      this.loading = false
    }
  }
  build() {
    Column({ space: 15 }) {
      RcButton({ 
        text: '提交数据', 
        loading: this.loading, 
        loadingText: '提交中...', 
        type: RcButtonType.PRIMARY, 
        block: true,
        onBtnClick: () => this.submitData()
      })
      if (this.resultMessage) {
        Text(this.resultMessage).fontSize(14).fontColor(this.resultMessage.includes('成功') ? '#52c41a' : '#ff4d4f')
      }
    }
  }
}

Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.px(10), cross: LengthMetrics.px(10) } }) {
  // 自定义背景色
  RcButton({ text: '自定义背景色', color: '#7232dd' })
  // 渐变色背景
  RcButton({ text: '渐变色', color: 'linear-gradient(to right, #4254d8, #d533ba)' })
  // 自定义文字颜色（镂空按钮）
  RcButton({ text: '自定义文字色', textColor: '#ff6b6b', plain: true })
  // 自定义边框颜色（镂空按钮）
  RcButton({ text: '自定义边框色', bordersColor: '#00d4aa', plain: true })
  // 组合自定义
  RcButton({ text: '组合自定义', color: '#9b59b6', textColor: '#ffffff', bordersColor: '#8e44ad' })
}

属性	类型	说明	适用场景
`color`	string	ResourceColor	背景颜色，支持纯色和渐变
`textColor`	string	ResourceColor	文字颜色
`bordersColor`	string	ResourceColor	边框颜色

// 定义品牌色常量
const BrandColors = {
  primary: '#5B8FF9',
  success: '#52C41A',
  warning: '#FAAD14',
  danger: '#F5222D',
  gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
}
// 使用品牌色
RcButton({ text: '品牌主色', color: BrandColors.primary, type: RcButtonType.PRIMARY })
RcButton({ text: '渐变风格', color: BrandColors.gradient })

Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.px(10), cross: LengthMetrics.px(10) } }) {
  // 粗边框
  RcButton({ text: '粗边框', plain: true, bordersWidth: 3, bordersColor: '#3c9cff', type: RcButtonType.PRIMARY })
  // 自定义圆角
  RcButton({ text: '自定义圆角', bordersRadius: 20, type: RcButtonType.SUCCESS })
  // 完全方形
  RcButton({ text: '完全方形', bordersRadius: 0, type: RcButtonType.WARNING })
  // 超大圆角
  RcButton({ text: '超大圆角', bordersRadius: 30, btnHeight: 60, type: RcButtonType.ERROR })
}

// 细线边框（0.5px 效果）
RcButton({ text: '细线边框', plain: true, hairline: true, type: RcButtonType.PRIMARY })
// 不同粗细的边框对比
Row({ space: 10 }) {
  RcButton({ text: '1px', plain: true, bordersWidth: 1 })
  RcButton({ text: '2px', plain: true, bordersWidth: 2 })
  RcButton({ text: '3px', plain: true, bordersWidth: 3 })
}
// 圆角渐变：从方形到圆形
Row({ space: 10 }) {
  RcButton({ text: '0', bordersRadius: 0, btnWidth: 60 })
  RcButton({ text: '4', bordersRadius: 4, btnWidth: 60 })
  RcButton({ text: '8', bordersRadius: 8, btnWidth: 60 })
  RcButton({ text: '20', bordersRadius: 20, btnWidth: 60 })
}

Flex({ wrap: FlexWrap.Wrap, space: { main: LengthMetrics.px(10), cross: LengthMetrics.px(10) } }) {
  RcButton({ text: '块级按钮', block: true, type: RcButtonType.PRIMARY })
  RcButton({ text: '块级镂空', block: true, type: RcButtonType.SUCCESS, plain: true })
  RcButton({ text: '块级文本', block: true, type: RcButtonType.WARNING, textButton: true })
}

@Component struct MobileFooterExample {
  build() {
    Column() {
      // 页面内容区域
      Scroll() {
        Column({ space: 20 }) {
          Text('页面内容...')
        }
      }.layoutWeight(1)
      // 底部固定操作栏
      Column({ space: 12 }) {
        RcButton({ text: '立即购买', block: true, type: RcButtonType.PRIMARY, btnHeight: 48, fontSize: 16 })
        RcButton({ text: '加入购物车', block: true, plain: true, type: RcButtonType.PRIMARY, btnHeight: 48, fontSize: 16 })
      }.padding({ left: 16, right: 16, bottom: 20 }).backgroundColor('#ffffff')
    }.height('100%')
  }
}

// 表单操作按钮组（右对齐）
Row({ space: 10 }) {
  RcButton({ text: '取消', type: RcButtonType.DEFAULT, plain: true, onBtnClick: () => { console.log('取消操作') } })
  RcButton({ text: '确定', type: RcButtonType.PRIMARY, onBtnClick: () => { console.log('确定操作') } })
}.width('100%').justifyContent(FlexAlign.End)
// 带符号的操作按钮组
Row({ space: 10 }) {
  RcButton({ text: '编辑', icon: 'icon-houi_flash', type: RcButtonType.PRIMARY, btnSize: RcButtonSize.SMALL })
  RcButton({ text: '删除', icon: 'icon-houi_tv', type: RcButtonType.ERROR, btnSize: RcButtonSize.SMALL })
  RcButton({ text: '分享', icon: 'icon-houi_github', type: RcButtonType.SUCCESS, btnSize: RcButtonSize.SMALL })
}.width('100%')

// 水平排列，右侧对齐
Row({ space: 12 }) {
  RcButton({ text: '取消', plain: true })
  RcButton({ text: '确定', type: RcButtonType.PRIMARY })
}.width('100%').justifyContent(FlexAlign.End)

// 小尺寸，文本按钮
Row({ space: 8 }) {
  RcButton({ text: '编辑', textButton: true, btnSize: RcButtonSize.SMALL })
  RcButton({ text: '删除', textButton: true, btnSize: RcButtonSize.SMALL, type: RcButtonType.ERROR })
}

@State activeTab: number = 0
Row({ space: 0 }) {
  RcButton({ 
    text: '全部', 
    type: this.activeTab === 0 ? RcButtonType.PRIMARY : RcButtonType.DEFAULT, 
    plain: this.activeTab !== 0, 
    shape: RcButtonShape.SQUARE,
    onBtnClick: () => this.activeTab = 0 
  })
  RcButton({ 
    text: '进行中', 
    type: this.activeTab === 1 ? RcButtonType.PRIMARY : RcButtonType.DEFAULT, 
    plain: this.activeTab !== 1, 
    shape: RcButtonShape.SQUARE,
    onBtnClick: () => this.activeTab = 1 
  })
  RcButton({ 
    text: '已完成', 
    type: this.activeTab === 2 ? RcButtonType.PRIMARY : RcButtonType.DEFAULT, 
    plain: this.activeTab !== 2, 
    shape: RcButtonShape.SQUARE,
    onBtnClick: () => this.activeTab = 2 
  })
}

@Component struct ClickEventExample {
  @State clickCount: number = 0
  build() {
    Column({ space: 15 }) {
      Text(`点击次数：${this.clickCount}`).fontSize(16)
      RcButton({ 
        text: '点击我', 
        type: RcButtonType.PRIMARY,
        onBtnClick: () => {
          this.clickCount++
        }
      })
      RcButton({ 
        text: '重置计数', 
        type: RcButtonType.WARNING, 
        plain: true,
        onBtnClick: () => {
          this.clickCount = 0
        }
      })
    }
  }
}

onBtnClick?: (event: ClickEvent) => void
// ClickEvent 包含的信息：
// - x: 点击的 X 坐标
// - y: 点击的 Y 坐标
// - timestamp: 时间戳
// - source: 事件源信息

// 1. 表单提交
RcButton({ text: '提交', type: RcButtonType.PRIMARY, onBtnClick: () => {
  // 表单验证
  if (this.validateForm()) {
    // 提交数据
    this.submitForm()
  }
}})
// 2. 导航跳转
RcButton({ text: '查看详情', type: RcButtonType.PRIMARY, onBtnClick: () => {
  router.pushUrl({ url: 'pages/Detail', params: { id: this.itemId } })
}})
// 3. 对话框触发
RcButton({ text: '删除', type: RcButtonType.ERROR, onBtnClick: () => {
  AlertDialog.show({ 
    title: '确认删除', 
    message: '此操作不可恢复，确定要删除吗？', 
    primaryButton: { value: '取消', action: () => {} }, 
    secondaryButton: { value: '确定', action: () => { this.deleteItem() } } 
  })
}})

@Component struct ThrottleExample {
  @State clickCount: number = 0
  build() {
    Column({ space: 15 }) {
      Text(`点击次数：${this.clickCount}`).fontSize(16)
      // 普通按钮（无节流）
      RcButton({ 
        text: '普通点击', 
        type: RcButtonType.DEFAULT,
        onBtnClick: () => {
          this.clickCount++
          console.log('点击时间：' + Date.now())
        }
      })
      // 节流按钮（1 秒内只能点击一次）
      RcButton({ 
        text: '节流按钮 (1 秒)', 
        type: RcButtonType.SUCCESS, 
        throttleTime: 1000,
        onBtnClick: () => {
          this.clickCount++
          console.log('节流点击：' + Date.now())
        }
      })
      // 长节流（3 秒）- 适合提交操作
      RcButton({ 
        text: '提交 (3 秒节流)', 
        type: RcButtonType.PRIMARY, 
        throttleTime: 3000,
        onBtnClick: () => {
          console.log('执行提交操作')
          this.clickCount++
        }
      })
    }
  }
}

操作类型	推荐节流时间	说明
普通点击	300-500ms	防止误触，保持流畅
数据提交	1000-2000ms	防止重复提交
接口调用	1500-3000ms	保护后端接口
支付操作	3000-5000ms	防止重复扣款

@State submitting: boolean = false
RcButton({ 
  text: '提交', 
  loading: this.submitting, 
  loadingText: '提交中...', 
  type: RcButtonType.PRIMARY, 
  throttleTime: 2000,
  onBtnClick: async () => {
    this.submitting = true
    try {
      await this.submitData()
      promptAction.showToast({ message: '提交成功' })
    } catch (error) {
      promptAction.showToast({ message: '提交失败' })
    } finally {
      this.submitting = false
    }
  }
})

import { RcButton, RcButtonType, RcButtonSize, RcButtonShape } from 'rchoui'

HarmonyOS6 RcButton 组件使用示例与最佳实践

文档说明

一、基础使用

1.1 按钮类型展示

1.2 镂空按钮

1.3 文本按钮

二、尺寸控制

2.1 预设尺寸

2.2 自定义尺寸

三、形状变化

3.1 三种预设形状

四、状态控制

4.1 禁用状态

4.2 加载状态

五、视觉定制

5.1 自定义颜色

5.2 自定义边框

六、布局应用

6.1 块级按钮

6.2 按钮组合

七、交互功能

7.1 点击事件处理

7.2 节流控制

八、总结

核心特性

组件引入

更多推荐文章

相关免费在线工具

HarmonyOS6 RcButton 组件使用示例与最佳实践

文档说明

一、基础使用

1.1 按钮类型展示

1.2 镂空按钮

1.3 文本按钮

二、尺寸控制

2.1 预设尺寸

2.2 自定义尺寸

三、形状变化

3.1 三种预设形状

四、状态控制

4.1 禁用状态

4.2 加载状态

五、视觉定制

5.1 自定义颜色

5.2 自定义边框

六、布局应用

6.1 块级按钮

6.2 按钮组合

七、交互功能

7.1 点击事件处理

7.2 节流控制

八、总结

核心特性

组件引入

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具