HarmonyOS 鸿蒙Next list 列表下的 text 文字展开与收齐 怎么实现啊 要么不动 要么全都动

发布于 1周前 作者 gougou168 来自 鸿蒙OS

HarmonyOS 鸿蒙Next list 列表下的 text 文字展开与收齐 怎么实现啊 要么不动 要么全都动

private toggleCommentExpand = (commentId: string) => {
  const index = this.CommentsList.findIndex(item => item.id === commentId);

  console.log(`homev-novel：${JSON.stringify(commentId)}`)
  console.log(`homev-novel：${JSON.stringify(index)}`)

  if (index !== -1) {
    console.log(`homev-novel !=-1：${JSON.stringify(index)}`)
    this.CommentsList[index].isExpanded = !this.CommentsList[index].isExpanded;
  }
};

// 评论列表
Column() {
  List({ space: 10 }) {
    ForEach(this.CommentsList, (item: Comments) => {
      ListItem() {
        Column() {

 Text(item.isExpanded ? '收起' : '展开')
  .fontSize(15)
  .fontColor(Color.Blue)
  .onClick(() => {
    this.toggleCommentExpand(item.id)
  })

// 内容
Text(convertBRtoNewline(item.content))
  .fontSize(15)
  .fontColor(Color.Gray)
  .maxLines(item.isExpanded ? -1 : 3)
  .width('93%')

}, (item: Comments) => item.id)

更多关于HarmonyOS 鸿蒙Next list 列表下的 text 文字展开与收齐 怎么实现啊 要么不动 要么全都动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
3 回复

可以参考代码：

@Entry
@Component
struct ListCollapseExpand {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6];
  @State isContentShow: boolean = true;
  @State selectItem: number = 0;
  build() {
    Column() {
      List({ initialIndex: 0 }) {
        ForEach(this.arr, (item: number, index: number) => {
          ListItem() {
            Column() {
              Row() {
                Text(item.toString())
                Button(this.isContentShow && this.selectItem === item ? '收起' : '展开')
                  .onClick(() => {
                    animateTo({
                      duration: 300,
                      onFinish: () => {
                        console.info('animation end');
                      }
                    }, () => {
                      this.isContentShow = !this.isContentShow;
                      this.selectItem = item;
                    })
                  })
              }
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
              if (this.isContentShow && this.selectItem === item) {
                Text('这是内容区域')
                  .backgroundColor(Color.Gray)
                  .width('100%')
                  .height(100)
              }
            }
            .backgroundColor(0xFFFFFF)
            .width('100%')
            .padding({
              top: 12,
              bottom: 12
            })
            .margin({ top: 10 })
          }
        }, (item: string) => item.toString())
      }
      .scrollBar(BarState.Off)
      .height('100%')
      .width('100%')
    }
    .backgroundColor(0xF1F3F5)
    .padding(12)
  }
}

如果想要每个item单独的展开收起，可以自己再定义下数组分别记住就好了

更多关于HarmonyOS 鸿蒙Next list 列表下的 text 文字展开与收齐 怎么实现啊 要么不动 要么全都动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


项目名称

  • 状态：已完成
  • 开始时间：2023-01-01
  • 结束时间：2023-06-01
  • 描述：这是一个示例项目，用于演示如何将HTML内容转换为Markdown格式。

示例图片

在HarmonyOS（鸿蒙）系统中，实现Next list 列表下的 text 文字展开与收齐功能，通常涉及到列表项的布局管理和状态管理。以下是一个简要的实现思路：

  1. 布局管理：确保你的列表项布局能够支持文本的展开与收齐。这通常意味着你需要一个可以动态调整高度的容器来包裹文本内容。

  2. 状态管理：为每个列表项维护一个状态，表示文本是展开还是收齐。这个状态可以在用户点击列表项时切换。

  3. 动画效果（可选）：为了实现平滑的展开与收齐效果，你可以使用动画来过渡文本高度的变化。

  4. 逻辑实现：

    • 在列表项被点击时，切换其状态（展开/收齐）。
    • 根据当前状态，调整文本容器的高度，并更新文本显示（如果收齐则显示摘要，如果展开则显示全文）。

  5. 注意：确保在文本内容变化时，列表项能够正确重绘，以避免显示异常。

如果以上思路仍然无法帮助你解决问题，可能是因为具体的实现细节有所差异。此时，你可以查阅HarmonyOS的官方文档或示例代码，以获取更具体的实现方法。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部