纯血鸿蒙组件库AUI：按钮组件(A_Button) 原创

鸿蒙开发之南拳北腿

发布于 2025-4-7 20:30

1553浏览

0收藏

加载失败

调用示例一：极简调用

1.拖拽按钮组件到页面排版区
2.设置按钮文字
3.保存设置
纯血鸿蒙组件库AUI：按钮组件(A_Button)-鸿蒙开发者社区

调用示例二：圆形按钮

1.拖拽按钮组件到排版区
2.设置按钮为圆形，选择颜色、设置图标
3.保存设置
纯血鸿蒙组件库AUI：按钮组件(A_Button)-鸿蒙开发者社区

调用示例三：更多属性设置

1.拖拽按钮组件到排版区
2.按钮类型：胶囊，设置图标：选择按钮尺寸，块级按钮：是。
3.保存设置
纯血鸿蒙组件库AUI：按钮组件(A_Button)-鸿蒙开发者社区

调用示例四：禁用按钮

1.拖拽按钮组件到排版区
2.打开禁用开关!
3.保存设置
纯血鸿蒙组件库AUI：按钮组件(A_Button)-鸿蒙开发者社区

生成鸿蒙代码：

纯血鸿蒙组件库AUI：按钮组件(A_Button)-鸿蒙开发者社区

GridCol({ span: 4 }) {
              A_Button({
                text: '返回列表',
                color: this.primaryColor,
              })
                .onClick(() => {
                  // TODO 完成按钮交互
                })
            }

            GridCol({ span: 4 }) {
              A_Button({
                buttonType: ButtonType.Circle,
                color: ColorConstants.DANGER,
                icon: 'mdi-delete-outline',
              })
                .onClick(() => {
                  // TODO 完成按钮交互
                })
            }

            GridCol({ span: 4 }) {
              A_Button({
                text: '保存数据',
                color: this.primaryColor,
                icon: 'mdi-apps',
                buttonSize: 'x-large',
                blockButton: true,
              })
                .onClick(() => {
                  // TODO 完成按钮交互
                })
            }

            GridCol({ span: 4 }) {
              A_Button({
                text: '保存数据',
                color: this.primaryColor,
                disabled: true
              })
                .onClick(() => {
                  // TODO 完成按钮交互
                })
            }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.

将代码拷贝到鸿蒙开发工具IDE，运行代码，以下分别为平板、折叠屏、手机在浅色模式和深色模式下的表现：
纯血鸿蒙组件库AUI：按钮组件(A_Button)-鸿蒙开发者社区

按钮组件的调用属性含义如下：

/**
 * 【按钮】
 * text：文本
 * buttonType：按钮类型[支持normal(普通),胶囊(capsule)和圆形(circle)]
 * color：按钮颜色
 * icon：图标
 * buttonSize：按钮尺寸[支持x-small,small,regular,large和x-large]
 * blockButton：块级按钮
 * loading: 加载状态
 * disabled：禁用
 */
@Component
export struct A_Button {
  @Prop text: string
  @Prop buttonType?: ButtonType = ButtonType.Capsule
  @Prop color?: ResourceStr = ColorConstants.INFO
  @Prop icon?: string
  @Prop buttonSize?: string
  @Prop blockButton?: boolean = false
  @Prop loading?: boolean = false
  @Prop disabled?: boolean = false
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.