滑動面板

2024-01-22 17:55 更新

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

說明

該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標單獨標記該內(nèi)容的起始版本。

子組件

可以包含子組件。

說明

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

接口

Panel(show: boolean)

參數(shù)：

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

show

boolean

是

控制Panel顯示或隱藏。

說明：

如果設置為false時，則不占位隱藏。Visible.None或者show之間有一個生效時，都會生效不占位隱藏。

屬性

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

名稱

參數(shù)類型

描述

type

PanelType

設置可滑動面板的類型。

默認值：PanelType.Foldable

mode

PanelMode

設置可滑動面板的初始狀態(tài)。

Minibar類型默認值：PanelMode.Mini；其余類型默認值：PanelMode.Half

dragBar

boolean

設置是否存在dragbar，true表示存在，false表示不存在。

默認值：true

fullHeight

string | number

指定PanelMode.Full狀態(tài)下的高度。

默認值：當前組件主軸大小減去8vp空白區(qū)

說明：

不支持設置百分比。

halfHeight

string | number

指定PanelMode.Half狀態(tài)下的高度。

默認值：當前組件主軸大小的一半。

說明：

不支持設置百分比。

miniHeight

string | number

指定PanelMode.Mini狀態(tài)下的高度。

默認值：48

單位：vp

說明：

不支持設置百分比。

show

boolean

當滑動面板彈出時調(diào)用。

默認值：true

backgroundMask9+

ResourceColor

指定Panel的背景蒙層。

默認值：'#08182431'

PanelType枚舉說明

名稱

描述

Minibar

提供minibar和類全屏展示切換效果。

Foldable

內(nèi)容永久展示類，提供大（類全屏）、中（類半屏）、小三種尺寸展示切換效果。

Temporary

內(nèi)容臨時展示區(qū)，提供大（類全屏）、中（類半屏）兩種尺寸展示切換效果。

PanelMode枚舉說明

名稱

描述

Mini

類型為minibar和foldable時，為最小狀態(tài)；類型為temporary，則不生效。

Half

類型為foldable和temporary時，為類半屏狀態(tài)；類型為minibar，則不生效。

Full

類全屏狀態(tài)。

事件

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

名稱

功能描述

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ū)高度。因用戶體驗設計原因，panel最高只能滑到 fullHeight-8vp。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct PanelExample {
  5.   @State show: boolean = false
  6. 

  7.   build() {
  8.     Column() {
  9.       Text('2021-09-30    Today Calendar: 1.afternoon......Click for details')
  10.         .width('90%').height(50).borderRadius(10)
  11.         .backgroundColor(0xFFFFFF).padding({ left: 20 })
  12.         .onClick(() => {
  13.           this.show = !this.show
  14.         })
  15.       Panel(this.show) { // 展示日程
  16.         Column() {
  17.           Text('Today Calendar')
  18.           Divider()
  19.           Text('1. afternoon 4:00 The project meeting')
  20.         }
  21.       }
  22.       .type(PanelType.Foldable).mode(PanelMode.Half)
  23.       .dragBar(true) // 默認開啟
  24.       .halfHeight(500) // 默認一半
  25.       .onChange((width: number, height: number, mode: PanelMode) => {
  26.         console.info(`width:${width},height:${height},mode:${mode}`)
  27.       })
  28.     }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
  29.   }
  30. }

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號