华为仓颉鸿蒙HarmonyOS NEXT原生UI组件Panel(可滑动消失的底部弹出框)

可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。

说明

Panel暂不支持混合页面场景。

子组件

可以包含子组件。

构造函数

init(Bool, () -> Unit)

init(show: Bool, content: () -> Unit)

创建一个可滑动面板组件。

参数名	参数类型	必填	默认值	描述
show	Bool	是	-	控制Panel显示或隐藏。
content	() -> Unit	是	-	声明容器子组件。

函数

panelType(PanelType)

public func panelType(ty: PanelType): This

设置可滑动面板的类型。

参数名	参数类型	必填	默认值	描述
ty	PanelType	否	PanelType.Foldable	可滑动面板的类型。

mode(PanelMode)

public func mode(mode: PanelMode): This

设置可滑动面板的初始状态。

参数名	参数类型	必填	默认值	描述
mode	PanelMode	否	PanelMode.Half	可滑动面板的初始状态。

dragBar(Bool)

public func dragBar(hasDragBar: Bool): This

设置是否存在dragbar。

参数名	参数类型	必填	默认值	描述
hasDragBar	Bool	否	true	是否存在dragbar，true表示存在，false表示不存在。

fullHeight(Length)

public func fullHeight(value: Length): This

指定PanelMode.Full状态下的高度。

参数名	参数类型	必填	默认值	描述
value	Length	是	当前组件主轴大小减去8vp空白区	PanelMode.Full状态下的高度。说明：不支持设置百分比。

fullHeight(CJResource)

public func fullHeight(value: CJResource): This

指定PanelMode.Full状态下的高度。

参数名	参数类型	必填	默认值	描述
value	CJResource	是	当前组件主轴大小减去8vp空白区	PanelMode.Full状态下的高度。说明：不支持设置百分比。

fullHeight(Float64)

public func fullHeight(value: Float64): This

指定PanelMode.Full状态下的高度。

参数名	参数类型	必填	默认值	描述
value	Float64	是	当前组件主轴大小减去8vp空白区	PanelMode.Full状态下的高度。说明：不支持设置百分比。

fullHeight(Int64)

public func fullHeight(value: Int64): This

指定PanelMode.Full状态下的高度。

参数名	参数类型	必填	默认值	描述
value	Int64	是	当前组件主轴大小减去8vp空白区	PanelMode.Full状态下的高度。说明：不支持设置百分比。

halfHeight(Length)

public func halfHeight(value: Length): This

指定PanelMode.Half状态下的高度。

参数名	参数类型	必填	默认值	描述
value	Length	是	当前组件主轴大小的一半	PanelMode.Half状态下的高度。说明：不支持设置百分比。

halfHeight(CJResource)

public func halfHeight(value: CJResource): This

指定PanelMode.Half状态下的高度。

参数名	参数类型	必填	默认值	描述
value	CJResource	是	当前组件主轴大小的一半	PanelMode.Half状态下的高度。说明：不支持设置百分比。

halfHeight(Float64)

public func halfHeight(value: Float64): This

指定PanelMode.Half状态下的高度。

参数名	参数类型	必填	默认值	描述
value	Float64	是	当前组件主轴大小的一半	PanelMode.Half状态下的高度。说明：不支持设置百分比。

halfHeight(Int64)

public func halfHeight(value: Int64): This

指定PanelMode.Half状态下的高度。

参数名	参数类型	必填	默认值	描述
value	Int64	是	当前组件主轴大小的一半	PanelMode.Half状态下的高度。说明：不支持设置百分比。

miniHeight(Length)

public func miniHeight(value: Length): This

指定PanelMode.Mini状态下的高度。

参数名	参数类型	必填	默认值	描述
value	Length	是	48	PanelMode.Mini状态下的高度。单位：vp说明：不支持设置百分比。

miniHeight(CJResource)

public func miniHeight(value: CJResource): This

指定PanelMode.Mini状态下的高度。

参数名	参数类型	必填	默认值	描述
value	CJResource	是	48	PanelMode.Mini状态下的高度。单位：vp说明：不支持设置百分比。

miniHeight(Float64)

public func miniHeight(value: Float64): This

指定PanelMode.Mini状态下的高度。

参数名	参数类型	必填	默认值	描述
value	Float64	是	48	PanelMode.Mini状态下的高度。单位：vp说明：不支持设置百分比。

miniHeight(Int64)

public func miniHeight(value: Int64): This

指定PanelMode.Mini状态下的高度。

参数名	参数类型	必填	默认值	描述
value	Int64	是	48	PanelMode.Mini状态下的高度。单位：vp说明：不支持设置百分比。

show(Bool)

public func show(value: Bool): This

当滑动面板弹出时，是否显示面板。

参数名	参数类型	必填	默认值	描述
value	Bool	否	true	当滑动面板弹出时调用，是否显示面板。

backgroundMask(Color)

public func backgroundMask(value: Color): This

指定Panel的背景蒙层。

参数名	参数类型	必填	默认值	描述
value	Color	是	-	指定的背景蒙层。

backgroundMask(CJResource)

public func backgroundMask(value: CJResource): This

指定Panel的背景蒙层。

参数名	参数类型	必填	默认值	描述
value	CJResource	是	-	指定的背景蒙层。

backgroundMask(UInt32)

public func backgroundMask(value: UInt32): This

指定Panel的背景蒙层。

参数名	参数类型	必填	默认值	描述
value	UInt32	是	-	指定的背景蒙层。

枚举类型

PanelType

可滑动面板的类型。

枚举值	描述
Minibar	提供minibar和类全屏展示切换效果。PanelType为minibar时，PanelMode默认值是Mini。
Foldable	内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。
Temporary	内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。

PanelMode

可滑动面板的状态。

枚举值	描述
Mini	类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。
Half	类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。
Full	类全屏状态。

事件

onChange((Float64, Float64, PanelMode) -> Unit)

public func onChange(callback: (Float64, Float64, PanelMode) -> Unit): This

当可滑动面板发生状态变化时触发。

参数名	参数类型	描述
callback	(Float64, Float64, PandelMode) -> Unit	当可滑动面板发生状态变化时触发， 返回的height值为内容区高度值，当dragbar属性为true时， panel本身的高度值为dragbar高度加上内容区高度。

onHeightChange((Float64) -> Unit)

public func onHeightChange(callback: (Float64) -> Unit): This

当可滑动面板发生高度变化时触发。

参数名	参数类型	说明
callback	(Float64) -> Unit	当可滑动面板发生高度变化时触发，返回的height值为内容区高度值，默认返回值单位为px。 当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。因用户体验设计原因， panel最高只能滑到 fullHeight-78.px。

通用属性/通用事件

通用属性：除文本样式外，其余全部支持。

通用事件：全部支持。

示例代码

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    
    @Entry
    @Component
    class MyView {
        @State var width: Float64 = 0.0
        @State var height: Float64 = 0.0
        @State var height2: Float64 = 0.0
        @State var mode: Int32 = 0
        func build() {
            Column(10) {
                Panel(true) {
                    Text("${width}").fontSize(20)
                    Text("${height}").fontSize(20)
                    Text("${height2}").fontSize(20)
                    Text("${mode}").fontSize(20)
                }.fullHeight(600)
                .halfHeight(300)
                .miniHeight(100)
                .backgroundMask(Color.RED)
                .dragBar(true)
                .onChange({w, h, m =>
                    width = w
                    height = h
                    mode = m.getValue()
                })
                .onHeightChange({h =>
                    height2 = h
                })
            }
        }
    }