HarmonyOS 鸿蒙Next 如何让listitem中某些item一直位于list最顶端

我写个demo给你，如果有不懂可以问我：

@Entry
@Component
struct Page38 {
  @State phone: string = ''
  private array: Array<TestMode> = [new TestMode(1, '标题1', false),
    new TestMode(2, '标题2', false), new TestMode(3, '测试3', true),
    new TestMode(4, '测试4', true), new TestMode(5, '标题5', false)]
  @State list: Array<TestMode> = new Array()

  /**
   * 目前高阶函数，基本上都在Array类型中，但是开发的可能返回的是ArrayList，为了我们可以使用高阶函数。我们可以转换Array
   */
  aboutToAppear() {
    this.list = moveElementsToStartOrEnd(this.array, true, (t) => t.check);
  }

  build() {
    Row() {
      Column() {
        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.list, (item: TestMode, index) => {
            ListItem() {
              Text(item.name)
                .fontColor(Color.Blue)
                .fontSize(30)
                .width('100%')
                .height(50)
                .onClick(() => {
                  moveToLast(this.list, this.list[index])
                })
            }
          }, (item: TestMode) => JSON.stringify(item))
        }.scrollBar(BarState.Auto).height('100%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

/**
 * 根据条件排序，把需要的放在最前面的位置/或者最后面
 * @param arr
 * @param front：false：最后；true：最前面
 * @param condition
 * @returns
 */
function moveElementsToStartOrEnd<T>(arr: Array<T>, front: boolean, condition: (t: T) => boolean) {
  arr.sort((a, b) => {
    if (condition(a) && condition(b)) {
      // 如果两个元素都满足条件，保持原始顺序
      return 0;
    }
    if (condition(a) && !condition(b)) {
      // 满足条件的元素放在前面
      return front ? -1 : 1;
    }
    if (!condition(a) && condition(b)) {
      // 满足条件的元素放在前面
      return front ? 1 : -1;
    }
    // 不满足条件的元素保持原始顺序
    return 0;
  });
  return arr;
}

function moveToLast<T>(array: T[], element: T): void {
  const index = array.indexOf(element);
  if (index !== -1) {
    array.splice(index, 1); // 移除元素
    array.push(element); // 添加到数组末尾
  }
}

class TestMode {
  id: number
  name: string
  check: boolean

  constructor(id: number, name: string, check: boolean) {
    this.id = id
    this.name = name
    this.check = check
  }
}

更多关于HarmonyOS 鸿蒙Next 如何让listitem中某些item一直位于list最顶端的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 2楼•4 天前

moveElementsToStartOrEnd

这个方法就是你想要的需求：想把满足条件的元素要么放第一个位置，要么放最后一个位置。

moveToLast

这个就是你点击想要哪个排在最后一个位置。都可以。点击就更新。

wuwangju 3楼•4 天前

其中array就模拟你后端返回的数据。如果返回的是ArrayList：也没有关系，

h691938207 4楼•4 天前

解决了，

sinazl 5楼•4 天前作者

ListItemGroup有个吸顶和吸底的方法，可以判断让符合条件的item进入到header或者footer中

bupafengyu 6楼•4 天前

还有某些listitem属性改变之后，重新渲染的时候，想让这些item项默认跑到最底端，又该怎么实现，比如listitem点击之后，跑到listitem最底端，下面没被点过的顶上来，这个arkts可以做到吗

yibo5220 7楼•4 天前

listitem属性改变的时候把数组重新排列一下，数据驱动视图整个list更新一下，

yibo5220 8楼•4 天前

在HarmonyOS鸿蒙Next中，若要让ListItem中的某些项一直位于List的最顶端，可以使用ListContainer的setStickyHeader方法。该方法允许将特定的ListItem设置为粘性头部，使其在滚动时始终保持在列表的顶部。

具体实现步骤如下：

创建ListContainer：首先，创建一个ListContainer组件，并设置其布局和适配器。
设置粘性头部：在适配器中，为需要固定在顶部的ListItem设置setStickyHeader(true)。这样，当用户滚动列表时，这些项将始终保持在列表的顶部。
处理数据源：确保数据源中的相关项在逻辑上被标记为需要固定在顶部的项。这可以通过在数据模型中添加一个标志位来实现。
更新适配器：在适配器的getView方法中，根据标志位判断是否需要将当前项设置为粘性头部。

示例代码如下：

// 假设ListContainer和适配器已经创建
listContainer.setStickyHeader(true);

// 在适配器中
class MyAdapter extends ListContainer.ListAdapter {
    getView(position: number, convertView: View, parent: ViewGroup): View {
        let itemView = convertView;
        if (itemView == null) {
            itemView = // 初始化itemView
        }

        // 根据数据源中的标志位判断是否需要设置为粘性头部
        if (dataSource[position].isSticky) {
            itemView.setStickyHeader(true);
        } else {
            itemView.setStickyHeader(false);
        }

        // 其他逻辑
        return itemView;
    }
}

通过以上步骤，可以实现ListItem中的某些项在List中始终位于最顶端的效果。

phonegap100 9楼•4 天前

在HarmonyOS鸿蒙Next中，若要让某些`ListItem`始终位于`List`的顶端，可以通过以下步骤实现：

数据排序：在数据源中，将需要置顶的`ListItem`数据放在数组的最前面。
自定义布局：使用`ListContainer`或`RecyclerView`时，重写`onBindViewHolder`方法，确保置顶项始终渲染在顶部。
固定布局：使用`StickyHeaderLayout`或`StickyListHeaders`等组件，将特定项固定在列表顶部。

通过这些方法，可以确保某些`ListItem`始终位于列表的最顶端。