HarmonyOS 鸿蒙Next 列表菜单功能

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

HarmonyOS 鸿蒙Next 列表菜单功能 类似美团菜单功能

3 回复

美团的那个分类菜单加弹出的列表效果吗?可以使用NodeContainer来实现相近效果

这有个简单代码,仅供参考:

import { UIContext } from '@ohos.arkui.UIContext';
import { NodeController, BuilderNode, Size, FrameNode } from '@ohos.arkui.node';
import { curves } from '@kit.ArkUI';

class Params {
  text: string = "this is a text"
}

@Builder
function buttonBuilder(params: Params) {
  Column() {
    Column() {
      Text(params.text)
    }
    .borderRadius({
      bottomLeft: 20,
      bottomRight: 20
    })
    .width('100%')
    .height('80%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Orange)
    .transition(TransitionEffect.translate({ x: 0, y: -10 }).animation({ curve: curves.springMotion }))
}

class MyNodeController extends NodeController {
  private buttonNode: BuilderNode<[Params]> | null = null;
  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);

  makeNode(uiContext: UIContext): FrameNode {
    if (this.buttonNode == null) {
      this.buttonNode = new BuilderNode(uiContext);
      this.buttonNode.build(this.wrapBuilder, { text: "This is a Button" })
    }
    return this.buttonNode!.getFrameNode()!;
  }

  aboutToResize(size: Size) {
    console.log("aboutToResize width : " + size.width + " height : " + size.height)
  }

  aboutToAppear() {
    console.log("aboutToAppear")
  }

  aboutToDisappear() {
    console.log("aboutToDisappear");
  }

  onTouchEvent(event: TouchEvent) {
    console.log("onTouchEvent");
  }
}

@Entry
@Component
struct Index {
  @State ifShow: boolean = false
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      Button('点击').onClick(() => {
        this.ifShow = !this.ifShow
      })
      if (this.ifShow) {
        NodeContainer(this.myNodeController)
      }
    }
    //.padding({ left: 35, right: 35, top: 35 })
    .width("100%")
    .height("100%")
  }
}

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


那种按钮点击后,悬浮在按钮旁边的子页面。也是这么做吗?

HarmonyOS 鸿蒙Next列表菜单功能主要通过其分布式UI框架实现,允许开发者在多个设备上创建一致且连贯的用户界面。这一功能使得应用程序能够在不同设备间无缝衔接,提供统一的操作体验。

在HarmonyOS中,列表菜单通常是通过XML布局文件或编程方式在代码中定义的。开发者可以使用系统提供的组件,如ListContainerList,来创建和管理列表菜单。这些组件支持多种布局方式,如垂直列表和水平滚动列表,以及自定义布局。

为了实现列表菜单的动态更新和数据绑定,HarmonyOS提供了丰富的数据绑定机制。开发者可以通过绑定数据源(如数组或数据库查询结果)到列表组件,实现列表内容的动态加载和刷新。同时,还可以利用事件监听机制,处理用户的点击、滑动等操作。

此外,HarmonyOS还支持跨设备协同,使得列表菜单可以在不同设备间共享和同步。例如,用户可以在手机上开始浏览一个列表,然后在平板或电视上继续浏览,而无需重新加载数据。

总之,HarmonyOS鸿蒙Next列表菜单功能强大且灵活,能够满足各种应用场景的需求。如果开发者在实现过程中遇到问题,可以参考官方文档或API指南。如果问题依旧没法解决请联系官网客服,官网地址是:

https://www.itying.com/category-93-b0.html

回到顶部