HarmonyOS NEXT 案例实战之 Button 程序员追女朋友代码实现HarmonyOS NEXT 案例实战之

HarmonyOS NEXT 案例实战之 Button 程序员追女朋友代码实现

应用使用场景

这种类型的应用展示了通过互动软件表达情感或增进关系的一种创意方式，常用于：

发送有趣互动信息。
制作具有特定主题的小应用。
增加交互乐趣，通过游戏化的方式展示信息。

原理解释

通过设计两个按钮，“答应”和“拒绝”，“拒绝”按钮会动态移动，使用户无法点击，增加互动趣味性。最终，用户只能选择“答应”按钮，达到预期效果。

算法原理流程图

+---------------------------+
| 初始化 UI 界面            |
+-------------+-------------+
              |
              v
+---------------------------+
| 创建“答应”和“拒绝”按钮  |
+-------------+-------------+
              |
              v
+---------------------------+
| 用户尝试点击“拒绝”按钮   |
+-------------+-------------+
              |
              v
+---------------------------+
| 动态移动“拒绝”按钮       |
+-------------+-------------+
              |
              v
+---------------------------+
| 用户点击“答应”按钮       |
| 显示成功信息             |
+---------------------------+

算法原理解释

初始化 UI 界面：创建必需的 UI 元素和布局。
创建“答应”和“拒绝”按钮：在界面上放置两个按钮。
用户尝试点击“拒绝”按钮：监听用户对“拒绝”按钮的点击事件。
动态移动“拒绝”按钮：每次用户接近时随机改变其位置。
用户点击“答应”按钮：当用户点击“答应”按钮时显示最后的消息。

ArkTS + ArkUI 代码示例实现

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

// 创建按钮并定义行为
function createChaseButtons() {
    const acceptButton = new Button({
        text: '答应',
        style: {
            width: '100px',
            height: '50px',
            backgroundColor: '#4caf50',
            color: '#fff',
            marginRight: '10px'
        }
    });

    const rejectButton = new Button({
        text: '拒绝',
        style: {
            width: '100px',
            height: '50px',
            backgroundColor: '#f44336',
            color: '#fff'
        }
    });

    // “答应”按钮点击事件
    acceptButton.on('click', () => {
        console.log('太好了！你答应了！');
        alert('太好了！你答应了！');
    });

    // “拒绝”按钮点击事件，实现动态移动
    rejectButton.on('mouseenter', () => {
        const x = Math.random() * (window.innerWidth - 100);
        const y = Math.random() * (window.innerHeight - 50);
        rejectButton.style.position = 'absolute';
        rejectButton.style.left = `${x}px`;
        rejectButton.style.top = `${y}px`;
    });

    return { acceptButton, rejectButton };
}

// 使用按钮组件
const { acceptButton, rejectButton } = createChaseButtons();
document.body.appendChild(acceptButton);
document.body.appendChild(rejectButton);

测试代码与部署场景

测试代码：确保“拒绝”按钮能正常避开鼠标，且“答应”按钮被点击后显示正确的消息。
部署场景：在网页或移动设备上测试，确保不同分辨率下都能正常运行。

材料链接

总结

此类应用通过简单的交互体验带来趣味性，在开发中需要注重 UI 元素之间的协调和动态交互的流畅性。

未来展望

随着 Web 和移动技术的发展，未来类似应用可以集成更多丰富的交互形式，如动画效果、AI 驱动的个性化建议等，为用户提供更具创意和个性化的体验。同时，结合 AR 技术，可以将虚拟对象与真实环境融合，创造更生动的交互场景。