使用floaty.window创建的按钮为什么不能拖动

已存档
wjuktymwar · 2 个月前
第 1 条补充
·
2 个月前

floaty.window创建一个弹框并且设置宽高字体大小可拖动

第 2 条补充
·
2 个月前

创建一个长时间停留可拖拽的悬浮框按钮,并且有点击事件以及背景颜色等

回答

Hamibot AI
1
· 2 个月前

使用 floaty.window 创建的悬浮窗默认自带调整位置、大小的功能,但按钮无法直接拖动的原因是:按钮控件本身不具备拖动事件处理逻辑

如果你希望实现按钮的拖动功能,需要手动为按钮添加触摸事件监听器,并通过修改悬浮窗的位置实现拖动。下面是一个示例代码:

// 文档地址 https://docs.hamibot.com/
var window = floaty.window(
    <vertical>
        <button id="dragBtn" text="拖动我" />
    </vertical>
);

// 实现按钮拖动功能
window.dragBtn.setOnTouchListener(function(view, event) {
    switch(event.getAction()) {
        case android.view.MotionEvent.ACTION_DOWN:
            // 记录按下时的坐标
            var initialX = event.getRawX();
            var initialY = event.getRawY();
            var windowPos = {
                x: window.getX(),
                y: window.getY()
            };
            view.getParent().requestDisallowInterceptTouchEvent(true);
            return function(innerView, innerEvent) {
                switch(innerEvent.getAction()) {
                    case android.view.MotionEvent.ACTION_MOVE:
                        // 更新悬浮窗位置
                        var dx = innerEvent.getRawX() - initialX;
                        var dy = innerEvent.getRawY() - initialY;
                        window.setPosition(windowPos.x + dx, windowPos.y + dy);
                        break;
                    case android.view.MotionEvent.ACTION_UP:
                        // 释放资源
                        view.getParent().requestDisallowInterceptTouchEvent(false);
                        break;
                }
                return true;
            };
    }
    return true;
});

这段代码为按钮添加了触摸事件监听器,并在触摸移动(ACTION_MOVE)时动态更新悬浮窗的位置,从而实现拖动效果。


补充回答 1

可以使用 floaty.window 创建一个弹框,并通过设置宽高、字体大小以及添加拖动功能来实现需求。以下是一个完整的示例代码:

// 文档地址 https://docs.hamibot.com/

// 创建悬浮窗弹框
var window = floaty.window(
    <vertical padding="10">
        <text id="message" text="这是一个可拖动的弹框" textSize="18sp" textColor="#000000" />
    </vertical>
);

// 设置悬浮窗的宽度和高度
window.setSize(300, 150); // 宽度300px,高度150px

// 设置悬浮窗的初始位置
window.setPosition(200, 200);

// 添加触摸事件监听器,实现拖动功能
window.message.setOnTouchListener(function(view, event) {
    switch(event.getAction()) {
        case android.view.MotionEvent.ACTION_DOWN:
            // 记录按下时的坐标
            var initialX = event.getRawX();
            var initialY = event.getRawY();
            var windowPos = {
                x: window.getX(),
                y: window.getY()
            };
            view.getParent().requestDisallowInterceptTouchEvent(true);
            return function(innerView, innerEvent) {
                switch(innerEvent.getAction()) {
                    case android.view.MotionEvent.ACTION_MOVE:
                        // 更新悬浮窗位置
                        var dx = innerEvent.getRawX() - initialX;
                        var dy = innerEvent.getRawY() - initialY;
                        window.setPosition(windowPos.x + dx, windowPos.y + dy);
                        break;
                    case android.view.MotionEvent.ACTION_UP:
                        // 释放资源
                        view.getParent().requestDisallowInterceptTouchEvent(false);
                        break;
                }
                return true;
            };
    }
    return true;
});

功能说明:

  1. 设置宽高:使用 setSize(width, height) 方法设置了悬浮窗的宽度为 300px,高度为 150px。
  2. 设置字体大小:在 XML 布局中通过 textSize="18sp" 设置了文本的字体大小。
  3. 实现拖动:为文本控件添加了触摸事件监听器,在按下并移动手指时动态更新悬浮窗的位置,从而实现拖动效果。

你可以根据需要调整宽高、字体大小或拖动区域。


补充回答 2

以下是一个使用 floaty.window 创建的悬浮按钮示例,它具备以下功能:

  • 长时间显示在屏幕上;
  • 可拖动;
  • 有点击事件;
  • 设置了背景颜色。
// 文档地址 https://docs.hamibot.com/

// 创建悬浮按钮
var floatBtn = floaty.window(
    <frame bg="#FF5722" w="100" h="50" gravity="center">
        <text id="btnText" text="点击我" textColor="#FFFFFF" textSize="16sp" />
    </frame>
);

// 设置悬浮窗初始位置
floatBtn.setPosition(300, 800);

// 实现拖动功能
floatBtn.btnText.setOnTouchListener(function(view, event) {
    switch(event.getAction()) {
        case android.view.MotionEvent.ACTION_DOWN:
            var initialX = event.getRawX();
            var initialY = event.getRawY();
            var windowPos = {
                x: floatBtn.getX(),
                y: floatBtn.getY()
            };
            view.getParent().requestDisallowInterceptTouchEvent(true);
            return function(innerView, innerEvent) {
                switch(innerEvent.getAction()) {
                    case android.view.MotionEvent.ACTION_MOVE:
                        var dx = innerEvent.getRawX() - initialX;
                        var dy = innerEvent.getRawY() - initialY;
                        floatBtn.setPosition(windowPos.x + dx, windowPos.y + dy);
                        break;
                    case android.view.MotionEvent.ACTION_UP:
                        view.getParent().requestDisallowInterceptTouchEvent(false);
                        break;
                }
                return true;
            };
    }
    return true;
});

// 按钮点击事件
floatBtn.btnText.click(function() {
    toast("按钮被点击了");
    // 这里可以添加你需要执行的操作
});

// 保持脚本运行(防止脚本结束导致悬浮窗关闭)
setInterval(function () {}, 1000);

功能说明:

  • 悬浮按钮样式:通过 XML 设置了按钮宽高、背景颜色、文字内容、字体大小和颜色。
  • 拖动支持:为文本控件添加了触摸监听器,在滑动时更新悬浮窗位置。
  • 点击事件:给按钮绑定点击事件,并弹出提示信息。
  • 持久显示:使用 setInterval 让脚本持续运行,避免自动退出。

你可以根据需要修改按钮的样式、位置或响应逻辑。

ℹ️ 本回答由 AI 生成,内容仅供参考