鸿蒙应用开发小例-自动隐藏的菜单

实现效果

底部菜单是很常见的页面组成部分。需要实现的效果是，在一定时间内没有操作时隐藏菜单，点击界面时呼出菜单。

自动隐藏菜单示例

实现思路

菜单组件显示在屏幕底部，通过定时器修改状态，使其offset属性y轴位置变化。

点击界面时，修改状态，使其offset属性y轴位置回到默认位置。

为菜单组件增加animation属性。

如有更好的思路，请说出你的想法，一起讨论之～

基本结构

示例页面包含，内容区域（Content）和菜单（MenuBar）。

菜单组件中包含三个按钮。

代码实现

constants下定义了一些通用的数值和颜色，请自行替换。

主要结构

外层使用了Flex组件，对于本示例无特殊意义，也可以换成其他容器组件。

通过改变contentMaskButtonToggle状态，触发菜单位置变化。注意，需要加上@State装饰器。

@State contentMaskButtonToggle: boolean = false
controlTimer = null

build() {
    // ...
    Flex({
        direction: FlexDirection.Column,
        justifyContent: FlexAlign.SpaceBetween,
        alignItems: ItemAlign.Center
    }) {
        Content()
        MenuBar()
    }.onClick(() => {
        this.contentMaskButtonToggle = true
        clearTimeout(this.controlTimer)
        // 此处使用的constants.CONTROL_HIDE_TIME，值为5000
        this.controlTimer = setTimeout(() => {
            this.contentMaskButtonToggle = false
        }, constants.CONTROL_HIDE_TIME)
    })
    // ...
}

Navbar和Content组件不做介绍，主要来看看菜单MenuBar组件。

菜单组件

使用@Builder装饰器自定义构建函数，UI结构上采用了Flex组件包裹Button组件的方式。

修改状态contentMaskButtonToggle，触发offset属性y轴数值改变，实现显示或隐藏菜单的效果。

通过animation属性的设置，实现过渡效果。

@Builder function MenuBar () {
  Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap }) {
    Button({ type: ButtonType.Normal }) { ... }
    Button({ type: ButtonType.Normal }) { ... }
    Button({ type: ButtonType.Normal }) { ... }
  }
  .width('100%').height(constants.UI.MENU_HEIGHT)
  .offset({ x: 0, y: this.contentMaskButtonToggle ? 0 : constants.UI.MENU_HEIGHT })
  .animation({
    duration: 300,
    curve: Curve.Linear,
    iterations: 1
  })
}

以上就是这个小例的核心思路和示例代码。

完结散花

如发现文章内容有任何问题，请提出您的宝贵意见予以指正，感谢您的阅读。