【每日学点HarmonyOS Next知识】tab拦截、组件方法做参数、自定义组件链式调用、多次观察者监听、横竖屏切换

1、HarmonyOS Tab组件里的tabBar点击如何拦截,根据情况判断是否允许切换tab?

Tab组件里的tabBar点击如何拦截,根据情况判断是否允许切换tab

暂时没有tabBar点击拦截功能实现,可以使用TabsController自定义页签以及并在其中添加事件进行逻辑判断,参考demo如下:

复制代码
export class ButtonInfoModel {
  index: number = 0;
  info: string = 'home';
  title: string = 'Home';
}

const buttonInfo: ButtonInfoModel[] = [
  {
    index: 0,
    info: 'home',
    title: 'Home'
  },
  {
    index: 1,
    info: 'map',
    title: 'Map'
  },
  {
    index: 2,
    info: 'charging',
    title: 'Charging'
  }
]

@Component
export struct Home {
  @State message: string = 'Home';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Text('点击之后无法进入charging页,会跳转map页')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            buttonInfo[2].info = "map"
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
export struct Map {
  @State message: string = 'Map';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Component
export struct Charging {
  @State message: string = 'Charging';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}
2、HarmonyOS @Builder装饰的方法可以作为参数传递吗?

目前不支持这种传参规则。请参考如自定义构建函数的参数传递:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builder-V5

ArkUI提供了一种轻量的UI元素复用机制@Builder,其内部UI结构固定,仅与使用方进行数据传递,开发者可以将重复使用的UI元素抽象成一个方法,在build方法里调用。

3、HarmonyOS 自定义组件支持链式调用吗?

自定义组件怎么实现系统组件那样的链式调用,如 XX() {}.a("b").c("d")

使用@Styles或@Extend装饰器,定义组件样式方法时,可以支持链式调用,参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-style-V5

如果每个组件的样式都需要单独设置,在开发过程中会出现大量代码在进行重复样式设置,虽然可以复制粘贴,但为了代码简洁性和后续方便维护,我们推出了可以提炼公共样式进行复用的装饰器@Styles。

@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。

4、HarmonyOS @Observed 监听多层数据结构失败?

通过@ObjectLink和@Observed类装饰器的配合,在涉及嵌套对象或数组的场景中进行双向数据同步,详情参考:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/arkts-observed-and-objectlink.md

5、HarmonyOS 如何实现page页面的横竖屏切换?

目前有页面横竖屏切换的需求,需要如何实现

设置横竖屏切换:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setpreferredorientation9
setPreferredOrientation(orientation: Orientation, callback: AsyncCallback<void>): void

设置主窗口的显示方向属性,使用callback异步回调。仅在支持跟随sensor旋转的设备上生效,2in1设备上调用不生效,自由多窗模式(可点击设备控制中心中的自由多窗按钮开启)下调用不生效,子窗调用后不生效。

窗口尺寸变化的监听:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5

相关推荐
2601_9495936528 分钟前
基础入门 React Native 鸿蒙跨平台开发:卡片组件
react native·react.js·harmonyos
沐芊屿34 分钟前
华为交换机配置M-LAG
服务器·网络·华为
HDO清风41 分钟前
CASIA-HWDB2.x 数据集DGRL文件解析(python)
开发语言·人工智能·pytorch·python·目标检测·计算机视觉·restful
小Tomkk1 小时前
PyTorch +YOLO + Label Studio + 图像识别 深度学习项目实战 (二)
pytorch·深度学习·yolo
工程师老罗1 小时前
Pytorch如何加载和读取VOC数据集用来做目标检测?
人工智能·pytorch·目标检测
qq_177767371 小时前
React Native鸿蒙跨平台剧集管理应用实现,包含主应用组件、剧集列表、分类筛选、搜索排序等功能模块
javascript·react native·react.js·交互·harmonyos
qq_177767372 小时前
React Native鸿蒙跨平台自定义复选框组件,通过样式数组实现选中/未选中状态的样式切换,使用链式调用替代样式数组,实现状态驱动的样式变化
javascript·react native·react.js·架构·ecmascript·harmonyos·媒体
烬头88212 小时前
React Native鸿蒙跨平台采用了函数式组件的形式,通过 props 接收分类数据,使用 TouchableOpacity实现了点击交互效果
javascript·react native·react.js·ecmascript·交互·harmonyos
qq_177767373 小时前
React Native鸿蒙跨平台通过Animated.Value.interpolate实现滚动距离到动画属性的映射
javascript·react native·react.js·harmonyos
qq_177767374 小时前
React Native鸿蒙跨平台实现消息列表用于存储所有消息数据,筛选状态用于控制消息筛选结果
javascript·react native·react.js·ecmascript·harmonyos