آموزش بعدی Harmonyos: پنجره شناور جهانی

امروز من پنجره شناور را در توسعه Harmonyos با شما به اشتراک می گذارم.
برای ویندوز شناور ، برخی از دانش آموزان ممکن است در مورد اینکه آیا می توان از یک طرح آبشار استفاده کرد ، فکر کنند و ویندوز شناور را در برگه های مؤلفه نوار ناوبری مانند این جمع کنید:
Stack({alignContent:Alignment.BottomEnd}){
Tabs({barPosition:BarPosition.End}){
TabContent(){
Text('page1')
.fontColor(Color.Black)
.fontSize(40)
}
.tabBar(this.Tabbar())
TabContent(){
Page2()
}
.tabBar(this.Tabbar())
}
Row(){
//这是悬浮窗
}
.width(60)
.height(60)
.borderRadius(30)
.backgroundColor(Color.Blue)
}
چنین چیدمان هنگام فشار به صفحه بعد از بین می رود ، بنابراین کار نمی کند.
یک روش منحصر به فرد برای ایجاد یک سیستم پنجره شناور Hongmeng وجود دارد که استفاده از آن برای ایجاد یک زیر زمینی است که در بالای کل برنامه به حالت تعلیق در می آید. کد اجرای خاص به شرح زیر است:
windowStage.createSubWindow('floatWindow',(err: BusinessError, data) =>})
پس از اتمام ایجاد ، می توانید اندازه ، موقعیت و محتوای پنجره شناور را تنظیم کنید. توجه داشته باشید که واحد در اینجا PX است و فقط انواع عدد صحیح مثبت قابل عبور است:
//尺寸
data.resize(300,300,(err: BusinessError) =>})
//位置
data.moveWindowTo(400,400,(err: BusinessError) =>})
//展示
data.showWindow((err: BusinessError) =>});
بعضی اوقات ممکن است نیاز به تنظیم پنجره شناور داشته باشید تا یک دایره باشد. روش این است که ابتدا به صفحه محتوای مربوطه بروید تا گوشه های گرد را تنظیم کنید و دریابید که هنوز یک پس زمینه سفید وجود خواهد داشت ، و سپس رنگ پس زمینه پنجره را به صورت شفاف تنظیم کنید. این روش به بهترین وجه در پاسخ به تماس SetUicontent تنظیم شده است:
data?.setWindowBackgroundColor('#00000000');
هنگامی که شما نیاز به بستن پنجره شناور دارید ، می توانید برای از بین بردن روش DestroyWindow تماس بگیرید:
window.findWindow(FloatUntil.windowName).destroyWindow()
موارد فوق روشهای متداول استفاده از ویندوز شناور است. به خاطر سهولت استفاده ، من به سادگی روش فوق را محصور کرده ام و می توانم نمایشگر ، حرکت ، بسته شدن و سایر عملیات ویندوزهای شناور را در یک خط کد تحقق بخشید:
import EntryAbility from "../entryability/EntryAbility";
import { BusinessError } from "@kit.BasicServicesKit";
import { display, window } from "@kit.ArkUI";
export class FloatUntil{
static screen_width = display.getDefaultDisplaySync().width
static screen_height = display.getDefaultDisplaySync().height
static float_size = 420
static float_positon_x = FloatUntil.screen_width - FloatUntil.float_size - 40
static float_positon_y = FloatUntil.screen_height - FloatUntil.float_size - 440
static windowName="floatWindow"
static creatAndShowSubWindow(){
EntryAbility.gloabalWindowStage.createSubWindow(FloatUntil.windowName, (err: BusinessError, data) => {
let errCode: number = err.code;
if (errCode) {
return;
}
//位置、尺寸单位是px,只支持正整数
data.moveWindowTo(FloatUntil.float_positon_x, FloatUntil.float_positon_y, (err: BusinessError) => {
let errCode: number = err.code;
if (errCode) {
return;
}
console.info('Succeeded in moving the window.');
});
data.resize(FloatUntil.float_size, FloatUntil.float_size, (err: BusinessError) => {
let errCode: number = err.code;
if (errCode) {
return;
}
});
//悬浮窗是否可触
data.setWindowTouchable(true);
data.setUIContent("pages/FloatWindow", (err: BusinessError) => {
let errCode: number = err.code;
if (errCode) {
console.error('Failed to load the content. Cause:' + JSON.stringify(err));
return;
}
console.info('Succeeded in loading the content.');
//设置窗口背景色透明,只有在这调用才不会报错
data?.setWindowBackgroundColor('#00000000');
data.showWindow((err: BusinessError) => {
let errCode: number = err.code;
if (errCode) {
console.error('Failed to show the window. Cause: ' + JSON.stringify(err));
return;
}
console.info('Succeeded in showing the window.');
});
});
})
}
static moveWindowTo(x:number,y:number){
window.findWindow(FloatUntil.windowName).moveWindowTo(x,y)
}
static destroyFloatWindow(){
window.findWindow(FloatUntil.windowName).destroyWindow()
}
}