鸿蒙5.0开发进阶：UI框架-ArkTS组件（Button）

鸿蒙5.0开发：ArkTS Button组件详解
原创 于 2025-01-10 14:07:46 发布 · 1k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #前端 #android #鸿蒙系统 #ArkUI #ArkTS

往期鸿蒙全套实战文章必看：（文中附带全栈鸿蒙学习资料）

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对象说明

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

名称类型必填说明
typeButtonType否

描述按钮显示样式。

默认值：ButtonType.Capsule

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

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

stateEffectboolean否

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

默认值：true

说明：

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

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

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

buttonStyle11+ButtonStyleMode否

描述按钮的样式和重要程度。

默认值：ButtonStyleMode.EMPHASIZED

说明：

按钮重要程度：强调按钮>普通按钮>文字按钮。

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

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

controlSize11+ControlSize否

描述按钮的尺寸。

默认值：ControlSize.NORMAL

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

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

role12+ButtonRole否

描述按钮的角色。

默认值：ButtonRole.NORMAL

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

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

属性

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

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时，默认值为$r('sys.float.Body_L')

当controlSize为ControlSize.SMALL时，默认值为$r('sys.float.Body_S')。

fontColor

fontColor(value: ResourceColor)

设置文本显示颜色。

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

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

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

参数：

参数名类型必填说明
valueResourceColor是

文本显示颜色。

默认值：$r('sys.color.font_on_primary')，显示为白色字体。

fontWeight

fontWeight(value: number | FontWeight | string)

设置文本的字体粗细。

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

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

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

参数：

参数名类型必填说明
valuenumber | FontWeight | string是

文本的字体粗细，number类型取值[100, 900]，取值间隔为100，取值越大，字体越粗。

默认值：500

fontStyle8+

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

说明

使用多态样式设置按压态时，需优先设置stateEffect为false，防止内置按压态与多态样式按压态冲突。

fontFamily8+

fontFamily(value: string | Resource)

设置字体列表。

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

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

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

参数：

参数名类型必填说明
valuestring | Resource是字体列表。默认字体'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卡片中使用。

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

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

参数：

参数名类型必填说明
valueButtonRole是

设置Button组件的角色。

默认值:ButtonRole.NORMAL

contentModifier12+

contentModifier(modifier: ContentModifier<ButtonConfiguration>)

定制Button内容区的方法。

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

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

参数：

参数名类型必填说明
modifierContentModifier<ButtonConfiguration>是

在Button组件上，定制内容区的方法。

modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

ButtonType枚举说明

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

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

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

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

说明

  • 按钮圆角通过通用属性borderRadius设置。
  • 当按钮类型为Capsule时，borderRadius设置不生效，按钮圆角始终为宽、高中较小值的一半。
  • 当按钮类型为Circle时，若同时设置了宽和高，则borderRadius不生效，且按钮半径为宽高中较小值的一半；若只设置宽、高中的一个，则borderRadius不生效，且按钮半径为所设宽或所设高值的一半；若不设置宽高，则borderRadius为按钮半径；若borderRadius的值为负，则borderRadius的值按照0处理。
  • 按钮文本通过fontSize、fontColor、fontStyle、fontFamily、fontWeight进行设置。
  • 设置颜色渐变需先设置backgroundColor为透明色。

LabelStyle10+对象说明

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

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

名称类型必填说明
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开始，该接口支持在元服务中使用。

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

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

ControlSize11+枚举说明

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

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

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

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

ButtonRole12+枚举说明

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

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

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

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

ButtonConfiguration12+对象说明

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

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

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

名称类型只读可选说明
labelstring否否Button的文本标签。
pressedboolean否否

指示是否按下Button。

说明：

此属性指示的是原本Button是否被按压，而非build出来的新组件。若新build出来的组件超过原本组件的大小，那么超出部分按压不触发。

triggerClickButtonTriggerClickCallback否否使用builder新构建出来组件的点击事件。

ButtonTriggerClickCallback12+

type ButtonTriggerClickCallback = (xPos: number, yPos: number) => void

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

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

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

参数名类型必填说明
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 （为按钮添加渲染控制）

该示例通过if/else控制按钮的显示文本。

// 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 （设置按钮文本样式）

该示例通过配置labelStyle自定义按钮文本的显示样式。

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

  build() {
    Row() {
      Column() {
        Button(this.txt)
          .width(this.widthShortSize)
          .height(100)
          .backgroundColor(0x317aff)
          .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（设置不同尺寸按钮的重要程度）

该示例通过配置controlSize、buttonStyle实现不同尺寸按钮的重要程度。

// 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（设置按钮的角色）

该示例通过配置role实现按钮的角色。

// 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)
  }
}

鸿蒙OpenHarmony【Button】ArkTS按钮与选择
wodefa9527的博客
11-06 1199
可以包含单个子组件。
鸿蒙ArkTS声明式组件：【Button】
2401_82772199的博客
06-19 7811
按钮组件，可快速创建不同样式的按钮。该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
【鸿蒙软件开发】ArkTS常用组件之Button
m0_62599305的博客
10-21 8941
Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。具体用法请参考Button。Button通过调用接口来创建，接口调用有以下两种形式：创建不包含子组件的按钮。: { type?该接口用于创建不包含子组件的按钮，其中label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。
鸿蒙5.0版开发：ArkTS高级组件-@ohos.arkui.advanced.SegmentButton (分段按钮)
m0_69424697的博客
10-11 1265
分段按钮组件，包含页签类分段按钮、单选类分段按钮、多选类分段按钮。
鸿蒙ArkTS实现返回顶部按钮
lcyuanyuan的博客
08-23 1584
在日常各种应用中，可以发现在往下滚动一定距离的时候，右下角会自动弹出一个按钮，点击以后可以返回到页面顶部，那么在ArkTS中，这个功能如何实现呢？主要以使用Scroll组件为主，当然List也同理。
鸿蒙5.0开发进阶：UI框架-ArkTS组件（Tabs）
Androidbye的博客
01-09 821
通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（点击事件）
Androidbye的博客
12-16 763
组件被点击时触发的事件。
鸿蒙5.0进阶开发：UI开发-自定义组件节点 (FrameNode)
AyomQAQ的博客
12-28 1179
对于拥有自定义前端的第三方框架（如JSON、XML、DOM树等），需将特定的DSL转换为ArkUI的声明式描述。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（Z序控制）
Androidbye的博客
12-22 1033
组件的Z序，设置组件的堆叠顺序。
鸿蒙HarmonyOS开发入门-初识ArkTS语言（基本语法）
HarmonyOS_002的博客
07-08 4101
Componentbuild() {// HelloComponent自定义组件组合系统组件Row和TextRow() {// 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!Divider()HelloComponent({ message: '你好!' });
【鸿蒙软件开发】ArkTS常见组件之单选框Radio和切换按钮Toggle
m0_62599305的博客
10-22 6119
Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。具体用法请参考Radio。Toggle组件提供状态按钮样式，勾选框样式及开关样式，一般用于两种状态之间的切换。具体用法请参考Toggle。其中对于Toggle独特的属性是，他是当Toggle选中后，所呈现的颜色以上就是今天要讲的内容，本文介绍了单选框Radio和切换按钮Toggle的使用，使用这些组件可以帮助我们快速构建ArkTS的界面。
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Button按钮组件
weixin_47730343的博客
12-19 1701
给组件添加点击事件的回调，设置该回调后，当点击组件时会触发该回调。鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Button按钮组件。从API version 9开始，该接口支持在ArkTS卡片中使用。组件也是基础组件之一，和其它基础组件不同的是。组件允许添加一个子组件来实现不同的展示样式。操作系统: Windows 10 专业版。按钮最主要的就是点击事件了。二、Button按钮组件。
HarmonyOS--基础组件Button
github_39096247的博客
12-14 879
Button组件
ArkTS-ArkUI组件-Button组件
qq_74367835的博客
05-23 3522
ArkTS-ArkUI组件-Button组件
鸿蒙ArkTS声明式开发：跨平台支持列表【点击回弹效果】 通用属性
2401_82772199的博客
06-11 609
设置组件点击时回弹效果。从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
harmony开发之button组件的使用
Helloorld_1的博客
12-12 4056
可以使用color设置空白填充的填充颜色。默认值：Color.Transparent 从API version 9开始，该接口支持在ArkTS卡片中使用。这里顺带说一哈，空白填充组件（blank），在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。当最小值大于容器可用空间时，使用最小值作为自身大小并超出容器。从API version 9开始，该接口支持在ArkTS卡片中使用。空白填充组件在容器主轴上的最小大小。该组件从API Version 7开始支持。以上内容，参考官方代码。
border-radius不生效，elementplus组件圆角，vue3
weixin_57997644的博客
04-28 2534
原因是elementplus中组件的四个角溢出了，要把溢出的隐藏掉加入overflow: hidden; 只为记录学习遇到的问题
HCIA-HarmonyOS应用开发工程师 V2.0 模拟考试
qq_38676693的博客
02-28 4535
A. 多设备预览时，不支持双向预览功能。分布式软总线是手机、平板、智能穿戴、智慧屏、车机等分布式设备的通信基座，不仅为设备之间的互联互通提供了统一的分布式通信能力，还为设备之间的无感发现和零等待传输创造了条件。用@Entry装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现@Entry装饰的自定义组件，在单个源文件中，有且仅有一个@Entry。某开发者使用ArkTS语言开发时，自定义了MyInput组件，并导出该组件，便于页面中相同组件的重复使用，下列选项中，导出正确的是哪一项？
鸿蒙开发之组件border属性
Lu_Ca的博客
01-09 1873
【代码】鸿蒙开发之组件border属性。
鸿蒙5.0版开发：ArkTS组件通用属性（触摸热区设置）
最新发布
08-21
在 HarmonyOS 5.0 的 ArkTS 组件中，设置触摸热区（Touch Area）属性可以通过组件的 `touchable` 和 `hitTestBehavior` 等属性来实现。这些属性允许开发者定义组件响应触摸事件的区域和行为。 ### 配置触摸热区属性...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值