HarmonyOS 鸿蒙Next List的多选问题

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

HarmonyOS 鸿蒙Next List的多选问题 我们有个页面(见附件), 长按item, 出现一系列操作按钮, 其中一个是多选, 点击多选后, 各个item都会在左侧有个选中按钮, 请问:

  1. 长按出现多个操作按钮的item有封装好的吗?
  2. 点击多选后, 每个item左侧都出现一个选择按钮,怎么实现?
2 回复

参考使用checkbox。

文档链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-list-V5#删除列表项

List组件目前没有自带的编辑模式,主要用于展示数据,而不支持编辑、框选、拖拽等功能。

没有组件能直接实现这种效果,可以使用长按手势事件+List+checkbox实现。

长按手势参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-gesture-events-single-gesture-V5#长按手势longpressgesture

没有组件能直接实现。这边提供实现方案如下:

转发:使用share,参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/share-introduction-V5

删除:文档链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-create-list-V5#删除列表项

多选:List+checkbox实现

可以参考: https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-popup.md#bindpopup

给item绑定Popup弹窗。你这个要使用 CustomPopupOptions,CustomPopupOptions可以自定义builder,可参考上面文档的示例1的第二个按钮

文档上有说的,简单做了个你说的这个测试demo,参考如下:

// xxx.ets

@Entry
@Component
struct PopupExample {

  @State handlePopup: boolean = false
  @State customPopup: boolean = false

  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row({ space: 2 }) {
      Button("拷贝")
      Button("转发")
      Button("引用")
      Button("删除")
      Button("多选")
    }.width('100%').height(50).padding(5)
  }

  build() {
    Flex({ direction: FlexDirection.Column }) {

      // CustomPopupOptions 类型设置弹框内容
      Button('CustomPopupOptions')
        .onClick(() => {
          this.customPopup = !this.customPopup
        })
        .bindPopup(this.customPopup, {
          builder: this.popupBuilder,
          placement: Placement.Top,
          mask: { color:'#33000000' },
          popupColor: Color.Yellow,
          enableArrow: true,
          showInSubWindow: false,
          onStateChange: (e) => {
            if (!e.isVisible) {
              this.customPopup = false
            }
          }
        })
        .position({ x: 80, y: 300 })
    }.width('100%').padding({ top: 5 })
  }
}

更多关于HarmonyOS 鸿蒙Next List的多选问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对帖子标题“HarmonyOS 鸿蒙Next List的多选问题”,以下是关于HarmonyOS(鸿蒙)系统中Next List组件多选功能的简要说明:

在HarmonyOS中,Next List组件通常用于展示一系列可选项,并支持用户进行多选操作。实现多选功能时,开发者需要注意以下几点:

  1. 数据绑定:确保Next List组件与数据源正确绑定,数据源中应包含每个选项的选中状态。

  2. 选择逻辑:在用户选择或取消选择某个选项时,需要更新数据源中对应选项的选中状态,并刷新列表显示。

  3. UI反馈:为用户提供清晰的视觉反馈,如选中项高亮显示或显示复选框等。

  4. 事件处理:为Next List组件添加事件监听器,以处理用户的选择操作,并根据需要执行相应的逻辑。

  5. 性能优化:在处理大量数据时,注意性能优化,避免列表滚动卡顿等问题。

需要注意的是,具体的实现细节可能因项目需求和HarmonyOS版本而有所不同。开发者在参考上述说明时,应结合实际情况进行调整。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部