Panel

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

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

子組件

可以包含子組件。

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

接口

Panel(show: boolean)

參數(shù)：

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

屬性

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

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

PanelType枚舉說明

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

PanelMode枚舉說明

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

PanelHeight10+枚舉說明

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

事件

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

名稱`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`	功能描述
onChange(event: (width: number, height: number, mode: PanelMode) => void)	當可滑動面板發(fā)生狀態(tài)變化時觸發(fā)，返回的height值為內(nèi)容區(qū)高度值，當dragbar屬性為true時，panel本身的高度值為dragbar高度加上內(nèi)容區(qū)高度。
onHeightChange(callback: (value: number) => void)9+	當可滑動面板發(fā)生高度變化時觸發(fā)，返回的height值為內(nèi)容區(qū)高度值，默認返回值單位為px。當dragbar屬性為true時，panel本身的高度值為dragbar高度加上內(nèi)容區(qū)高度。因用戶體驗設(shè)計原因，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) // 默認開啟
      .halfHeight(500) // 默認一半
      .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)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。舉報投訴