HarmonyOS 鸿蒙Next按钮拖拽功能实现方式

发布于 1周前 作者 caililin 来自 鸿蒙OS

HarmonyOS 鸿蒙Next按钮拖拽功能实现方式

按钮拖拽功能实现方式

Harmonyos Next教程
2 回复
窗管级悬浮窗请参考：TYPE_FLOAT9+ 悬浮窗

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-window-0000001820880785#ZH-CN_TOPIC_0000001820880785__windowtype7

悬浮图标请您参考这个简单的demo适当修改：

```

import { window } from '@kit.ArkUI';

@Entry
@Component
struct Page3 {
@State message: string = ‘Hello World’;


build() {
    Row() {
        Column() {
            Text(<span class="hljs-keyword">this</span>.message)
                .fontSize(<span class="hljs-number">50</span>)
                .fontWeight(FontWeight.Bold)
                .onClick(() =&gt; {
                    <span class="hljs-keyword">let</span> windowStage = AppStorage.get(<span class="hljs-string">"windowStage"</span>) as window.WindowStage;
                    windowStage.createSubWindow(<span class="hljs-string">"test"</span>, (err, win) =&gt; {
                        win.setUIContent(<span class="hljs-string">"pages/Page2"</span>);
                        win.resize(<span class="hljs-number">500</span>, <span class="hljs-number">500</span>);
                        win.moveWindowTo(<span class="hljs-number">200</span>, <span class="hljs-number">200</span>);
                        win.showWindow();
                    });
                });
        }
        .width(<span class="hljs-string">'100%'</span>);
    }
    .height(<span class="hljs-string">'100%'</span>)
    .backgroundColor(Color.Pink);
}

}

</p> <p>

import window from ‘@ohos.window’;
import { BusinessError } from ‘@ohos.base’;
import router from ‘@ohos.router’;


@Entry
@Component
struct FloatWindow {
// 定义windowClass变量，用来接收创建的悬浮窗
// 自定义创建悬浮窗方法
createFloatWindow() {
// 窗口类型设置为window.WindowType.TYPE_FLOAT
let windowStage = AppStorage.get(“windowStage”) as window.WindowStage;


    <span class="hljs-comment">// 创建悬浮窗</span>
    windowStage.createSubWindow(<span class="hljs-string">"floatWindow"</span>, (err, win) =&gt; {
        <span class="hljs-keyword">if</span> (err.code) {
            console.error(<span class="hljs-string">'Failed to create the floatWindow. Cause: '</span> + <span class="hljs-built_in">JSON</span>.stringify(err));
            <span class="hljs-keyword">return</span>;
        }
        console.info(<span class="hljs-string">'Succeeded in creating the floatWindow. Data: '</span> + <span class="hljs-built_in">JSON</span>.stringify(win));

        <span class="hljs-comment">// 设置悬浮窗位置</span>
        win.moveWindowTo(<span class="hljs-number">300</span>, <span class="hljs-number">300</span>, (err) =&gt; {
            <span class="hljs-keyword">if</span> (err.code) {
                console.error(<span class="hljs-string">'Failed to move the window. Cause:'</span> + <span class="hljs-built_in">JSON</span>.stringify(err));
                <span class="hljs-keyword">return</span>;
            }
            console.info(<span class="hljs-string">'Succeeded in moving the window.'</span>);
        });

        <span class="hljs-comment">// 设置悬浮窗大小</span>
        win.resize(<span class="hljs-number">500</span>, <span class="hljs-number">500</span>, (err) =&gt; {
            <span class="hljs-keyword">if</span> (err.code) {
                console.error(<span class="hljs-string">'Failed to change the window size. Cause:'</span> + <span class="hljs-built_in">JSON</span>.stringify(err));
                <span class="hljs-keyword">return</span>;
            }
            console.info(<span class="hljs-string">'Succeeded in changing the window size.'</span>);
        });

        <span class="hljs-comment">// 为悬浮窗加载页面内容，这里可以设置在main_pages.json中配置的页面</span>
        win.setUIContent(<span class="hljs-string">"pages/FloatContent"</span>, (err: BusinessError) =&gt; {
            <span class="hljs-keyword">if</span> (err.code) {
                console.error(<span class="hljs-string">'Failed to load the content. Cause:'</span> + <span class="hljs-built_in">JSON</span>.stringify(err));
                <span class="hljs-keyword">return</span>;
            }
            win.setWindowBackgroundColor(<span class="hljs-string">"#00000000"</span>);
            console.info(<span class="hljs-string">'Succeeded in loading the content.'</span>);

            <span class="hljs-comment">// 显示悬浮窗</span>
            win.showWindow((err: BusinessError) =&gt; {
                <span class="hljs-keyword">if</span> (err.code) {
                    console.error(<span class="hljs-string">'Failed to show the window. Cause: '</span> + <span class="hljs-built_in">JSON</span>.stringify(err));
                    <span class="hljs-keyword">return</span>;
                }
                console.info(<span class="hljs-string">'Succeeded in showing the window.'</span>);
            });
        });
    });
}

}

</p> <p>

// 自定义销毁悬浮窗方法
destroyFloatWindow() {
// 用windowClass调用destroyWindow销毁悬浮窗
window.findWindow(“floatWindow”).destroyWindow((err) => {
if (err.code) {
console.error('Failed to destroy the window. Cause: ’ + JSON.stringify(err));
return;
}
console.info(‘Succeeded in destroying the window.’);
});
}


build() {
Row() {
Column() {
TextInput()
Button(‘创建悬浮窗’)
.backgroundColor(’#F9C449’)
.onClick(() => {
// 点击按钮调用创建悬浮窗方法
this.createFloatWindow();
});


        Button(<span class="hljs-string">'销毁悬浮窗'</span>)
            .margin({ top: <span class="hljs-number">20</span> })
            .backgroundColor(<span class="hljs-string">'#F9C449'</span>)
            .onClick(() =&gt; {
                <span class="hljs-comment">// 点击按钮调用销毁悬浮窗方法</span>
                <span class="hljs-keyword">this</span>.destroyFloatWindow();
            });

        Button(<span class="hljs-string">'跳转下一页'</span>)
            .margin({ top: <span class="hljs-number">20</span> })
            .backgroundColor(<span class="hljs-string">'#F9C449'</span>)
            .onClick(() =&gt; {
                <span class="hljs-comment">// 点击按钮调用跳转下一页方法</span>
                router.pushUrl({
                    url: <span class="hljs-string">'pages/Index'</span>
                });
            });
    }
    .width(<span class="hljs-string">'100%'</span>);
}
.height(<span class="hljs-string">'100%'</span>);

}

</p> <p>

//FloatContent.ets

import window from ‘@ohos.window’;


interface Position {
x: number;
y: number;
}


@Entry
@Component
struct FloatContent {
@State message: string = ‘float window’;
private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.All });


<span class="hljs-comment">// 创建位置变量，并使用@Watch监听，变量发生变化调用moveWindow方法移动窗口</span>
@State @Watch(<span class="hljs-string">"moveWindow"</span>) windowPosition: Position = { x: <span class="hljs-number">0</span>, y: <span class="hljs-number">0</span> };
floatWindow: window.Window = window.findWindow(<span class="hljs-string">"floatWindow"</span>);

<span class="hljs-comment">// 通过悬浮窗名称“floatWindow”获取到创建的悬浮窗</span>
aboutToAppear() {
    <span class="hljs-keyword">this</span>.floatWindow = window.findWindow(<span class="hljs-string">"floatWindow"</span>);
    <span class="hljs-keyword">this</span>.floatWindow.setPreferredOrientation(window.Orientation.LANDSCAPE);
}

<span class="hljs-comment">// 将悬浮窗移动到指定位置</span>
moveWindow() {
    <span class="hljs-keyword">this</span>.floatWindow.moveWindowTo(<span class="hljs-keyword">this</span>.windowPosition.x, <span class="hljs-keyword">this</span>.windowPosition.y);
}

build() {
    Row() {
        Column() {
            Text(<span class="hljs-keyword">this</span>.message)
                .fontSize(<span class="hljs-number">30</span>)
                .fontColor(Color.White)
                .fontWeight(FontWeight.Bold);
        }
        .width(<span class="hljs-string">'100%'</span>);
    }
    .borderRadius(<span class="hljs-number">500</span>)
    .height(<span class="hljs-string">'100%'</span>)
    .gesture(
        <span class="hljs-comment">// 绑定PanGesture事件，监听拖拽动作</span>
        PanGesture(<span class="hljs-keyword">this</span>.panOption)
            .onActionStart((event: GestureEvent) =&gt; {
                console.info(<span class="hljs-string">'Pan start'</span>);
            })
            <span class="hljs-comment">// 发生拖拽时，获取到触摸点的位置，并将位置信息传递给windowPosition</span>
            .onActionUpdate((event: GestureEvent) =&gt; {
                <span class="hljs-keyword">this</span>.windowPosition.x += event.offsetX;
                <span class="hljs-keyword">this</span>.windowPosition.y += event.offsetY;
            })
            .onActionEnd(() =&gt; {
                console.info(<span class="hljs-string">'Pan end'</span>);
            })
    )
    .border({
        style: BorderStyle.Dotted
    })
    .backgroundColor(<span class="hljs-string">"#E8A49C"</span>);
}

}

```

HarmonyOS 鸿蒙Next按钮拖拽功能的实现方式主要依赖于ArkUI框架提供的拖拽API。以下是实现按钮拖拽功能的关键步骤：

  1. 设置draggable属性：

    • 为需要拖拽的按钮组件设置draggable属性为true，以启用拖拽功能。

  2. 实现onDragStart回调：

    • 在按钮的onDragStart回调中，设置拖拽开始时的行为，如记录拖拽组件的信息或更改其状态。

  3. 实现onDragEnd或onDrop回调：

    • 在拖拽结束或目标位置组件上实现onDragEnd或onDrop回调，以处理拖拽释放时的逻辑，如更新按钮位置或数据。

  4. 自定义拖拽背板图：

    • 通过dragPreview或相关API自定义拖拽过程中的预览图，以提高用户体验。

  5. 设置allowDrop：

    • 在目标位置组件上设置allowDrop属性，指定允许落入的数据类型，确保拖拽逻辑的正确性。

按照上述步骤，可以在HarmonyOS 鸿蒙Next中实现按钮的拖拽功能。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部