一、Button

Button(按钮)是一种常见的用户界面控件,通常用于触发操作或提交数据。Button 拥有文本标签和一个可点击的区域,用户点击该区域即可触发相应的操作或事件。

Button 的主要功能有:

  • 触发操作:用户点击 Button 可以触发相应的操作,例如提交表单、搜索、切换页面等。

  • 提交数据:Button 可以用于提交表单数据,将用户输入的数据提交到服务器进行处理。

  • 执行命令:Button 可以执行系统或应用程序的命令,例如打印、保存、退出等。

  • 触发事件:Button 可以触发自定义事件,通过与其他组件配合使用,可以实现复杂的交互效果。

1.创建按钮

语法说明:

Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })
Button(options?: {type?: ButtonType, stateEffect?: boolean})

使用:

@Entry
@Component
struct Index {
build() {
Column(){
Button('Ok', { type: ButtonType.Normal, stateEffect: true })
.borderRadius(8)
.backgroundColor(0x317aff)
.width(90)
.height(40)
Button({ type: ButtonType.Normal, stateEffect: true }) {
Row() {
Image($r('app.media.app_icon')).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)
}
}
}

2.设置按钮类型

@Entry
@Component
struct Index {
build() {
Column(){
Button('Disable', { type: ButtonType.Capsule, stateEffect: false })
.backgroundColor(0x317aff)
.width(90)
.height(40)
Button('Circle', { type: ButtonType.Circle, stateEffect: false })
.backgroundColor(0x317aff)
.width(90)
.height(90)
Button('Circle', { type: ButtonType.Normal, stateEffect: false })
.backgroundColor(0x317aff)
.width(90)
.height(90)
}
}
}

注意:不支持通过borderRadius属性重新设置

3.自定义样式

@Entry
@Component
struct Index {
build() {
Column(){
Button('circle border', { type: ButtonType.Normal })
.borderRadius(20)
.height(40)
Button('font style', { type: ButtonType.Normal })
.fontSize(20)
.fontColor(Color.Pink)
.fontWeight(800)
Button('background color').backgroundColor(0xF55A42)
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.ic_public_refresh')).width(30).height(30)
}.width(55).height(55).margin({ left: 20 }).backgroundColor(0xF55A42)
}
}
}

4.添加事件

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

5.案例

Button按钮的实际应用场景主要包括以下几个方面:

点击提交表单

当用户填写完表单后,点击Button按钮来提交表单数据,使得数据能够被服务器端处理或者保存到数据库中。

跳转链接

当用户点击Button按钮时,跳转到指定的网页、应用程序或者其他页面。

打开或关闭弹窗

当用户点击Button按钮时,打开或关闭弹窗,可以在弹窗中展示一些信息、广告或者提示。

执行某个动作

当用户点击Button按钮时,执行某个操作,比如刷新页面、播放音乐、暂停视频等。

切换页面状态

当用户点击Button按钮时,可以切换页面的状态,比如打开或关闭菜单、切换语言、切换主题等。

Button按钮的应用场景非常广泛,基本上所有需要用户交互的场景都可以使用Button按钮来实现。

2.1 页面跳转

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

2.2 表单提交

// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
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)
}
}

2.3 悬浮按钮

// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
build() {
Stack() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}
}, item => item)
}.width('90%')
Button() {
Image($r('app.media.ic_public_refresh'))
.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 })
}
}

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing,不定期分享原创知识。
  • 更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY

鸿蒙HarmonyOS实战-ArkUI组件(Button)的更多相关文章

  1. 鸿蒙的远程交互组件应用及微信小程序的远程交互组件应用

    注:鸿蒙的远程交互组件应用相对复杂 ,访问网络时,首先要配置网络权限,华为官方文档有问题,在此引用我老师配置的模板,见附件 过程:1.导入鸿蒙的网络请求模块fetch 2.发起对服务器的请求(在这过程 ...

  2. ListView中的组件Button的OnClick事件触发时机

    Android开发时,ListView中的组件Button的OnClick事件必须在ListView之外的组件事件触发后才能触发? 此处ListView无OnItemClick事件,而且ListVie ...

  3. 微信小程序组件button

    表单组件button:官方文档 Demo Code: var types=['default', 'primary', 'warn']; var pageObject = { data: { defa ...

  4. UI 组件 | Button

    最近在与其他自学 Cocos Creator 的小伙伴们交流过程中,发现许多小伙伴对基础组件的应用并不是特别了解,自己在编写游戏的过程中也经常对某个属性或者方法的用法所困扰,而网上也没有比较清晰的用法 ...

  5. 微信小程序入门与实战 常用组件API开发技巧项目实战*全

    第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...

  6. 微信小程序_(表单组件)button组件的使用

    微信小程序表单组件button官方文档 传送门 Learn 一.button组件的使用 一.button组件的使用 size:按钮的大小[默认值default] type:按钮的样式类型[默认值def ...

  7. 手把手带你体验鸿蒙 harmonyOS

    wNlRGd.png 前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 GIthub 博客 学习导图 image.png 一.为什么要尝鲜 harmonyos? wNlfx ...

  8. P11_组件-button和image组件的基本用法

    其它常用组件 button 按钮组件 功能比 HTML 中的 button 按钮丰富 通过 open-type 属性可以调用微信提供的各种功能(客服.转发.获取用户授权.获取用户信息等) image ...

  9. 最全华为鸿蒙 HarmonyOS 开发资料汇总

    开发 本示例基于 OpenHarmony 下的 JavaScript UI 框架,进行项目目录解读,JS FA.常用和自定义组件.用户交互.JS 动画的实现,通过本示例可以基本了解和学习到 JavaS ...

  10. 鸿蒙HarmonyOS应用开发落地实践,Harmony Go 技术沙龙落地北京

    12月26日,华为消费者BG软件部开源中心与51CTO Harmony OS技术社区携手,共同主办了主题为"Harmony OS 应用开发落地实践"的 Harmony Go 技术沙 ...

随机推荐

  1. 获取Linux mac地址(centos与ubuntu通用)

    ip -a addr| grep link/ether | awk '{print $2}'| head -n 1 获取Linux mac地址(centos与ubuntu通用)

  2. std::shared_ptr 线程安全方面的思考

    一直惦记着 std::shared_ptr 线程安全的问题,看了些文章后,又怕过段时间忘记了,遂记录下来 std::shared_ptr 的线程安全问题主要有以下两种: 引用计数的加减操作是否线程安全 ...

  3. Lua学习笔记之迭代器、table、模块和包、元表和协程

    迭代器 迭代器是一种对象,它能够来遍历标准库模板容器中的部分或全部元素,每个迭代器对象代表容器中确定的地址,在Lua中迭代器是一种支持指针类型的结构,他可以遍历集合的每一个元素. 泛型for迭代器 泛 ...

  4. Retrofit 的基本用法

    一.添加依赖和网络权限 添加依赖 implementation 'com.squareup.retrofit2:retrofit:2.9.0' implementation 'com.squareup ...

  5. 如何在矩池云使用 Poetry 管理项目环境

    官网介绍:Poetry is a tool for dependency management and packaging in Python. It allows you to declare th ...

  6. 【Application Insights】使用Powershell命令向Application Insgihts发送测试数据

    问题描述 在昨天的文章中,介绍了 "[Application Insights]使用CURL命令向Application Insgihts发送测试数据",今天则继续实验通过Powe ...

  7. go语言实现扫雷

    源码如下 package main import ( "archive/zip" "bytes" "encoding/base64" &qu ...

  8. Mapbox实战项目(1)-栅格图片图层实现地图方位展示

    需求背景 需要实现地图上展示一个类似于罗盘的标记,随着地图的缩放.切换.旋转等,能够在地图的中央指示出地图的方位. 系统自带的方位控件太小,在特殊业务场景下不够醒目. 技术选型 Mapbox 实现分析 ...

  9. C++ //排序案列 //描述:将person自定义数据类型进行排序,Person中有属性 姓名,年龄,身高 //排序规则: 按照年龄进行的升序,如果年龄相同按照身高进行降序

    1 //排序案列 2 //描述:将person自定义数据类型进行排序,Person中有属性 姓名,年龄,身高 3 //排序规则: 按照年龄进行的升序,如果年龄相同按照身高进行降序 4 5 #inclu ...

  10. springboot,简要记录,方便复习,

    boot 笔记第一步新建工程,导包,由于boot的数据库框架是用mybtis -paus,所以关于数据库系统那儿不用色选mybatis ,需要重新maven导包完整导包以下人容: <?xml v ...