【鸿蒙开发】第1课，初体验与Button组件

Afra55
85 阅读5分钟

1 安装 DevEco Studio

developer.huawei.com/consumer/cn…

2 创建默认项目

image.png

3 实现效果

动画.gif

4 实现代码

// 引入系统提示模块，用于显示提示信息
import prompt from '@system.prompt';

// 声明组件的入口装饰器，标识此组件为应用的入口
@Entry
// 声明一个组件结构体
@Component
struct Index {
  // 声明一个状态变量message，用于存储要显示的文本信息
  @State message: string = 'Hello Afra55, you are so cute!';
  // 声明一个状态变量length，用于存储message的长度
  @State length: number = 0;

  // 构建UI界面的方法
  build() {
    // 创建一个垂直布局的容器
    Column() {
      // 如果length大于0，则显示message的长度
      if (this.length > 0) {
        // 显示文本，内容为"message.length="加上length的字符串表示
        Text("message.length=" + this.length.toString())
      }
      // 创建一个按钮，显示message的内容
      Button(this.message)
        // 为按钮设置点击事件
        .onClick(() => {
          // 使用prompt模块显示一个Toast提示，内容为"Click me"
          prompt.showToast({
            "message": "Click me"
          })
          // 如果length为0，则将length设置为message的长度
          if (this.length == 0) {
            this.length = this.message.length
          } else {
            // 否则，将length重置为0
            this.length = 0
          }
        })
    }
    // 设置容器的高度为100%
    .height('100%')
    // 设置容器的宽度为100%
    .width('100%')
  }
}

在这段代码中，length 是一个状态变量（用 @State 装饰器声明）。状态变量的变化会引起界面的重新渲染，这是声明式UI框架的核心特性之一。 状态变量的作用可以概括为以下几点：

  1. 状态存储：

    • 使用 @State 装饰器声明状态变量，用于存储组件中可能会随用户交互或其他条件变化的数据。

  2. 自动更新：

    • 状态变量的变化会被框架自动检测，并触发界面的重新渲染。

  3. 声明式UI：

    • 在声明式 UI 框架中，UI 是状态变量的函数。状态变量的当前值决定了 UI 的呈现方式。
    • 当状态变量更新时，框架会重新调用渲染方法（如 build），以生成反映最新状态的 UI。

这种机制简化了 UI 开发，使开发者只需关注状态的管理和更新，而无需手动操作 ，从而提高了代码的可维护性和可读性。

5 Button组件简介

Button组件是鸿蒙UI框架（ArkUI）中的一个基本组件，用于在用户界面上创建可点击的按钮。按钮上通常显示文本或图标，用户通过点击按钮来触发特定的操作。

5.1 创建Button组件

在鸿蒙开发中，可以通过调用接口来创建Button组件。Button组件的创建有两种主要形式：不包含子组件的按钮和包含子组件的按钮。

创建不包含子组件的按钮

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

例如，创建一个普通类型的按钮，并设置其文字为“Ok”：

image.png

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

创建包含子组件的按钮

image.png

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

这种形式的按钮可以包含子组件，如文本和图像。例如，创建一个包含文本和图像的按钮：

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

5.2 Button组件的类型

鸿蒙Button组件提供了多种类型，以满足不同的设计需求。主要包括：

5.2.1 胶囊按钮（Capsule）：这是Button组件的默认类型，按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。

image.png

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

5.2.2 圆形按钮（Circle）：按钮为圆形，不支持通过borderRadius属性重新设置圆角。

image.png

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

5.2.3 普通按钮（Normal）：按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

image.png

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

5.3 自定义Button组件样式

鸿蒙提供了丰富的属性来自定义Button组件的样式，以满足不同的设计需求。

5.3.1 设置边框弧度：使用borderRadius属性设置按钮的边框弧度。

image.png

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

5.3.2 设置文本样式：通过添加文本样式设置按钮文本的展示样式，如字体大小、颜色和粗细等。

image.png

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

5.3.3 设置背景颜色：使用backgroundColor属性设置按钮的背景颜色。

image.png

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

5.3.4 添加图像：通过在Button组件中添加Image子组件，可以为按钮添加图标或背景图像。

image.png

Button({ type: ButtonType.Circle, stateEffect: true }) {
  Image($r('app.media.startIcon')).width(30).height(30)
}
.width(55)
.height(55)
.margin({ left: 20 })
.backgroundColor(0xF55A42);

5.4 Button组件的事件处理

在鸿蒙开发中，可以通过为Button组件添加事件处理函数来响应用户的点击操作。最常用的点击事件处理函数是onClick。

image.png

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

除了点击事件外，Button组件还支持其他事件，如onHover（鼠标指针移动到元素上时发生的事件）、onMouse（鼠标移动事件）、onTouch（触摸时发生的事件）等。根据具体需求，可以为Button组件添加不同的事件处理函数。

5.5 Button组件的实际应用场景

Button组件在鸿蒙应用开发中有着广泛的应用场景，主要包括：

5.5.1 表单提交：在用户登录/注册页面，使用按钮进行登录或注册操作。

image.png

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)

5.5.2 页面跳转：使用按钮启动任何用户界面元素，按钮会根据用户的操作触发相应的事件。例如，在List容器里通过点击按钮进行页面跳转, 页面跳转会在后面章节详解。

image.png

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

  1. 功能操作：如刷新页面、播放音乐、暂停视频等。

    Button('Refresh').onClick(() => {
  // 刷新页面的逻辑
});

  2. 状态切换：如打开或关闭菜单、切换语言、切换主题等。

    let isMenuOpen = false;

Button('Toggle Menu').onClick(() => {
  isMenuOpen = !isMenuOpen;
  // 更新UI的逻辑
});
avatar
文章
阅读
粉丝