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

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的逻辑
    });