Navigation拉起浮窗,怎样使用Navigation拉起一个Panel实现的浮窗效果

Navigation拉起浮窗

HarmonyOS
2024-05-26 11:44:24
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
richard_li_li

本文主要讲述的是使用Navigation拉起一个Panel实现的浮窗效果,在我们现实生活中经常会有这种情况:点击一个按钮,然后拉起屏幕百分之八十高的浮窗,缩小后会形成一个新的悬浮按钮,点击该悬浮按钮依旧可以拉起浮窗,且浮窗内容不改变。

使用的核心API

核心代码解释

1. 通过使用navigation组件绘制当前页面,在当前页面添加一个按钮,可通过点击按钮配合router使用,进行页面的拉起和跳转。

2. 拉起的panel页中,可直接使用show接口并定义为false,表示panel页面不可见,在onPageShow生命周期中对show进行取反,表示panel页面可显示,因为通过一个按钮拉起panel页,那么panel页就该展示出来而不是隐藏,所以在页面刚加载时就应该直接展示。

3. 对于panel页可以进行mode的改变,在onchange函数中对mode进行改变,当mode=0时,即表示panel浮窗的高度为0,此时应将show变为false,并通过router将页面跳转回原页面。

import router from '@ohos.router' 
 
@Entry 
@Component 
struct PanelExample { 
  @State show: boolean = false 
  onPageShow() { 
    this.show = !this.show 
  } 
 
  build() { 
    Column() { 
 
      Panel(this.show) { // 展示日程 
        Column() { 
          Text('Today Calendar') 
          Divider() 
          Text('1. afternoon 4:00 The project meeting') 
        } 
      } 
      .type(PanelType.Foldable) 
      .mode(PanelMode.Half) 
      .dragBar(true) // 默认开启 
      .halfHeight(700) // 默认一半 
      // .showCloseIcon(true) // 显示关闭图标 
      .onChange((width: number, height: number, mode: PanelMode) => { 
        console.info(`width:${width},height:${height},mode:${mode}`) 
        if (mode == 0) { 
          this.show = !this.show 
          router.back() 
        } 
      }) 
 
      if (this.show == false) { 
        Blank().color(Color.Black).width(20).height(20) 
          .onClick(() => { 
            this.show = !this.show 
          }) 
      } 
 
 
    }.width('100%') 
    .height('100%') 
    .backgroundColor('#cccccccc') 
    .padding({ top: 5 }) 
  } 
}
import router from '@ohos.router' 
 
@Entry 
@Component 
struct NavigationExample { 
  @State currentIndex: number = 0 
 
  build() { 
    Column() { 
      Navigation() { 
        TextInput({ placeholder: 'search...' }) 
          .width('90%') 
          .height(40) 
          .backgroundColor('#FFFFFF') 
          .margin({ top: 8 }) 
 
        List() { 
          ListItem() { 
            Button() { 
              Text('CLick me') 
                .textAlign(TextAlign.Center) 
                .fontSize(16) 
                .fontWeight(500) 
            } 
            .width(100) 
            .height(72) 
            .backgroundColor('#FFFFFF') 
            .borderRadius(24) 
            .onClick(() => { 
              router.pushUrl({ url: 'pages/Index' }) 
            }) 
 
          } 
          .height(324) 
          .width('100%') 
          .margin({ top: 12, left: '10%' }) 
        } 
      }.width('100%').height('100%').backgroundColor('#F1F3F5') 
    } 
  } 
}

适配的版本信息

IDE:DevEco    Studio 4.0.3.600

SDK:HarmoneyOS    4.0.10.11

分享
微博
QQ
微信
回复
2024-05-27 11:57:21
相关问题
如何实现全局效果
1737浏览 • 1回复 待解决
HarmonyOS 应用内点击事件相关
38浏览 • 1回复 待解决
二级出场动画实现
804浏览 • 1回复 待解决
Navigation实现Tabs切换效果
1250浏览 • 1回复 待解决
entry中如何拉起一个Module中Ability
4229浏览 • 1回复 待解决
相机拍照界面应该怎样拉起
511浏览 • 1回复 待解决
浏览器应用应该怎样拉起
470浏览 • 2回复 待解决
HarmonyOS 如何实现一个转圈效果
799浏览 • 2回复 待解决
如何实现悬浮桌面穿透
837浏览 • 1回复 待解决
编写一个页面,实现吸顶效果
1165浏览 • 1回复 待解决