如何设置应用子窗口,并对其进行属性设置等操作

按需创建应用子窗口,如弹窗等,并对其进行属性设置等操作。


HarmonyOS
2024-05-26 14:02:28
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
e_lion

使用的核心API

窗口管理

核心代码解释

onWindowStageCreate(windowStage: window.WindowStage) { 
    // Main window is created, set main page for this ability 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 
  
    // 将自定义数据变量“data”存入AppStorage,api10 
    AppStorage.setOrCreate('data', 5); 
    AppStorage.setOrCreate('window', windowStage); 
  
    windowStage.loadContent('pages/Index', (err, data) => { 
      if (err.code) { 
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 
        return; 
      } 
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? ''); 
    }); 
  } 
import window from '@ohos.window'; 
import router from '@ohos.router'; 
  
@Entry 
@Component 
struct Page { 
  @State message: string = 'Hello World' 
  // 使用@StorageLink将"mainData"与AppStorage中的变量"data"进行双向绑定 
  @StorageLink('data') mainData: number = 1; 
  @StorageLink('window') StorageWindow:window.WindowStage | null = null 
  private windowStage_ = this.StorageWindow 
  sub_windowClass: window.Window | null = null; 
  
  build() { 
    Row() { 
      Column() { 
        Text('开启子窗口') 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .onClick(()=>{ 
            this.showSubWindow() 
          }) 
        Text('index里数据:'+this.mainData) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
        Text('关闭子窗口') 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .onClick(()=>{ 
            this.destroySubWindow() 
          }) 
        Button('页面跳转') 
          .onClick(()=>{ 
            router.pushUrl({ 
              url:'pages/Index3' 
            }) 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
  
  showSubWindow() { 
    // 1.创建应用子窗口。 
    if (this.windowStage_ == null) { 
      console.error('Failed to create the subwindow. Cause: windowStage_ is null'); 
    } 
    else { 
      this.windowStage_.createSubWindow("mySubWindow", (err, data) => { 
        let errCode: number = err.code; 
        if (errCode) { 
          console.error('Failed to create the subwindow. Cause: ' + JSON.stringify(err)); 
          return; 
        } 
        this.sub_windowClass = data; 
        console.info('Succeeded in creating the subwindow. Data: ' + JSON.stringify(data)); 
        // 2.子窗口创建成功后,设置子窗口的位置、大小及相关属性等。 
        this.sub_windowClass.moveWindowTo(300, 300, (err) => { 
          let errCode: number = err.code; 
          if (errCode) { 
            console.error('Failed to move the window. Cause:' + JSON.stringify(err)); 
            return; 
          } 
          console.info('Succeeded in moving the window.'); 
        }); 
        this.sub_windowClass.resize(500, 500, (err) => { 
          let errCode: number = err.code; 
          if (errCode) { 
            console.error('Failed to change the window size. Cause:' + JSON.stringify(err)); 
            return; 
          } 
          console.info('Succeeded in changing the window size.'); 
        }); 
        // 3.为子窗口加载对应的目标页面。 
        this.sub_windowClass.setUIContent("pages/Index2", (err) => { 
          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.'); 
          // 3.显示子窗口。 
          (this.sub_windowClass as window.Window).showWindow((err) => { 
            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.'); 
          }); 
        }); 
      }) 
    } 
  } 
  
  destroySubWindow() { 
    // 4.销毁子窗口。当不再需要子窗口时,可根据具体实现逻辑,使用destroy对其进行销毁。 
    (this.sub_windowClass as window.Window).destroyWindow((err) => { 
      let errCode: number = err.code; 
      if (errCode) { 
        console.error('Failed to destroy the window. Cause: ' + JSON.stringify(err)); 
        return; 
      } 
      console.info('Succeeded in destroying the window.'); 
    }); 
  } 
} 
@Entry 
@Component 
struct Index2 { 
  @StorageLink('data') mainData: number = 1; 
  
  build() { 
    Row() { 
      Column() { 
        Text('index2里数据:'+this.mainData) 
          .fontSize(20) 
          .fontWeight(FontWeight.Bold) 
        Button('修改') 
          .onClick(()=>{ 
            this.mainData++ 
          }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}

实现效果

适配的版本信息

IDE:DevEco Studio 4.0.3.600

SDK:HarmoneyOS 4.0.10.11


分享
微博
QQ
微信
回复
2024-05-27 16:55:41
相关问题
设置窗口透明度未生效
519浏览 • 1回复 待解决
基于PhotoViewPicker图片进行操作
153浏览 • 1回复 待解决
如何设置窗口启动图片
747浏览 • 1回复 待解决
SideBarContainer如何设置controlButton属性
693浏览 • 1回复 待解决
如何固定应用窗口大小居中展示
676浏览 • 1回复 待解决
基于CameraKit相机进行操作
172浏览 • 1回复 待解决
如何设置窗口的背景色
546浏览 • 1回复 待解决
如何动态设置组件属性的值
314浏览 • 1回复 待解决
Button控件设置点击效果
279浏览 • 1回复 待解决
Web组件domStorageAccess属性设置
920浏览 • 1回复 待解决
如何设置具有多个键值的cookie
415浏览 • 1回复 待解决
如何设置父组件随组件宽度变化
539浏览 • 1回复 待解决
隐私模式设置窗口如何展示的
660浏览 • 1回复 待解决
多个Cookie如何进行批量设置
655浏览 • 1回复 待解决