ToB企服应用市场:ToB评测及商务社交产业平台

标题: 鸿蒙学习条记 05 按钮 [打印本页]
作者: 写过一篇    时间: 2024-12-11 00:12
标题: 鸿蒙学习条记 05 按钮
引言

输入框后, 又一个具有与用户交互强相关逻辑的组件, 也是效果最显着的组件. 我们点击按钮, 一般都是为了与页面中的元素进行交互, 好比说Vue3一开始创建项目, 就实现了一个按钮点击, 让数字 +1 的效果.
同理, 使用ArkUI, 也可以构建这样的一个页面:

那么接下来, 我会带你实现一个这个效果, 并且给你讲解按钮是如何使用的.
开始

搭建框架

实现这样一个框架应该不难吧, 抽象一下, 就是下面这样的结构:
  1. @State clickTimes: number = 0;
  3. Column() {
  4.     Text(JSON.stringify(this.clickTimes))
  5.       .fontSize(50)
  6.       .fontWeight(FontWeight.Bold)
  7.     Button("点我 + 1")
  8.       .width(180)
  9.       .fontSize(20)
  10. }
复制代码
这里我们使用JSON.stringify()方法, 渲染出来clickTimes这个数字范例的变量, 并且设定了对应的字体大小, 以及宽度.
实现功能

其实超等简单, 因为ArkUI是组件化编程, 天然, 我们可以使用链式编程, 找所有.on...的方法, 有一个.onClick方法可以调用!
根据之前的经验, 绝对是传入一个回调函数, 所以直接传入就好啦: 因为是按钮, 所以点击是没有传入参数的.
  1. Button("点我 + 1")
  2.     .width(180)
  3.     .fontSize(20)
  4.     .onClick(() => {
  5.     this.clickTimes++;
  6. })
复制代码
其实已经完成了, 是不是很简单? 不要着急, 背面还会有更多的属性和方法
细看

首先明确, 按钮传入的字符串, 其实和Text()组件是一样的, 即可以是一个字符串, 也可以是一个本地化的字符串(就是文件中的, 还记得吗? 不记得的话回去看看)
所以, 这里也是可以使用$r来调用本地资源的, 好比这样子, 调用一个程序名称:

别的, 你知道吗, 其实按钮可以不传入这个字符串! 我们可以实验做一个图片按钮出来√
   这里先插入一个小技巧, 当你不知道一个方法传入什么的时间, 可以看看提示, 然后直接输入提示的类, 用点来使用其中的属性哦

  我们会需要用到这个.type()来修改按钮的形状. 因为我们的按钮是图片按钮啊, 所以就需要是一个圆形的吧? 那么当然就是Circle啦.
  1. Button()
  2.     .type(ButtonType.Circle)
复制代码
不过, 也就只有两种按钮的种类了, 一个就是默认, 一个就是圆形, 不过都是可以通过额外的样式来控制的

随后, 按钮肯定需要图标, 我们这里直接在背面跟一个大括号, 里面放一个图片组件就可以了
   什么? 你的图片太大啦? 请设置图片的宽度为100%, 然后设置父容器, 在这里是按钮的宽度为一个小一点的值就好√
  

当然, 图片按钮的职能是一样的, 可以添加点击事件, 从而让上面的数字+1
除了上面这些比较基本的, 还有一个叫做buttonStyle的东西, 这个东西才是控制的按钮的样式, 好比是纯色打底, 白色笔墨, 还是透明打底, 蓝色笔墨, 又或者只有一个蓝色的笔墨. 下面是代码及浏览效果
  1. @Entry
  2. @Component
  3. struct Index {
  4.   build() {
  5.     Row() {
  6.       Column({space: 10}) {
  7.         Button("Test")
  8.           .fontSize(40)
  9.           .padding(10)
  10.           .buttonStyle(ButtonStyleMode.NORMAL)
  11.         Button("Test")
  12.           .fontSize(40)
  13.           .padding(10)
  14.           .buttonStyle(ButtonStyleMode.EMPHASIZED)
  15.         Button("Test")
  16.           .fontSize(40)
  17.           .padding(10)
  18.           .buttonStyle(ButtonStyleMode.TEXTUAL)
  19.       }
  20.       .width('100%')
  21.     }
  22.     .height('100%')
  23.   }
  24. }
复制代码

End

别的, 这个按钮还有许多有意思的用法, 好比可以作为悬浮按钮, 改变颜色, 设置按钮组之类的… 当然, 这里我不做叙述, 因为信赖来看的都是初学者, 我也是个初学者而已, 还没学到position之类的位置啊什么的
总而言之, 希望你能够掌握上述用法√ 学习舒畅

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4