HarmonyOS 鸿蒙Next半模态框

HarmonyOS 鸿蒙Next半模态框 层级List

  • ForEach([], (item: number, index: number) => {
  • ListItem() {
  • // 组件

  • // 给组件绑定一个半模态框
  • }
  • }

问题: 这个模态框在被触发时，多次弹出

3 回复

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5#%E5%AF%B9%E8%B1%A1%E6%95%B0%E7%BB%84

Demo如下：

@Component
struct ViewA {
  @State sheetHeight: number = 300;
  @ObjectLink a: ClassA;
  label: string = 'ViewA1';

  @Builder
  myBuilder() {
    Column() {
      Text('' + this.a.c)
      Button('change height')
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          this.sheetHeight = 500;
        })
      Button('Set Illegal height')
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          this.sheetHeight = 0;
        })
    }
    .width('100%')
    .height('100%')
  }

  build() {
    Row() {
      Button(`ViewA this.a.c = ${this.a ? this.a.c : "undefined"}`)
        .width(320)
        .margin(10)
        .onClick(() => {
          this.a.isShow = !this.a.isShow;
          console.log("22222", JSON.stringify(this.a))
        })
        .bindSheet(this.a.isShow, this.myBuilder(), { height: this.sheetHeight, backgroundColor: Color.Green })
    }
  }
}

@Entry
@Component
struct ViewB {
  @State arr ClassA[] = [new ClassA(4), new ClassA(5)];

  build() {
    Column() {
      List({ space: 12, initialIndex: 0 }) {
        ForEach(this.arrA, (item: ClassA, index: number) => {
          ListItem() {
            ViewA({ label: `#${item.id}`, a: item })
          }
        }, (item: ClassA): string => item.id.toString())
      }
    }
  }
}

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


HarmonyOS 鸿蒙Next半模态框是鸿蒙系统中的一种UI组件，用于在用户界面中提供一种介于全屏模态框和非模态框之间的交互方式。半模态框通常以部分覆盖屏幕的形式出现，允许用户在操作半模态框的同时，仍然可以与底层界面进行有限的交互。这种设计在需要用户关注特定任务或信息，但又不希望完全中断当前操作场景下非常有用。

在鸿蒙系统中，半模态框的实现依赖于ArkUI框架，该框架提供了丰富的UI组件和布局能力，开发者可以通过声明式UI的方式快速构建半模态框。半模态框的显示和隐藏可以通过状态管理来控制，开发者可以定义半模态框的内容、大小、位置以及动画效果等。

鸿蒙Next半模态框的设计遵循了鸿蒙系统的设计语言和交互规范，确保了在不同设备上的一致性和流畅性。开发者可以根据应用场景的需求，灵活调整半模态框的样式和行为，以提供最佳的用户体验。

HarmonyOS 鸿蒙Next中的半模态框是一种介于全屏模态框和非模态框之间的UI组件，通常用于展示次要操作或信息，同时允许用户继续与主界面交互。半模态框通常从屏幕底部或侧面弹出，覆盖部分屏幕内容，用户可以通过滑动或点击其他地方来关闭它。这种设计在需要用户关注但不完全中断当前任务时非常有用，例如显示设置选项、快捷操作或确认提示。开发者可以通过鸿蒙的UI框架轻松实现半模态框，确保用户体验的一致性和流畅性。

回到顶部