OpenHarmony实战开发-按钮 (Button)

news2025/10/31 23:01:16

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

创建按钮

Button通过调用接口来创建，接口调用有以下两种形式：

  • 创建不包含子组件的按钮。
Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })
ts
Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

其中，label用来设置按钮文字，type用于设置Button类型，stateEffect属性设置Button是否开启点击效果。

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)
ts
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

zh-cn_image_0000001562820757

在这里插入图片描述

  • 创建包含子组件的按钮。
Button(options?: {type?: ButtonType, stateEffect?: boolean})
ts
Button(options?: {type?: ButtonType, stateEffect?: boolean})

只支持包含一个子组件，子组件可以是基础组件或者容器组件。

Button({ type: ButtonType.Normal, stateEffect: true }) {
  Row() {
    Image($r('app.media.loading')).width(20).height(40).margin({ left: 12 })
    Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
  }.alignItems(VerticalAlign.Center)
}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)
ts
Button({ type: ButtonType.Normal, stateEffect: true }) {
  Row() {
    Image($r('app.media.loading')).width(20).height(40).margin({ left: 12 })
    Text('loading').fontSize(12).fontColor(0xffffff).margin({ left: 5, right: 12 })
  }.alignItems(VerticalAlign.Center)
}.borderRadius(8).backgroundColor(0x317aff).width(90).height(40)

zh-cn_image_0000001511421216

在这里插入图片描述

设置按钮类型

Button有三种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle）和普通按钮（Normal），通过type进行设置。

  • 胶囊按钮（默认类型）

此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。

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

zh-cn_image_0000001511421208

在这里插入图片描述

  • 圆形按钮

此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。

Button('Circle', { type: ButtonType.Circle, stateEffect: false }) 
  .backgroundColor(0x317aff) 
  .width(90) 
  .height(90)
ts
Button('Circle', { type: ButtonType.Circle, stateEffect: false }) 
  .backgroundColor(0x317aff) 
  .width(90) 
  .height(90)

zh-cn_image_0000001511740428

在这里插入图片描述

  • 普通按钮

此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)
ts
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .borderRadius(8) 
  .backgroundColor(0x317aff) 
  .width(90)
  .height(40)

zh-cn_image_0000001563060641

在这里插入图片描述

自定义样式

  • 设置边框弧度。

使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。

Button('circle border', { type: ButtonType.Normal }) 
  .borderRadius(20)
  .height(40)
ts
Button('circle border', { type: ButtonType.Normal }) 
  .borderRadius(20)
  .height(40)

zh-cn_image_0000001511900392

在这里插入图片描述

  • 设置文本样式。

通过添加文本样式设置按钮文本的展示样式。

Button('font style', { type: ButtonType.Normal }) 
  .fontSize(20) 
  .fontColor(Color.Pink) 
  .fontWeight(800)
ts
Button('font style', { type: ButtonType.Normal }) 
  .fontSize(20) 
  .fontColor(Color.Pink) 
  .fontWeight(800)

zh-cn_image_0000001511580828

在这里插入图片描述

  • 设置背景颜色。

添加backgroundColor属性设置按钮的背景颜色。

Button('background color').backgroundColor(0xF55A42)
ts
Button('background color').backgroundColor(0xF55A42)

zh-cn_image_0000001562940477

在这里插入图片描述

  • 创建功能型按钮。

为删除操作创建一个按钮。

let MarLeft: Record<string, number> = { 'left': 20 }
Button({ type: ButtonType.Circle, stateEffect: true }) {
  Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
}.width(55).height(55).margin(MarLeft).backgroundColor(0xF55A42)
ts
let MarLeft: Record<string, number> = { 'left': 20 }
Button({ type: ButtonType.Circle, stateEffect: true }) {
  Image($r('app.media.ic_public_delete_filled')).width(30).height(30)
}.width(55).height(55).margin(MarLeft).backgroundColor(0xF55A42)

zh-cn_image_0000001511740436

在这里插入图片描述

添加事件

Button组件通常用于触发某些操作，可以绑定onClick事件来响应点击操作后的自定义行为。

Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .onClick(()=>{ 
    console.info('Button onClick') 
  })
ts
Button('Ok', { type: ButtonType.Normal, stateEffect: true }) 
  .onClick(()=>{ 
    console.info('Button onClick') 
  })

场景示例

  • 用于启动操作。

可以用按钮启动任何用户界面元素，按钮会根据用户的操作触发相应的事件。例如，在List容器里通过点击按钮进行页面跳转。

// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct ButtonCase1 {
  @State FurL:router.RouterOptions = {'url':'pages/first_page'}
  @State SurL:router.RouterOptions = {'url':'pages/second_page'}
  @State TurL:router.RouterOptions = {'url':'pages/third_page'}
  build() {
    List({ space: 4 }) {
      ListItem() {
        Button("First").onClick(() => {
          router.pushUrl(this.FurL)
        })
          .width('100%')
      }
      ListItem() {
        Button("Second").onClick(() => {
          router.pushUrl(this.SurL)
        })
          .width('100%')
      }
      ListItem() {
        Button("Third").onClick(() => {
          router.pushUrl(this.TurL)
        })
          .width('100%')
      }
    }
    .listDirection(Axis.Vertical)
    .backgroundColor(0xDCDCDC).padding(20)
  }
}
ts
// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct ButtonCase1 {
  @State FurL:router.RouterOptions = {'url':'pages/first_page'}
  @State SurL:router.RouterOptions = {'url':'pages/second_page'}
  @State TurL:router.RouterOptions = {'url':'pages/third_page'}
  build() {
    List({ space: 4 }) {
      ListItem() {
        Button("First").onClick(() => {
          router.pushUrl(this.FurL)
        })
          .width('100%')
      }
      ListItem() {
        Button("Second").onClick(() => {
          router.pushUrl(this.SurL)
        })
          .width('100%')
      }
      ListItem() {
        Button("Third").onClick(() => {
          router.pushUrl(this.TurL)
        })
          .width('100%')
      }
    }
    .listDirection(Axis.Vertical)
    .backgroundColor(0xDCDCDC).padding(20)
  }
}

zh-cn_image_0000001562700393

在这里插入图片描述

  • 用于提交表单。

在用户登录/注册页面，使用按钮进行登录或注册操作。

// xxx.ets
@Entry
@Component
struct ButtonCase2 {
  build() {
    Column() {
      TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
      TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
      Button('Register').width(300).margin({ top: 20 })
        .onClick(() => {
          // 需要执行的操作
        })
    }.padding(20)
  }
}
ts
// xxx.ets
@Entry
@Component
struct ButtonCase2 {
  build() {
    Column() {
      TextInput({ placeholder: 'input your username' }).margin({ top: 20 })
      TextInput({ placeholder: 'input your password' }).type(InputType.Password).margin({ top: 20 })
      Button('Register').width(300).margin({ top: 20 })
        .onClick(() => {
          // 需要执行的操作
        })
    }.padding(20)
  }
}

zh-cn_image_0000001562940473

在这里插入图片描述

  • 悬浮按钮

在可以滑动的界面，滑动时按钮始终保持悬浮状态。

// xxx.ets
@Entry
@Component
struct HoverButtonExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  build() {
    Stack() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item:number) => {
          ListItem() {
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
          }
        }, (item:number) => item.toString())
      }.width('90%')
      Button() {
        Image($r('app.media.ic_public_add'))
          .width(50)
          .height(50)
      }
      .width(60)
      .height(60)
      .position({x: '80%', y: 600})
      .shadow({radius: 10})
      .onClick(() => {
        // 需要执行的操作
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}
ts
// xxx.ets
@Entry
@Component
struct HoverButtonExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  build() {
    Stack() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item:number) => {
          ListItem() {
            Text('' + item)
              .width('100%').height(100).fontSize(16)
              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
          }
        }, (item:number) => item.toString())
      }.width('90%')
      Button() {
        Image($r('app.media.ic_public_add'))
          .width(50)
          .height(50)
      }
      .width(60)
      .height(60)
      .position({x: '80%', y: 600})
      .shadow({radius: 10})
      .onClick(() => {
        // 需要执行的操作
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}

floating_button

在这里插入图片描述

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1626678.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

APISix如何配置gzip压缩、cache、跨域

APISix如何配置gzip压缩、cache、跨域

网上查到的apisix的配置很多都很古老&#xff0c;要改配置文件。其实现在apisix都是使用插件方式实现各种配置&#xff0c;很方便。这里简单介绍下三个常用插件、gzip压缩、cache缓存和跨域插件。这里均使用apisix的Dashboard看板进行配置。 gzip压缩 1. 打开apisix看板&#…
阅读更多...
Web-SpringBootWen

Web-SpringBootWen

创建项目 后面因为报错&#xff0c;所以我把jdk修改成22&#xff0c;仅供参考。 定义类&#xff0c;创建方法 package com.start.springbootstart.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotati…
阅读更多...
单细胞+RIP-seq项目文章| Cell ReportshnRNPU蛋白在小鼠精原干细胞池建立的关键作用

单细胞+RIP-seq项目文章| Cell ReportshnRNPU蛋白在小鼠精原干细胞池建立的关键作用

精原干细胞&#xff08;SSCs&#xff09;是负责精子发生的干细胞&#xff0c;具有自我更新和分化产生功能性精子的能力。SSCs的持续再生对于维持雄性生育力至关重要。然而&#xff0c;SSC池的发育起源尚不清楚。在哺乳动物中&#xff0c;SSCs源自名为 prospermatogonia&#xf…
阅读更多...
基于JAVA实现的贪吃蛇小游戏

基于JAVA实现的贪吃蛇小游戏

JAVA贪吃蛇小游戏实现: 贪吃蛇曾经在我们的童年给我们带来了很多乐趣。贪吃蛇这款游戏现在基本上没人玩了&#xff0c;甚至在新一代人的印象中都已毫无记忆了。。。但是&#xff0c;这款游戏可以在一定程度上锻炼自己的编程能力。 目前这个版本只是一个测试版本&#xff0c;所以…
阅读更多...
AI：162-如何使用Python进行图像识别与处理深度学习与卷积神经网络的应用

AI：162-如何使用Python进行图像识别与处理深度学习与卷积神经网络的应用

本文收录于专栏：精通AI实战千例专栏合集 从基础到实践，深入学习。无论你是初学者还是经验丰富的老手，对于本专栏案例和项目实践都有参考学习意义。 每一个案例都附带关键代码，详细讲解供大家学习，希望可以帮到大家。正在不断更新中~ 一.如何使用Python进行图像识别与处理…
阅读更多...
在Windows 10中如何关闭BitLocker加密？这里提供详细步骤

在Windows 10中如何关闭BitLocker加密？这里提供详细步骤

序言 BitLocker加密将有助于保持卷或闪存驱动器处于安全模式。但是&#xff0c;如果你不再需要BitLocker加密&#xff0c;你可以在Windows 10计算机上轻松删除BitLocker加密。在这里&#xff0c;我们将向你展示在Windows 10上删除/禁用BitLocker驱动器加密的四种方法。 通过控…
阅读更多...
Qt/C++音视频开发71-指定mjpeg/h264格式采集本地摄像头/存储文件到mp4/设备推流/采集推流

Qt/C++音视频开发71-指定mjpeg/h264格式采集本地摄像头/存储文件到mp4/设备推流/采集推流

一、前言 用ffmpeg采集本地摄像头&#xff0c;如果不指定格式的话&#xff0c;默认小分辨率比如640x480使用rawvideo格式&#xff0c;大分辨率比如1280x720使用mjpeg格式&#xff0c;当然前提是这个摄像头设备要支持这些格式。目前市面上有一些厂家做的本地设备支持264格式&am…
阅读更多...
1688获得店铺所有商品API接口技术解析与应用实践

1688获得店铺所有商品API接口技术解析与应用实践

在电商领域&#xff0c;快速获取店铺所有商品信息对于商家和开发者来说至关重要。1688作为国内领先的B2B电商平台&#xff0c;提供了丰富的API接口供开发者使用&#xff0c;其中获得店铺所有商品API接口是其中之一。本文将深入解析该API接口的技术实现&#xff0c;并探讨其在实…
阅读更多...
嵌入式中全栈工程师是怎么样的？

嵌入式中全栈工程师是怎么样的？

这两天有小伙伴问我，如何才能做到嵌入式全栈？我用visio软件画了一张图，为大家讲解。 此图为博主认为的嵌入式全栈，从硬件到软件全套技术栈，我们“从下往上”讲解。 1、首先是需要有原理图库，可以自己画，也可以从别人那里拷贝。有了原理图库，就开始画原理图。画原理图需…
阅读更多...
​「Python大数据」词频数据渲染词云图导出HTML

​「Python大数据」词频数据渲染词云图导出HTML

前言 本文主要介绍通过python实现数据聚类、脚本开发、办公自动化。词频数据渲染词云图导出HTML。 一、业务逻辑 读取voc数据采集的数据批处理，使用jieba进行分词，去除停用词词频数据渲染词云图将可视化结果保存到HTML文件中二、具体产出 三、执行脚本 python wordCloud.p…
阅读更多...
基于模糊控制的电动汽车锂电池SOC主动均衡电路MATLAB仿真模型

基于模糊控制的电动汽车锂电池SOC主动均衡电路MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 模型简介 模型在 Matlab/Simulink仿真平台中搭建16节电芯锂电池电路模型&#xff0c;主要针对电动车锂电池组SOC差异性&#xff0c;采用模糊控制算法动态调节均衡电流&#xff0c;以减少均衡时间和能量损耗。…
阅读更多...
OpenStack 云平台管理

OpenStack 云平台管理

目录 一、案例分析 1.1、案例概述 1.2、案例前置知识点 1&#xff09;关于浮动 IP 地址 2&#xff09;关于快照 1.3、案例环境 1&#xff09;本案例实验环境 2&#xff09;案例需求 3&#xff09;案例实现思路 二、案例实施 2.1、部署 OpenStack 2.2、创建…
阅读更多...
WSL2无法ping通本地主机ip的解决办法

WSL2无法ping通本地主机ip的解决办法

刚装完WSL2的Ubuntu子系统时&#xff0c;可能无法ping通本地主机的ip&#xff1a; WSL2系统ip&#xff1a; 本地主机ip&#xff1a; 在powershell里输入如下的命令&#xff1a; New-NetFirewallRule -DisplayName "WSL" -Direction Inbound -InterfaceAlias &quo…
阅读更多...
反映工业发展质量与效益的主要指标有哪些

反映工业发展质量与效益的主要指标有哪些

我国经济已由高速增长阶段转向高质量发展阶段&#xff0c;这是新时代我国经济发展的基本特征。推动高质量发展&#xff0c;是保持经济持续健康发展的必然要求&#xff0c;是适应我国社会主要矛盾变化和全面建成小康社会、全面建设社会主义现代化国家的必然要求&#xff0c;是遵…
阅读更多...
解决Gson转Map时数值int、long等转为Double

解决Gson转Map时数值int、long等转为Double

今天尝试使用Gson&#xff0c;发现转Map时数值都转成了Double&#xff0c;百度无果后&#xff0c;通过查看源码&#xff0c;尝试可以通过自定义对象转数值策略来解决&#xff0c;特地记录一下&#xff1b; Gson默认采取将数值转换到Double的策略ToNumberPolicy.DOUBLE&#xf…
阅读更多...
mysql的多表查询和子查询

mysql的多表查询和子查询

多表查询&#xff1a;查询数据时&#xff0c;需要使用多张表来查询 多表查询分类&#xff1a; 1.内连接查询 2.外连接查询 3.子查询 笛卡尔积&#xff1a; create table class (id int primary key auto_increment,name varchar(10) ); create table student (id int primar…
阅读更多...
2024软件测试面试题总结

2024软件测试面试题总结

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 测试技术面试题 1、什么是兼容性测试&#xff1f;兼容性测试侧…
阅读更多...
2024年Java JDK下载安装教程，附详细图文

2024年Java JDK下载安装教程，附详细图文

文章目录 简介一、JDK的下载二、JDK的安装三、设置环境变量(不一定需要执行&#xff09; 简介 博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f34…
阅读更多...
打印机连接电脑后打印无反应解决小方法

打印机连接电脑后打印无反应解决小方法

测试页打印失败是否参阅打印疑难解答已或得帮助 一台刚购买的新惠普打印机&#xff0c;拆箱后正常安装&#xff0c;接通电源、USB线连接电脑&#xff0c;正常安装驱动光盘&#xff1b;然后打印测试页来测试打印机&#xff0c;这个时候你点打印测试页&#xff0c;在打印任务里会…
阅读更多...
国家级会议报道：贝锐蒲公英异地组网高效实现前方数据回传

国家级会议报道：贝锐蒲公英异地组网高效实现前方数据回传

作为市委宣传部的国有新闻媒体&#xff0c;在日常工作中会派遣大量人员外出进行采访、报道&#xff0c;还经常面临国家级重要会议或活动的报道任务。 在这些工作中&#xff0c;前方人员往往需要和后方人员协同、保证内容的时效性&#xff0c;及时反馈现场的相关资料和信息、访…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023