鸿蒙HarmonyOS NEXT开发：Button（基础组件）

最新推荐文章于 2024-08-16 11:06:34 发布
最新推荐文章于 2024-08-16 11:06:34 发布
阅读量1k 收藏 17
点赞数 17
分类专栏： 鸿蒙 ArkTS 文章标签： harmonyos 华为 android 鸿蒙
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanbbq/article/details/141196827
版权
鸿蒙 同时被 2 个专栏收录
99 篇文章 0 订阅
订阅专栏
ArkTS
94 篇文章 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 })
  }
}
ts

示例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)
  }
}
ts

示例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%')
  }
}
ts

示例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 })
  }
}
ts

示例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 })
  }
}
ts

示例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)
  }
}
ts

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

 

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

「已注销」
关注
专栏目录
从零开始的HarmonyOS Next开发指南：打造HarmonyOS NEXT元服务
一键难忘的博客
05-26 5714
DevEco Studio 4.0是一个集成开发环境（IDE），专门为开发者提供一站式的HarmonyOS应用和服务开发支持。以下是DevEco Studio 4.0的一些主要特点：高效智能代码编辑：支持多种语言，如ArkTS、JavaScript、C/C++等，提供代码高亮、智能补齐、错误检查、自动跳转、格式化、查找等功能，以提升代码编写的效率。低代码可视化开发：拥有丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，能够快速预览效果，所见即所得。
HarmonyOS鸿蒙开发指南:基础组件 image-animator开发指导
sybh的博客
01-09 954
在本场景中，开发者可通过开始播放、停止播放等按钮切换图片的播放状态。 Image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。
【鸿蒙软件开发】ArkTS常用组件之Button
m0_62599305的博客
10-21 7279
Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。Button通过调用接口来创建，接口调用有以下两种形式：创建不包含子组件的按钮。: { type?该接口用于创建不包含子组件的按钮，其中label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Button）
m0_64420071的博客
03-07 2524
ArkTS声明式开发（基础手势：Button）
OpenHarmony实战开发-按钮 (Button)
m0_70749039的博客
04-26 1487
Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。
鸿蒙开发|Button组件
Tiramisu1104
06-13 1153
按钮是我们开发中最常见的组件之一，如果打开鸿蒙开发工具DevEco Studio，按住Ctrl添加Button类，会发现其继承自Text组件。
【HarmonyOS】鸿蒙开发之Button组件——第3.4章
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
02-18 2698
沉默小管 鸿蒙开发之Button组件
【鸿蒙】HarMonyOS之Button组件的常用属性
笔触狂放的博客
06-06 1857
Button是一种常见的组件，点击可以触发对应的操作，通常由文本或图标组成，也可以由图标和文本共同组成。 图1文本按钮 图2图标按钮 图3图标和文本共同组成的按钮 支持的XML属性 Button无自有的XML属性，共有XML属性继承自Text 创建Button 创建如下样式的按钮： 在layout目录下的xml文件中创建Button，并设置按钮的背景形状、颜色。 常用的背景如文本背景、按钮背景，通常采用XML格式放置在graphic目录下。 <But...
【HarmonyOS NEXT应用开发】案例28：横竖屏切换开发实践
xzs51job的专栏
08-14 155
实现视频播窗页面的横竖屏转换，用户可以切换到全屏播放场景。横竖屏切换示意以进入全屏为例，开发过程需要有以下关注点：1、如果有模态框，需要关闭模态框2、页面实现窗口旋转和全屏逻辑3、隐藏播控相关按钮内容进入横屏基本流程在触发旋转的按钮上，触发对应事件，并可以采用EventHub.emit发送对应事件触发相应事件。这里主要介绍进入全屏的逻辑。复制。
HarmonyOS鸿蒙开发指南:容器组件 stepper开发指导
sybh的博客
01-08 827
用Stepper组件实现分步，再创建toggle组件实现选择显示功能，再使用select组件实现改变选中值动态修改字体颜色或大小。在本场景中，开发者可以在界面上点击选择并实时显示选择结果，点击下一步按钮后可动态修改页面的字体颜色和字体大小。当change与next或back同时存在时，会先执行next或back事件再去执行change事件。Stepper分别添加finish，change，next，back，skip事件。重新设置index属性值时要先清除index的值再重新设置，否则检测不到值的改变。
【HarmonyOS NEXT应用开发】案例41：基于自定义注解和代码生成实现路由框架
最新发布
xzs51job的专栏
08-16 99
在应用开发中无论是出于工程组织效率还是开发体验的考虑，开发者都需要对项目进行模块间解耦，此时需要构建一套用于模块间组件跳转、数据通信的路由框架。修改loginModule模块的hvigorfile.ts文件(loginModule/hvigorfile.ts)，加载插件。在entry中的build-profile.json5中配置动态import。在entry中的EntryAbility.onCreate中初始化路由组件。在entry中的oh-package.json5中引入依赖。
【愚公系列】2023年12月 HarmonyOS教学课程 014-ArkUI组件（Button）
热门推荐
时光隧道
12-05 6万+
Button（按钮）是一种常见的用户界面控件，通常用于触发操作或提交数据。Button 拥有文本标签和一个可点击的区域，用户点击该区域即可触发相应的操作或事件。Button 的主要功能有：触发操作：用户点击 Button 可以触发相应的操作，例如提交表单、搜索、切换页面等。提交数据：Button 可以用于提交表单数据，将用户输入的数据提交到服务器进行处理。执行命令：Button 可以执行系统或应用程序的命令，例如打印、保存、退出等。触发事件：Button 可以触发自定义事件，通过与其他组件配合使用，可以实现
鸿蒙开发（2）---Button组件
李元静
06-06 6868
目录鸿蒙开发 鸿蒙开发
鸿蒙HarmonyOS实战-ArkUI组件（Button）
shudaoshanQAQ的博客
01-05 4920
Button（按钮）是一种常见的用户界面控件，通常用于触发操作或提交数据。Button 拥有文本标签和一个可点击的区域，用户点击该区域即可触发相应的操作或事件。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Button按钮组件
weixin_47730343的博客
12-19 1436
给组件添加点击事件的回调，设置该回调后，当点击组件时会触发该回调。鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Button按钮组件。从API version 9开始，该接口支持在ArkTS卡片中使用。组件也是基础组件之一，和其它基础组件不同的是。组件允许添加一个子组件来实现不同的展示样式。操作系统: Windows 10 专业版。按钮最主要的就是点击事件了。二、Button按钮组件。
【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— Button按钮组件
温的打怪之旅
03-17 1742
Button为按钮组件，通常用于响应用户的点击操作。
鸿蒙HarmonyOS实战-ArkUI组件（Button）_鸿蒙 button
2401_84164469的博客
04-12 760
Button 的主要功能有：语法说明： 使用： 注意：不支持通过borderRadius属性重新设置 5.案例 Button按钮的实际应用场景主要包括以下几个方面：Button按钮的应用场景非常广泛，基本上所有需要用户交互的场景都可以使用Button按钮来实现。
HarmonyOS Next开发学习手册——旋转屏动画增强
maniuT的博客
07-03 687
在原旋转屏动画基础上，可配置渐隐和渐现的转场效果。完整的代码示例和效果如下。需要在EntryAbility.ets文件的onWindowStageCreate方法中添加处理逻辑以获取屏幕的显示方向需要在项目的 module.json5 文件中的 abilities 列表里添加 “orientation”，指定为 “auto_rotation”
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值