HarmonyOS list折叠展开代码如下,想要点击的时候list可以展开,也可以折叠带动画
@Observed
export class CourseWeek {
weekName?: string
open?: boolean
chapters?: ObservedArray<Chapter>
}
@Observed
export class Chapter {
preface?: string
title?: string
subTitle?: string
videoList?: ObservedArray<SpecialItemNode>
}
@Observed
export class SpecialItemNode {
videoId?: string
name?: string
coverUrl?: string
tipMessage?: string
canView?: string
contentUrl?: string
}
build() {
Column() {
Row() {
Text(this.item.weekName ?? '')
.fontSize(17)
.fontColor(!this.item.open ? '#333333' : Color.White)
.fontWeight(FontWeight.Medium)
Blank()
Image(this.item.open ? $r('app.media.special_collapse_icon') : $r('app.media.special_expand_icon'))
.width(16)
.height(16)
}
.width('100%')
.height(64)
.borderRadius(6)
.padding({ left: 17, right: 18 })
.linearGradient({
direction: GradientDirection.Right,
colors: [[!this.item.open ? Color.White : '#6F749F', 0.0], [!this.item.open ? Color.White : '#3B4066', 1]]
})
.onClick(() => {
this.item.open = !this.item.open
})
if (this.item.open) {
List({
space: 3,
}) {
ForEach(this.item.chapters, (item: Chapter, index: number) => {
ListItem() {
Column() {
Row() {
Text(item.preface ?? '')
.fontSize(13)
.fontColor('#333333')
.fontWeight(FontWeight.Medium)
.margin({ top: 8 })
}
}
}
})
}
}
}
.backgroundColor(Color.White)
.alignItems(HorizontalAlign.Start)
.borderRadius(6)
.width('100%')
.shadow({ radius: 10, color: '#4F424668' })
}
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS 如何监听折叠屏展开折叠
1201浏览 • 1回复 待解决
HarmonyOS 导航栏展开折叠是否支持动画
1079浏览 • 1回复 待解决
HarmonyOS 列表分组可折叠和展开
1385浏览 • 1回复 待解决
如何实现list的折叠动画效果
1747浏览 • 1回复 待解决
HarmonyOS 折叠屏手机如何判断当前是展开还是折叠状态
1360浏览 • 1回复 待解决
HarmonyOS 如何监听折叠/展开状态
1049浏览 • 1回复 待解决
HarmonyOS 手机怎么通过命令模拟折叠展开操作?
988浏览 • 1回复 待解决
HarmonyOS 折叠手机,在折叠态,怎么获取展开态设备长宽,有什么接口
951浏览 • 1回复 待解决
Harmony OS怎么识别手机的折叠和展开状态
794浏览 • 1回复 已解决
HarmonyOS 折叠屏如何在展开状态下获取折叠时的屏幕宽高信息
1108浏览 • 1回复 待解决
HarmonyOS 如何实现可折叠的list?
770浏览 • 1回复 待解决
HarmonyOS 如何监听折叠屏改变状态,例如折起或者展开
1840浏览 • 1回复 待解决
HarmonyOS 折叠屏展开态,商城页面左右边界空白过大
1491浏览 • 1回复 待解决
HarmonyOS 折叠屏展开和收起状态视频宽高未更新
1483浏览 • 2回复 待解决
HarmonyOS CameraKit 折叠屏展开后获取的前置摄像头错误
1736浏览 • 1回复 待解决
HarmonyOS 实现类似ExpandList,可折叠打开的list组件
1233浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙开发中如何实现列表的折叠和展开功能?
1888浏览 • 1回复 待解决
HarmonyOS 折叠屏展开的分屏状态下app怎么正确获取“屏幕”宽度?
1066浏览 • 1回复 待解决
HarmonyOS 折叠屏展开与关闭状态如何监听与屏幕宽度变化动态计算?
1555浏览 • 1回复 待解决
HarmonyOS 如何实现左侧竖列导航栏且可以item点击展开搜索效果
978浏览 • 1回复 待解决
app运行的时候有什么办法可以知道设备是折叠手机
1723浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在HarmonyOS的List中实现全屏展开的适配?
1051浏览 • 1回复 待解决
HarmonyOS 实现展开区域的徐徐展开特效
849浏览 • 1回复 待解决
web组件嵌套滚动在折叠屏展开后收起时其滚动位置会发生变化
1062浏览 • 1回复 待解决
span展开/收起,如何实现文本的展开收起的功能
1804浏览 • 1回复 待解决
请参考以下示例或者参考社区贴 :https://ost.51cto.com/posts/26004