梅科尔工作室-袁博-鸿蒙笔记3

最新推荐文章于 2024-08-15 11:57:09 发布

†

最新推荐文章于 2024-08-15 11:57:09 发布

阅读量136

点赞数

文章标签： harmonyos 华为

本文链接：https://blog.csdn.net/qq_61177030/article/details/128902768

版权

这篇博客详细介绍了鸿蒙开发中的组件使用，包括list组件的编辑与删除功能、父子组件的双向数据绑定、条件渲染的if-else用法以及循环渲染的ForEach操作。通过示例代码展示了如何在实践中应用这些特性。

摘要由CSDN通过智能技术生成

使用if、else if、else条件语句：

1、list组件

由list容器组件和listitem容器组件构成，list是一个大容器，listitem是大容器里的小容器

使用说明

说明

List使能可编辑模式需配合onItemDelete事件和ListItem的editable属性，即可编辑模式实现删除列表项功能，需满足以下条件：

editMode属性设置为true。
绑定onItemDelete事件，且事件回调返回true。
ListItem的editable属性设置为true。

实现ListItem拖拽，需满足以下条件：

editMode属性设置为true。
绑定onDragStart事件，且事件回调中返回浮动UI布局。

示例

简单应用

高级装饰应用

@Entry
@Component
struct ListExample {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State editFlag: boolean = false

build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column() {
        List({ space: 20, initialIndex: 0 }) {
          ForEach(this.arr, (item) => {
            ListItem() {
              Text('' + item)
                .width('100%').height(100).fontSize(16)
                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
            }.editable(true)
          }, item => item)
        }
        .listDirection(Axis.Vertical) // 排列方向
        .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行