HarmonyOS Next快速入门：Button组件

HarmonyOS Next快速入门##HarmonyOS应用开发##教育

点击跳转《HarmonyOS Next快速入门》视频教程

Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

Button组件可以包含子组件。

Button(label?: ResourceStr, options?: {
    type?: ButtonType, stateEffect?: boolean })

label：按钮显示的文字内容
type：定义按钮样式
stateEffect：设置按钮按下时是否开启切换效果，默认值为true开启。

ButtonType枚举类型：

• ButtonType.Capsule：胶囊型按钮（圆角为高度的一半），默认值。此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。
• ButtonType.Circle：圆形按钮。此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。
• ButtonType.Normal：正常按钮。此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

stateEffect：
按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。

• 默认值：true
• 说明：当开启按压态显示效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。

自定义样式

• 设置边框弧度。使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。
• 设置文本样式。通过添加文本样式设置按钮文本的展示样式。
• 设置背景颜色。添加backgroundColor属性设置按钮的背景颜色。

包含子组件

      Button({
    type: ButtonType.Circle }) {
   
        Image($r('app.media.add'))
          .fillColor(Color.White)
          .width(30)
          .height(30)
      }
      .width(50)
      .height(50)

设置按钮点击事件

  .onClick(() => {
   
    // 处理点击事件逻辑
    this.message+="+";
  })

代码实例：ButtonPage

@Entry
@Component
struct ButtonPage {
   
  @State message: string = '第4节 Button组件';

  build() {
   
    Column({
   space:6}) {
   
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Button("默认胶囊按钮")
      Button('设置为Normal的按钮',{
   type:ButtonType.Normal})
      Button('圆形按钮',{
   type:ButtonType.Circle}).width(100)

      Button({
   type:ButtonType.Circle}){
   
        Image($r('app.media.add')).fillColor(Color.White).width(30).height(30)
      }.width(50).height(50)
      .onClick(()=>{
   
        //点击事件业务逻辑
        this.message+="+";
      })
    }
    .height('100%')
    .width('100%')
  }
}