HarmonyOS ArkTS Button基本使用（十八）_harmonyos arkts 按钮

HarmonyOS ArkTS是一种应用于鸿蒙系统的应用开发语言，它在TypeScript的基础上，扩展了声明式UI、状态管理等能力。在HarmonyOS中，Button是一种常用的组件，用于实现页面间的跳转和交互。下面详细介绍HarmonyOS ArkTS中Button的基本使用方法。

1. 创建Button组件

在ArkTS中，可以通过以下方式创建一个Button组件：

import { Button } from '@harmonyos/ui';

const myButton = Button({
  text: '点击我',
  onClick: () => {
    // 按钮点击后的回调函数
  },
});
1
2
3
4
5
6
7
8

2. 添加Button到页面

创建好Button组件后，需要将其添加到页面的UI树中。以下是在ArkTS中添加Button到页面的示例：

import { View } from '@harmonyos/ui';

const myPage = View({
  children: [
    myButton,
  ],
});
1
2
3
4
5
6
7

3. 绑定Button事件

在ArkTS中，可以通过onClick属性绑定按钮的点击事件。以下是一个示例：

const myButton = Button({
  text: '点击我',
  onClick: () => {
    // 按钮点击后的回调函数
    console.log('Button被点击了');
  },
});
1
2
3
4
5
6
7

4. 样式设置

ArkTS提供了丰富的样式设置，可以自定义Button的样式。以下是一个示例：

const myButton = Button({
  text: '点击我',
  style: {
    backgroundColor: 'blue',
    color: 'white',
    padding: 10,
    borderRadius: 5,
  },
  onClick: () => {
    // 按钮点击后的回调函数
  },
});
1
2
3
4
5
6
7
8
9
10
11
12

5. 传递数据

在ArkTS中，可以通过props传递数据。以下是一个示例：

const myButton = Button({
  text: '点击我',
  onClick: (data) => {
    // 按钮点击后的回调函数，接收传递的数据
    console.log('传递的数据：', data);
  },
});

// 在父组件中传递数据
const parentComponent = {
  props: {
    data: 'Hello from parent',
  },
};

const myPage = View({
  components: {
    parentComponent,
    myButton,
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21