鴻蒙ArkTS容器組件：Panel

Panel

可滑動(dòng)面板，提供一種輕量的內(nèi)容展示窗口，方便在不同尺寸中切換。

說(shuō)明：
開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

可以包含子組件。

說(shuō)明：
子組件類(lèi)型：系統(tǒng)組件和自定義組件，支持渲染控制類(lèi)型（[if/else]、[ForEach]和[LazyForEach]）。

接口

Panel(show: boolean)

參數(shù)：

參數(shù)名	參數(shù)類(lèi)型	必填	參數(shù)描述
show	boolean	是	控制Panel顯示或隱藏。說(shuō)明：如果設(shè)置為false時(shí)，則不占位隱藏。[Visible.None]或者show之間有一個(gè)生效時(shí)，都會(huì)生效不占位隱藏。

屬性

除支持[通用屬性]外，還支持以下屬性：

名稱(chēng)	參數(shù)類(lèi)型	描述
type	[PanelType]	設(shè)置可滑動(dòng)面板的類(lèi)型。默認(rèn)值：PanelType.Foldable
mode	[PanelMode]	設(shè)置可滑動(dòng)面板的初始狀態(tài)。 Minibar類(lèi)型默認(rèn)值：PanelMode.Mini；其余類(lèi)型默認(rèn)值：PanelMode.Half 從API version 10開(kāi)始，該屬性支持[$$]雙向綁定變量。
dragBar	boolean	設(shè)置是否存在dragbar，true表示存在，false表示不存在。默認(rèn)值：true
customHeight10+	[Dimension]	[PanelHeight]
fullHeight	string	number
halfHeight	string	number
miniHeight	string	number
show	boolean	當(dāng)滑動(dòng)面板彈出時(shí)調(diào)用。默認(rèn)值：true
backgroundMask9+	[ResourceColor]	指定Panel的背景蒙層。默認(rèn)值：'#08182431'

PanelType枚舉說(shuō)明

名稱(chēng)	描述
Minibar	提供minibar和類(lèi)全屏展示切換效果。
Foldable	內(nèi)容永久展示類(lèi)，提供大（類(lèi)全屏）、中（類(lèi)半屏）、小三種尺寸展示切換效果。
Temporary	內(nèi)容臨時(shí)展示區(qū)，提供大（類(lèi)全屏）、中（類(lèi)半屏）兩種尺寸展示切換效果。
CUSTOM10+	配置自適應(yīng)內(nèi)容高度，不支持尺寸切換效果。

PanelMode枚舉說(shuō)明

名稱(chēng)	描述
Mini	類(lèi)型為minibar和foldable時(shí)，為最小狀態(tài)；類(lèi)型為temporary，則不生效。
Half	類(lèi)型為foldable和temporary時(shí)，為類(lèi)半屏狀態(tài)；類(lèi)型為minibar，則不生效。
Full	類(lèi)全屏狀態(tài)。

PanelHeight10+枚舉說(shuō)明

名稱(chēng)	描述
WRAP_CONTENT	類(lèi)型為CUSTOM時(shí)，自適應(yīng)內(nèi)容高度。

事件

除支持[通用事件]外，還支持以下事件：

名稱(chēng)`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`	功能描述
onChange(event: (width: number, height: number, mode: PanelMode) => void)	當(dāng)可滑動(dòng)面板發(fā)生狀態(tài)變化時(shí)觸發(fā)，返回的height值為內(nèi)容區(qū)高度值，當(dāng)dragbar屬性為true時(shí)，panel本身的高度值為dragbar高度加上內(nèi)容區(qū)高度。
onHeightChange(callback: (value: number) => void)9+	當(dāng)可滑動(dòng)面板發(fā)生高度變化時(shí)觸發(fā)，返回的height值為內(nèi)容區(qū)高度值，默認(rèn)返回值單位為px。當(dāng)dragbar屬性為true時(shí)，panel本身的高度值為dragbar高度加上內(nèi)容區(qū)高度。因用戶(hù)體驗(yàn)設(shè)計(jì)原因，panel最高只能滑到 fullHeight-8vp。

示例

// xxx.ets
@Entry
@Component
struct PanelExample {
  @State show: boolean = false

  build() {
    Column() {
      Text('2021-09-30    Today Calendar: 1.afternoon......Click for details')
        .width('90%')
        .height(50)
        .borderRadius(10)
        .backgroundColor(0xFFFFFF)
        .padding({ left: 20 })
        .onClick(() = > {
          this.show = !this.show
        })
      Panel(this.show) { // 展示日程
        Column() {
          Text('Today Calendar')
          Divider()
          Text('1. afternoon 4:00 The project meeting')
        }
      }
      .type(PanelType.Foldable)
      .mode(PanelMode.Half)
      .dragBar(true) // 默認(rèn)開(kāi)啟
      .halfHeight(500) // 默認(rèn)一半
      .onChange((width: number, height: number, mode: PanelMode) = > {
        console.info(`width:${width},height:${height},mode:${mode}`)
      })
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  }
}

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀(guān)點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴