HarmonyOS鸿蒙Next上手做一个华为手表应用 2 - 在主页添加一个按钮并响应点击事件

HarmonyOS鸿蒙Next上手做一个华为手表应用 2 - 在主页添加一个按钮并响应点击事件 接上一篇：https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356376262560775&fid=0101303901040230869

源码仓库地址：https://gitee.com/zhaoquan/harmonyoswatchdemo

在主页添加一个按钮并响应点击事件

<!-- index.hml -->
<div class="container">
    <text class="title">Hello {{title}}</text>
    <input type="button" class="btn" value="点我" onclick="clickAction"/>
</div>

在 index.hml 创建页面时生成的默认代码中添加：

<input type="button" class="btn" value="点我" onclick="clickAction"/>

样式

/*index.css*/
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 454px;
    height: 454px;
}

.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}

.btn{
    width:200px;
    height:50px;
}

在 index.css 创建页面时生成的默认代码中修改 container 的样式：

/* 不再用弹性布局 */
/* display: flex， */
display: flex;

/* 改为 */
flex-direction: column;

添加 btn 的样式：

.btn{
    width:200px;
    height:50px;
}

JavaScript

//index.js
export default {
    data: {
        title: 'World'
    },
    clickAction(){
        console.log("我被点击了")
    }
}

在 index.js 默认代码中添加：

clickAction(){
    console.log("我被点击了")
}

这个函数的意思是在控制台打印出汉字：我被点击了，注意 clickAction 上一行需要加英文逗号。

启动 debug

第一次启动 debug 好像要下载什么，我这里是弹出一个报错什么的，我当时没截图，点了右下角的一个按钮，然后 windows 一个安全提醒，要联网什么的，同意，过一会再点 debug 就启动了 Simulator（模拟器，跟预览器不是一个东西）。

之后每次启动都会有下图的弹框，点 OK 即可。

启动远程虚拟设备

预览器，模拟器，远程虚拟设备

  • 预览器入口：View -> Tool Windows -> Previewer（要进入到具体页面编辑代码，再打开菜单才显示 Previewer）
  • 模拟器：入口1：Run -> Debug ‘entry’，入口2：View -> Tool Windows -> simulator（需要入口1执行成功一次才有）
  • 远程虚拟设备：Tools -> HVD Manager（留意使用时长限制）

下一篇的链接

上手做一个华为鸿蒙手表应用 3 - 添加训练页面并实现其与主页面的互相跳转： https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202356576775850798&fid=0101303901040230869


更多关于HarmonyOS鸿蒙Next上手做一个华为手表应用 2 - 在主页添加一个按钮并响应点击事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

这个能用真实手表调试吗

更多关于HarmonyOS鸿蒙Next上手做一个华为手表应用 2 - 在主页添加一个按钮并响应点击事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


硬核内容！果然够劲道

打酱油的路过，帮顶

我们一起学习一下

看上去可以顶一下

所以后续还会有详细内容？

？

会的，我是照张荣超老师的视频教程走一遍，您也可以去走一遍，动手了，效果很好

在HarmonyOS鸿蒙Next中为华为手表应用在主页添加一个按钮并响应点击事件，可以按照以下步骤进行：

  1. 创建布局文件：在resources/base/layout目录下创建一个新的XML布局文件，例如main_page.xml。在该文件中添加一个按钮组件，使用<Button>标签，并为其设置ID和文本。
<Button
    ohos:id="$+id:my_button"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:text="Click Me"
    ohos:background_element="$graphic:button_background"
    ohos:clickable="true"
    ohos:focusable="true"/>
  1. 加载布局文件：在应用的MainAbilitySlice中，使用setUIContent方法加载刚才创建的布局文件。
@Override
public void onStart(Intent intent) {
    super.onStart(intent);
    setUIContent(ResourceTable.Layout_main_page);
}
  1. 获取按钮实例：在MainAbilitySlice中，通过findComponentById方法获取按钮的实例。
Button myButton = (Button) findComponentById(ResourceTable.Id_my_button);
  1. 设置点击事件监听器：为按钮设置点击事件监听器，使用setClickedListener方法，并在回调方法中处理点击事件。
myButton.setClickedListener(component -> {
    // 处理点击事件的逻辑
    // 例如：显示一个Toast消息
    showToast("Button Clicked!");
});
  1. 显示Toast消息：在点击事件的处理逻辑中，可以使用ToastDialog来显示一个简单的提示消息。
private void showToast(String message) {
    getUITaskDispatcher().asyncDispatch(() -> {
        new ToastDialog(getContext())
            .setText(message)
            .show();
    });
}

通过以上步骤，你可以在HarmonyOS鸿蒙Next的华为手表应用中成功添加一个按钮，并响应其点击事件。

在HarmonyOS鸿蒙Next中为华为手表应用添加按钮并响应点击事件，首先在resources/base/layout目录下创建或编辑XML布局文件，添加一个Button组件。然后在MainAbilitySlice类中，通过findComponentById获取按钮实例，并设置ClickedListener监听器。在监听器中实现点击事件的逻辑处理。最后，确保在config.json中正确配置了Ability和Slice。这样，当用户点击按钮时，应用将执行相应的操作。

回到顶部