回复
HarmonyOS API：容器组件
joytrian
发布于 2023-3-24 16:54
浏览
0收藏
版本：v3.1 Beta
Panel
更新时间: 2023-02-17 09:19
可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。
说明
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
可以包含子组件。
接口
Panel(show: boolean)
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
show | boolean | 是 | 控制Panel显示或隐藏。 |
属性
名称 | 参数类型 | 描述 |
type | PanelType | 设置可滑动面板的类型。 默认值：PanelType.Foldable |
mode | PanelMode | 设置可滑动面板的初始状态。 |
dragBar | boolean | 设置是否存在dragbar，true表示存在，false表示不存在。 默认值：true |
fullHeight | string | number | 指定PanelMode.Full状态下的高度。 |
halfHeight | string | number | 指定PanelMode.Half状态下的高度，默认为屏幕尺寸的一半。 |
miniHeight | string | number | 指定PanelMode.Mini状态下的高度。 |
show | boolean | 当滑动面板弹出时调用。 |
backgroundMask9+ | 指定Panel的背景蒙层。 |
PanelType枚举说明
名称 | 描述 |
Minibar | 提供minibar和类全屏展示切换效果。 |
Foldable | 内容永久展示类，提供大（类全屏）、中（类半屏）、小三种尺寸展示切换效果。 |
Temporary | 内容临时展示区，提供大（类全屏）、中（类半屏）两种尺寸展示切换效果。 |
PanelMode枚举说明
名称 | 描述 |
Mini | 类型为minibar和foldable时，为最小状态；类型为temporary，则不生效。 |
Half | 类型为foldable和temporary时，为类半屏状态；类型为minibar，则不生效。 |
Full | 类全屏状态。 |
事件
名称 | 功能描述 |
onChange(event: (width: number, height: number, mode: PanelMode) => void) | 当可滑动面板发生状态变化时触发， 返回的height值为内容区高度值，当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。 |
onHeightChange(callback: (value: number) => void)9+ | 当可滑动面板发生高度变化时触发，返回的height值为内容区高度值，默认返回值单位为px。当dragbar属性为true时，panel本身的高度值为dragbar高度加上内容区高度。因用户体验设计原因，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().color(Color.Black)
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 })
}
}
Refresh
更新时间: 2023-02-17 09:19
可以进行页面下拉操作并显示刷新动效的容器组件。
说明
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
支持单个子组件。
接口
Refresh(value: { refreshing: boolean, offset?: number | string , friction?: number | string })
参数：
参数 | 参数名 | 必填 | 参数描述 |
refreshing | boolean | 是 | 当前组件是否正在刷新。 该参数支持$$双向绑定变量。 |
offset | string | number | 否 | 刷新组件静止时距离父组件顶部的距离。 默认值：16，单位vp |
friction | number | string | 否 | 下拉摩擦系数，取值范围为0到100。 默认值：62 - 0表示下拉刷新容器不跟随手势下拉而下拉。 - 100表示下拉刷新容器紧紧跟随手势下拉而下拉。 - 数值越大，下拉刷新容器跟随手势下拉的反应越灵敏。 |
事件
名称 | 描述 |
onStateChange(callback: (state: RefreshStatus) => void) | 当前刷新状态变更时，触发回调。 - state：刷新状态。 |
onRefreshing(callback: () => void) | 进入刷新状态时触发回调。 |
RefreshStatus枚举说明
名称 | 描述 |
Inactive | 默认未下拉状态。 |
Drag | 下拉中，下拉距离小于刷新距离。 |
OverDrag | 下拉中，下拉距离超过刷新距离。 |
Refresh | 下拉结束，回弹至刷新距离，进入刷新状态。 |
Done | 刷新结束，返回初始状态（顶部）。 |
示例
// xxx.ets
@Entry
@Component
struct RefreshExample {
@State isRefreshing: boolean = false
@State counter: number = 0
build() {
Column() {
Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
Text('Pull Down and refresh: ' + this.counter)
.fontSize(30)
.margin(10)
}
.onStateChange((refreshStatus: RefreshStatus) => {
console.info('Refresh onStatueChange state is ' + refreshStatus)
})
.onRefreshing(() => {
setTimeout(() => {
this.counter++
this.isRefreshing = false
}, 1000)
console.log('onRefreshing test')
})
}
}
}
RelativeContainer
更新时间: 2023-02-17 09:19
相对布局组件，用于复杂场景中元素对齐的布局。
说明
该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
规则说明
- 容器内子组件区分水平方向，垂直方向：
- 水平方向为left， middle， right，对应容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。
- 垂直方向为top， center， bottom，对应容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。
- 子组件可以将容器或者其他子组件设为锚点：
- 参与相对布局的容器内组件必须设置id，不设置id的组件不显示，容器id固定为__container__。
- 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个。
- 前端页面设置的子组件尺寸大小不会受到相对布局规则的影响。子组件某个方向上设置两个或以上alignRules时不建议设置此方向尺寸大小。
- 对齐后需要额外偏移可设置offset。
- 特殊情况
- 互相依赖，环形依赖时容器内子组件全部不绘制。
- 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。
子组件
支持多个子组件。
接口
RelativeContainer()
示例
@Entry
@Component
struct Index {
build() {
Row() {
RelativeContainer() {
Row().width(100).height(100)
.backgroundColor("#FF3333")
.alignRules({
top: {anchor: "__container__", align: VerticalAlign.Top},
left: {anchor: "__container__", align: HorizontalAlign.Start}
})
.id("row1")
Row().width(100).height(100)
.backgroundColor("#FFCC00")
.alignRules({
top: {anchor: "__container__", align: VerticalAlign.Top},
right: {anchor: "__container__", align: HorizontalAlign.End}
})
.id("row2")
Row().height(100)
.backgroundColor("#FF6633")
.alignRules({
top: {anchor: "row1", align: VerticalAlign.Bottom},
left: {anchor: "row1", align: HorizontalAlign.End},
right: {anchor: "row2", align: HorizontalAlign.Start}
})
.id("row3")
Row()
.backgroundColor("#FF9966")
.alignRules({
top: {anchor: "row3", align: VerticalAlign.Bottom},
bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
left: {anchor: "__container__", align: HorizontalAlign.Start},
right: {anchor: "row1", align: HorizontalAlign.End}
})
.id("row4")
Row()
.backgroundColor("#FF66FF")
.alignRules({
top: {anchor: "row3", align: VerticalAlign.Bottom},
bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
left: {anchor: "row2", align: HorizontalAlign.Start},
right: {anchor: "__container__", align: HorizontalAlign.End}
})
.id("row5")
}
.width(300).height(300)
.margin({left: 100})
.border({width:2, color: "#6699FF"})
}
.height('100%')
}
}
赞
收藏
回复
相关推荐
