鸿蒙5.0版开发：ArkTS组件-基础组件（Button）

于 2024-09-11 15:36:20 发布
阅读量635 收藏 24
点赞数 27
分类专栏： 鸿蒙5.0 ArkTS ArkUI 文章标签： harmonyos 华为 android 前端 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69424697/article/details/142141351
版权
鸿蒙5.0 同时被 3 个专栏收录
124 篇文章 0 订阅
订阅专栏
ArkUI
124 篇文章 0 订阅
订阅专栏
ArkTS
120 篇文章 0 订阅
订阅专栏

往期鸿蒙全套实战文章必看：

Button

按钮组件，可快速创建不同样式的按钮。

说明：

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

可以包含单个子组件。

接口

Button

Button(options: ButtonOptions)

创建可以包含单个子组件的按钮。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
optionsButtonOptions是配置按钮的显示样式。

Button

Button(label: ResourceStr, options?: ButtonOptions)

使用文本内容创建相应的按钮组件，此时Button无法包含子组件。

文本内容默认单行显示。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
labelResourceStr是按钮文本内容。
optionsButtonOptions否配置按钮的显示样式。

ButtonOptions对象说明

名称类型必填描述
typeButtonType否描述按钮显示样式。
默认值：ButtonType.Capsule
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
stateEffectboolean否按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。
默认值：true
说明：
当开启按压态显示效果，开发者设置状态样式时，会基于状态样式设置完成后的背景色再进行颜色叠加。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
buttonStyle11+ButtonStyleMode否描述按钮的样式和重要程度。
默认值：ButtonStyleMode.EMPHASIZED
说明：
按钮重要程度：强调按钮>普通按钮>文字按钮。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
controlSize11+ControlSize否描述按钮的尺寸。
默认值：ControlSize.NORMAL
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
role12+ButtonRole否描述按钮的角色。
默认值：ButtonRole.NORMAL

属性

除支持通用属性外，还支持以下属性：

type

type(value: ButtonType)

设置Button样式。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueButtonType是Button样式。
默认值：ButtonType.Capsule

fontSize

fontSize(value: Length)

设置文本显示字号。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLength是文本显示字号。
默认值：若controlSize的值为：controlSize.NORMAL，取’16fp’，若controlSize的值为：controlSize.SMALL，取’12fp’

fontColor

fontColor(value: ResourceColor)

设置文本显示颜色。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResourceColor是文本显示颜色。
默认值：‘#ffffff’

fontWeight

fontWeight(value: number | FontWeight | string)

设置文本的字体粗细。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueFontWeight | number | string是文本的字体粗细，number类型取值[100, 900]，取值间隔为100，取值越大，字体越粗。
默认值：400

fontStyle

fontStyle(value: FontStyle)

设置文本的字体样式。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueFontStyle是文本的字体样式。
默认值：FontStyle.Normal。

stateEffect

stateEffect(value: boolean)

设置是否开启按压态显示效果。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是按钮按下时是否开启按压态显示效果，当设置为false时，按压效果关闭。
默认值：true

fontFamily

fontFamily(value: string | Resource)

设置字体列表。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueResource | string是字体列表。默认字体’HarmonyOS Sans’，当前支持’HarmonyOS Sans’字体和注册自定义字体。

labelStyle10+

labelStyle(value: LabelStyle)

设置Button组件label文本和字体的样式。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueLabelStyle是Button组件label文本和字体的样式。

buttonStyle11+

buttonStyle(value: ButtonStyleMode)

设置Button组件的样式和重要程度。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueButtonStyleMode是Button组件的样式和重要程度。
默认值:ButtonStyleMode.EMPHASIZED

controlSize11+

controlSize(value: ControlSize)

设置Button组件的尺寸。

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueControlSize是Button组件的尺寸。
默认值:ControlSize.NORMAL

role12+

role(value: ButtonRole)

设置Button组件的角色。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueButtonRole是设置Button组件的角色。
默认值:ButtonRole.NORMAL

contentModifier12+

contentModifier(modifier: ContentModifier<ButtonConfiguration>)

定制Button内容区的方法。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
modifierContentModifier<ButtonConfiguration>是在Button组件上，定制内容区的方法。
modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

ButtonType枚举说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称描述
Capsule胶囊型按钮（圆角默认为高度的一半）。
Circle圆形按钮。
Normal普通按钮（默认不带圆角）。

说明：

  • 按钮圆角通过通用属性borderRadius设置（不支持通过border接口设置圆角），且只支持设置参数为Length的圆角。
  • 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为宽、高中较小值的一半。
  • 当按钮类型为Circle时，若同时设置了宽和高，则borderRadius不生效，且按钮半径为宽高中较小值的一半；若只设置宽、高中的一个，则borderRadius不生效，且按钮半径为所设宽或所设高值的一半；若不设置宽高，则borderRadius为按钮半径；若borderRadius的值为负，则borderRadius的值按照0处理。
  • 按钮文本通过通用文本样式进行设置。
  • 设置颜色渐变需先设置backgroundColor为透明色。

LabelStyle10+对象说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用

名称参数类型必填描述
overflowTextOverflow否设置label文本超长时的显示方式。文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格。
默认值：TextOverflow.Ellipsis
maxLinesnumber否设置label文本的最大行数。默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式。
默认值：1
minFontSizenumber | ResourceStr否设置label文本最小显示字号。需配合maxFontSize以及maxLines或布局大小限制使用。
说明：
minFontSize小于或等于0时，自适应字号不生效。
maxFontSizenumber | ResourceStr否设置label文本最大显示字号。需配合minFontSize以及maxLines或布局大小限制使用。
heightAdaptivePolicyTextHeightAdaptivePolicy否设置label文本自适应高度的方式。
默认值：TextHeightAdaptivePolicy.MAX_LINES_FIRST。
fontFont否设置label文本字体样式。
默认值：默认值参考Font。

ButtonStyleMode11+枚举说明

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

名称描述
EMPHASIZED强调按钮（用于强调当前操作）。
NORMAL普通按钮（一般界面操作）。
TEXTUAL文本按钮（纯文本，无背景颜色）。

ControlSize11+枚举说明

卡片能力： 从API version 11开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

名称描述
SMALL小尺寸按钮。
NORMAL正常尺寸按钮。

ButtonRole12+枚举说明

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

名称描述
NORMAL正常按钮。
ERROR警示按钮。

ButtonConfiguration12+对象说明

开发者需要自定义class实现ContentModifier接口。

参数名类型说明
labelstringButton的文本标签。
pressedboolean指示是否按下Button。
说明：
此属性指示的是原本Button是否被按压，而非build出来的新组件。若新build出来的组件超过原本组件的大小，那么超出部分按压不触发。
triggerClickButtonTriggerClickCallback使用builder新构建出来组件的点击事件。

ButtonTriggerClickCallback12+对象说明

定义ButtonConfiguration中使用的回调类型。

参数名类型必填说明
xPosnumber是点击位置x的坐标。
yPosnumber是点击位置y的坐标。

事件

支持通用事件。

示例

示例1

// xxx.ets
@Entry
@Component
struct ButtonExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Text('Normal button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('OK', { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(8)
          .backgroundColor(0x317aff)
          .width(90)
          .onClick(() => {
            console.log('ButtonType.Normal')
          })
        Button({ type: ButtonType.Normal, stateEffect: true }) {
          Row() {
            LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
            Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
          }.alignItems(VerticalAlign.Center)
        }.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

        Button('Disable', { type: ButtonType.Normal, stateEffect: false }).opacity(0.4)
          .borderRadius(8).backgroundColor(0x317aff).width(90)
      }

      Text('Capsule button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('OK', { type: ButtonType.Capsule, stateEffect: true }).backgroundColor(0x317aff).width(90)
        Button({ type: ButtonType.Capsule, stateEffect: true }) {
          Row() {
            LoadingProgress().width(20).height(20).margin({ left: 12 }).color(0xFFFFFF)
            Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
          }.alignItems(VerticalAlign.Center).width(90).height(40)
        }.backgroundColor(0x317aff)

        Button('Disable', { type: ButtonType.Capsule, stateEffect: false }).opacity(0.4)
          .backgroundColor(0x317aff).width(90)
      }

      Text('Circle button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
        Button({ type: ButtonType.Circle, stateEffect: true }) {
          LoadingProgress().width(20).height(20).color(0xFFFFFF)
        }.width(55).height(55).backgroundColor(0x317aff)

        Button({ type: ButtonType.Circle, stateEffect: true }) {
          LoadingProgress().width(20).height(20).color(0xFFFFFF)
        }.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
      }
    }.height(400).padding({ left: 35, right: 35, top: 35 })
  }
}

示例2

// xxx.ets
@Entry
@Component
struct SwipeGestureExample {
  @State count: number = 0

  build() {
    Column() {
      Text(`${this.count}`)
        .fontSize(30)
        .onClick(() => {
          this.count++
        })
      if (this.count <= 0) {
        Button('count is negative').fontSize(30).height(50)
      } else if (this.count % 2 === 0) {
        Button('count is even').fontSize(30).height(50)
      } else {
        Button('count is odd').fontSize(30).height(50)
      }
    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
  }
}

示例3

// xxx.ets
@Entry
@Component
struct buttonTestDemo {
  @State txt: string = 'overflowTextOverlengthTextOverflow.Clip';
  @State widthShortSize: number = 200;

  build() {
    Row() {
      Column() {
        Button(this.txt)
          .width(this.widthShortSize)
          .height(100)
          .labelStyle({ overflow: TextOverflow.Clip,
            maxLines: 1,
            minFontSize: 20,
            maxFontSize: 20,
            font: {
              size: 20,
              weight: FontWeight.Bolder,
              family: 'cursive',
              style: FontStyle.Italic
            }
          })
          .fontSize(40)
      }
      .width('100%')
    }
    .height('100%')
  }
}

示例4

// xxx.ets
@Entry
@Component
struct ButtonExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Text('Normal size button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED });
        Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL });
        Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL });
      }

      Text('Small size button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('Emphasized', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.EMPHASIZED });
        Button('Normal', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.NORMAL });
        Button('Textual', { controlSize: ControlSize.SMALL, buttonStyle: ButtonStyleMode.TEXTUAL });
      }

      Text('Small size button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('Emphasized').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.EMPHASIZED);
        Button('Normal').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.NORMAL);
        Button('Textual').controlSize(ControlSize.SMALL).buttonStyle(ButtonStyleMode.TEXTUAL);
      }

    }.height(400).padding({ left: 35, right: 35, top: 35 })
  }
}

示例5

// xxx.ets
@Entry
@Component
struct ButtonExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Text('Role is Normal button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED, role: ButtonRole.NORMAL });
        Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL, role: ButtonRole.NORMAL });
        Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.NORMAL });
      }
      Text('Role is Error button').fontSize(9).fontColor(0xCCCCCC)
      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
        Button('Emphasized', { buttonStyle: ButtonStyleMode.EMPHASIZED, role: ButtonRole.ERROR});
        Button('Normal', { buttonStyle: ButtonStyleMode.NORMAL, role: ButtonRole.ERROR });
        Button('Textual', { buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.ERROR });
      }
    }.height(200).padding({ left: 35, right: 35, top: 35 })
  }
}

示例6

该示例实现了自定义样式的功能，自定义样式实现了一个圆圈替换原本的按钮样式。如果按压，圆圈将变成红色，标题会显示按压字样；如果没有按压，圆圈将变成黑色，标题会显示非按压字样。

class MyButtonStyle implements ContentModifier<ButtonConfiguration> {
  x: number = 0
  y: number = 0
  selectedColor:Color = Color.Black

  constructor(x : number, y: number,ColorType:Color) {
    this.x = x
    this.y = y
    this.selectedColor = ColorType
  }
  applyContent() : WrappedBuilder<[ButtonConfiguration]>
  {
    return wrapBuilder(buildButton1)
  }
}

@Builder function buildButton1(config: ButtonConfiguration) {
  Column({space:30}) {
    Text(config.enabled ? "enabled true" : "enabled false")
    Text('圆圈状态' + (config.pressed ? "（ 按压 ）" : "（ 非按压 ）"))
    Text('点击位置x坐标：' + (config.enabled ? (config.contentModifier as MyButtonStyle).x : "0"))
    Text('点击位置y坐标：' + (config.enabled ? (config.contentModifier as MyButtonStyle).y : "0"))
    Circle({ width: 50, height: 50 })
      .fill(config.pressed ? (config.contentModifier as MyButtonStyle).selectedColor : Color.Black)
      .gesture(
        TapGesture({count:1}).onAction((event: GestureEvent)=>{
          config.triggerClick(event.fingerList[0].localX,event.fingerList[0].localY)
        })).opacity(config.enabled ? 1 : 0.1)
  }
}

@Entry
@Component
struct ButtonExample {
  @State buttonEnabled: boolean = true;
  @State positionX: number = 0
  @State positionY: number = 0
  @State state : boolean[] = [true,false]
  @State index:number = 0
  build() {
    Column() {
      Button('OK')
        .contentModifier(new MyButtonStyle(this.positionX,this.positionY,Color.Red))
        .onClick((event) => {
          console.info('change' + JSON.stringify(event))
          this.positionX = event.displayX
          this.positionY = event.displayY
        }).enabled(this.buttonEnabled)
      Row() {
        Toggle({ type: ToggleType.Switch, isOn: true }).onChange((value: boolean) => {
          if (value) {
            this.buttonEnabled = true
          } else {
            this.buttonEnabled = false
          }
        }).margin({left:-80})
      }
    }.height('100%').width('100%').justifyContent(FlexAlign.Center)
  }
}

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注作者，不定期分享原创知识。
  • 同时可以期待后续文章ing🚀。 
星星不闪包退1
关注
专栏目录
HarmonyOS鸿蒙开发指南:基于ArkTS开发 公共事件与通知
sybh的博客
01-10 1899
HarmonyOS通过CES（Common Event Service，公共事件服务）为应用程序提供订阅、发布、退订公共事件的能力。公共事件可分为系统公共事件和自定义公共事件。系统公共事件：系统将收集到的事件信息，根据系统策略发送给订阅该事件的用户程序。例如：系统关键服务发布的系统事件（例如：hap安装，更新，卸载等）。自定义公共事件：应用自定义一些公共事件用来实现跨应用的事件通信能力。每个应用都可以按需订阅公共事件，订阅成功且公共事件发布，系统会把其发送给应用。
100天精通鸿蒙从入门到跳槽——第14天：ArkTS自定义组件使用详解
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
01-24 5万+
本文介绍了在鸿蒙HarmonyOS开发中，如何使用ArkTS创建自定义组件。自定义组件允许开发者组合使用系统组件、属性和方法，并可以被其他组件重用，实现数据驱动UI更新。使用@Component装饰器来标记结构体为组件，并使用build()函数来定义自定义组件的声明式UI描述。// 导入页面路由模块@Entry@State title: string = '阿珊和她的猫职业';build() {Row() {Column() {Text('前端开发工程师')Button() {
鸿蒙开发|Button组件
Tiramisu1104
06-13 1133
按钮是我们开发中最常见的组件之一，如果打开鸿蒙开发工具DevEco Studio，按住Ctrl添加Button类，会发现其继承自Text组件。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Button）
m0_64420071的博客
03-07 2476
ArkTS声明式开发（基础手势：Button）
OpenHarmony实战开发-按钮 (Button)
m0_70749039的博客
04-26 1411
Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。
【HarmonyOS】鸿蒙开发之Button组件——第3.4章
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
02-18 2575
沉默小管 鸿蒙开发之Button组件
【鸿蒙】HarMonyOS之Button组件的常用属性
笔触狂放的博客
06-06 1824
Button是一种常见的组件，点击可以触发对应的操作，通常由文本或图标组成，也可以由图标和文本共同组成。 图1文本按钮 图2图标按钮 图3图标和文本共同组成的按钮 支持的XML属性 Button无自有的XML属性，共有XML属性继承自Text 创建Button 创建如下样式的按钮： 在layout目录下的xml文件中创建Button，并设置按钮的背景形状、颜色。 常用的背景如文本背景、按钮背景，通常采用XML格式放置在graphic目录下。 <But...
鸿蒙应用ArkTS开发-实现登录注册功能
最新发布
lovecspplon的博客
09-04 1443
HarmonyOS（鸿蒙操作系统）是华为公司开发的操作系统。它的设计初衷是为了应对当今多设备、多平台（1+8+N）的需求，为各种类型的设备提供一个统一的操作系统。：应用的全局配置信息，详见app.json5配置文件。entry：HarmonyOS工程模块，编译构建生成一个HAP包。：用于存放ArkTS源码。：应用/服务的入口。：应用提供扩展的备份恢复能力。：应用/服务包含的页面。：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。关于资源文件，详见资源分类与访问。
「前端+鸿蒙」鸿蒙应用开发-ArkTS语法说明 - 渲染控制
AIGC大前端小王子
06-15 221
ArkTS 作为鸿蒙（HarmonyOS）应用开发中的现代框架，提供了声明式渲染和组件化开发的能力。渲染控制是 ArkTS 中一个重要的概念，允许开发者根据状态变化有条件地渲染组件。以下是 ArkTS 中渲染控制的基本语法说明和示例代码。
「前端+鸿蒙」鸿蒙应用开发-ArkTS语法说明-自定义组件
AIGC大前端小王子
06-15 209
自定义组件通常是通过继承Component类来定义的。// 执行组件的初始化逻辑自定义组件可以在其他组件中使用，就像使用内置组件一样。
【愚公系列】2023年12月 HarmonyOS教学课程 014-ArkUI组件（Button）
热门推荐
时光隧道
12-05 6万+
Button（按钮）是一种常见的用户界面控件，通常用于触发操作或提交数据。Button 拥有文本标签和一个可点击的区域，用户点击该区域即可触发相应的操作或事件。Button 的主要功能有：触发操作：用户点击 Button 可以触发相应的操作，例如提交表单、搜索、切换页面等。提交数据：Button 可以用于提交表单数据，将用户输入的数据提交到服务器进行处理。执行命令：Button 可以执行系统或应用程序的命令，例如打印、保存、退出等。触发事件：Button 可以触发自定义事件，通过与其他组件配合使用，可以实现
鸿蒙开发（2）---Button组件
李元静
06-06 6845
目录鸿蒙开发 鸿蒙开发
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Button按钮组件
weixin_47730343的博客
12-19 1411
给组件添加点击事件的回调，设置该回调后，当点击组件时会触发该回调。鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Button按钮组件。从API version 9开始，该接口支持在ArkTS卡片中使用。组件也是基础组件之一，和其它基础组件不同的是。组件允许添加一个子组件来实现不同的展示样式。操作系统: Windows 10 专业版。按钮最主要的就是点击事件了。二、Button按钮组件。
【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— Button按钮组件
温的打怪之旅
03-17 1651
Button为按钮组件，通常用于响应用户的点击操作。
鸿蒙HarmonyOS实战-ArkUI组件（Button）_鸿蒙 button
2401_84164469的博客
04-12 741
Button 的主要功能有：语法说明： 使用： 注意：不支持通过borderRadius属性重新设置 5.案例 Button按钮的实际应用场景主要包括以下几个方面：Button按钮的应用场景非常广泛，基本上所有需要用户交互的场景都可以使用Button按钮来实现。
HarmonyOS Next开发学习手册——旋转屏动画增强
maniuT的博客
07-03 658
在原旋转屏动画基础上，可配置渐隐和渐现的转场效果。完整的代码示例和效果如下。需要在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向需要在项目的 module.json5 文件中的 abilities 列表里添加 “orientation”，指定为 “auto_rotation”
鸿蒙HarmonyOS实战-ArkUI组件（Button）
shudaoshanQAQ的博客
01-05 4551
Button（按钮）是一种常见的用户界面控件，通常用于触发操作或提交数据。Button 拥有文本标签和一个可点击的区域，用户点击该区域即可触发相应的操作或事件。
【鸿蒙软件开发】ArkTS常用组件之Button
m0_62599305的博客
10-21 7024
Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。Button通过调用接口来创建，接口调用有以下两种形式：创建不包含子组件的按钮。: { type?该接口用于创建不包含子组件的按钮，其中label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值