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

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') 
    } 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.