鸿蒙学习笔记 05 按钮

引言

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

同理, 使用ArkUI, 也可以构建这样的一个页面:

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

开始

搭建框架

实现这样一个框架应该不难吧, 抽象一下, 就是下面这样的结构:

@State clickTimes: number = 0;

Column() {
    Text(JSON.stringify(this.clickTimes))
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
    Button("点我 + 1")
      .width(180)
      .fontSize(20)
}

这里我们使用JSON.stringify()方法, 渲染出来clickTimes这个数字类型的变量, 并且设定了对应的字体大小, 以及宽度.

实现功能

其实超级简单, 因为ArkUI是组件化编程, 自然, 我们可以使用链式编程, 找所有.on...的方法, 有一个.onClick方法可以调用!

根据之前的经验, 绝对是传入一个回调函数, 所以直接传入就好啦: 因为是按钮, 所以点击是没有传入参数的.

Button("点我 + 1")
    .width(180)
    .fontSize(20)
    .onClick(() => {
    this.clickTimes++;
})

---

其实已经完成了, 是不是很简单? 不要着急, 后面还会有更多的属性和方法

细看

首先明确, 按钮传入的字符串, 其实和Text()组件是一样的, 即可以是一个字符串, 也可以是一个本地化的字符串(就是文件中的, 还记得吗? 不记得的话回去看看)

所以, 这里也是可以使用$r来调用本地资源的, 比如这样子, 调用一个程序名称:

另外, 你知道吗, 其实按钮可以不传入这个字符串! 我们可以尝试做一个图片按钮出来√

这里先插入一个小技巧, 当你不知道一个方法传入什么的时候, 可以看看提示, 然后直接输入提示的类, 用点来使用其中的属性哦

我们会需要用到这个.type()来修改按钮的形状. 因为我们的按钮是图片按钮啊, 所以就需要是一个圆形的吧? 那么当然就是Circle啦.

Button()
    .type(ButtonType.Circle)

不过, 也就只有两种按钮的种类了, 一个就是默认, 一个就是圆形, 不过都是可以通过额外的样式来控制的

随后, 按钮肯定需要图标, 我们这里直接在后面跟一个大括号, 里面放一个图片组件就可以了

什么? 你的图片太大啦? 请设置图片的宽度为100%, 然后设置父容器, 在这里是按钮的宽度为一个小一点的值就好√

当然, 图片按钮的职能是一样的, 可以添加点击事件, 从而让上面的数字+1

除了上面这些比较基本的, 还有一个叫做buttonStyle的东西, 这个东西才是控制的按钮的样式, 比如是纯色打底, 白色文字, 还是透明打底, 蓝色文字, 又或者只有一个蓝色的文字. 下面是代码及浏览效果

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({space: 10}) {
        Button("Test")
          .fontSize(40)
          .padding(10)
          .buttonStyle(ButtonStyleMode.NORMAL)
        Button("Test")
          .fontSize(40)
          .padding(10)
          .buttonStyle(ButtonStyleMode.EMPHASIZED)
        Button("Test")
          .fontSize(40)
          .padding(10)
          .buttonStyle(ButtonStyleMode.TEXTUAL)
      }
      .width('100%')
    }
    .height('100%')
  }
}

End

另外, 这个按钮还有很多有意思的用法, 比如可以作为悬浮按钮, 改变颜色, 设置按钮组之类的… 当然, 这里我不做论述, 因为相信来看的都是初学者, 我也是个初学者而已, 还没学到position之类的位置啊什么的

总而言之, 希望你能够掌握上述用法√ 学习愉快