【每日学点鸿蒙知识】节点析构问题、区分手机和pad、 Navigation路由问题、Tabs组件宽度、如何监听Map

轻口味2024-12-29 16:02
1、HarmonyOS 只调用根节点的dispose,是否其下的子节点都能析构掉还是需要遍历子节点，都执行dispose才能正常析构？

前端持有引用关系的需要dispose，new出来的builderNode和FrameNode也需要dispose。只调用根节点的dispose,无法保证其下的子节点能够正常释放

2、HarmonyOS 如何在Web UserAgent中区分手机设备与pad设备？

参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/multi-faq-V5#ZH-CN_TOPIC_0000001884757262__如何查询设备类型

  1. 通过命令行的方式查询设备类型。
    通过命令行查询指定系统参数（const.product.devicetype）进而确定设备类型

    方法一

    hdc shell param get "const.product.devicetype"

    方法二

    hdc shell cat /etc/param/ohos.para | grep const.product.devicetype

  2. 在应用开发过程中查询设备类型。

    import { deviceInfo } from'@kit.BasicServicesKit'

    @Entry
    @Component
    struct GetDeviceTypeSample {
    @State deviceType:string='unknown'

    aboutToAppear() {
  this.deviceType= deviceInfo.deviceType
}

build() {
  Column() {
    Text(this.deviceType).fontSize(24)
  }
  .width('100%')
  .height('100%')
}

    }

在Index页面跳转PageOne页面的同时隐藏了导航页（hideNavBar），但是在PageOne页面返回上一页时，为什么会出现白屏的情况？

// Index.ets
@Entry
@Component
struct Index {
  @State hideNavBar: boolean = false
  private pageStack: NavPathStack = new NavPathStack()

  build() {
    Navigation(this.pageStack) {
      Column() {
        Button('跳转PageOne,隐藏NavBar')
          .onClick(() => {
            this.hideNavBar = true
            this.pageStack.replacePath({
              name: 'PageOne'
            })
          })
      }
      .height('100%')
      .justifyContent(FlexAlign.Center)
    }
    .hideNavBar(this.hideNavBar)
    .hideTitleBar(true)
    .hideBackButton(true)
  }
}


// PageOne.ets
@Builder
function PageOneBuilder() {
  PageOne()
}

@Component
export struct PageOne {
  pageStack: NavPathStack | null = null
  build() {
    NavDestination() {
      Column() {
        Button('返回上一页')
          .onClick(() => {
            // 这里返回上一页
            this.pageStack?.pop?.()
          })
      }.height('100%')
    }
    .hideTitleBar(true)
    .onReady((ctx: NavDestinationContext) => {
      this.pageStack = ctx.pathStack
    })
  }
}

api介绍：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-navigation-V5

白屏的情况是隐藏了导航页Navigation导致 hideNavBar(true)，设置为false回去就能看到上一个界面的导航页按钮。可以在Navigation上加一个button组件，在返回即使隐藏了Navigation也能看到button组件。具体使用再参考下api文档。

4、HarmonyOS Tabs组件宽度问题？

文档显示Tabs组件的指示器和视图的宽度一样，app首页的会有很多栏目，在栏目的右边会有一个半透明的遮盖条和一个按钮，在这里有办法分开写吗？或者有其他的组件可以替代，这个会影响操作，最后的一两个栏目可能会点不到。

参考以下demo:

@Entry
@Component
struct tabTest {
  @State tabArray: Array<number> = [0, 1, 2, 3,4]
  @State focusIndex: number = 0
  @State pre: number = 0
  @State index: number = 0
  private controller: TabsController = new TabsController()
  @State test: boolean = false
  @State animationDuration: number = 300
  @State indicatorLeftMargin: number = 0
  @State indicatorWidth: number = 0
  private tabsWidth: number = 0
  private tabWidth: number = 0;
  private scrollerForScroll: Scroller = new Scroller()

  // 单独的页签
  @Builder
  Tab(tabName: string, tabItem: number, tabIndex: number) {
    Row({ space: 20 }) {
      Text(tabName)
        .fontSize(18)
        .fontColor(tabIndex === this.focusIndex ? Color.Blue :Color.Black)
        .id(tabIndex.toString())
        .onAreaChange((oldValue: Area,newValue: Area) => {
          if (this.focusIndex === tabIndex && (this.indicatorLeftMargin === 0 || this.indicatorWidth === 0)){
            if (newValue.position.x != undefined) {
              let positionX = Number.parseFloat(newValue.position.x.toString())
              this.indicatorLeftMargin = Number.isNaN(positionX) ? 0 : positionX
            }
            let width = Number.parseFloat(newValue.width.toString())
            this.tabWidth = Number.isNaN(width) ? 0 : width
            this.indicatorWidth = this.tabWidth
          }
        })
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .width(100)
    .height(30)
    .onClick(() => {
      this.controller.changeIndex(tabIndex)
      this.focusIndex = tabIndex
    })
    .backgroundColor("#ffb7b7b7")
  }

  @Builder
  textTest(textName:string){
    Row({ space: 20 }) {
      Text(textName).fontSize(18)
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .height(30)
    .backgroundColor("#ffb7b7b7")
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.TopStart }) {
        Column() {
          // 页签
          Row({ space: 8 }) {
            List({ space: 20, initialIndex: 0, scroller: this.scrollerForScroll }) {
              ForEach(this.tabArray, (item: number, index: number) => {
                ListItem() {
                  this.Tab("页签 " + item, item, index)
                }
              }, (item: string) => item)
            }
            .listDirection(Axis.Horizontal)
            .height(30)
            .width('80%')
            .friction(0.6)
            .alignListItem(ListItemAlign.Start)
            .scrollBar(BarState.Off)
            .width('80%')
            .backgroundColor("#ffb7b7b7")
            .onScroll((xOffset: number, yOffset: number) => {
              this.indicatorLeftMargin -= xOffset
            })
            this.textTest('更多')

          }
          .alignItems(VerticalAlign.Bottom)
          .width('100%')
          .backgroundColor("#ffb7b7b7")

        }
        .alignItems(HorizontalAlign.Start)
        .width('100%')

        Column()
          .height(2)
          .width(this.indicatorWidth)
          .margin({ left: this.indicatorLeftMargin, top:30})
          .backgroundColor(Color.Blue)
        Column()
          .height(10)
          .width("20%")
          .margin({ left: '80%', top:28})
          .backgroundColor("#ffb7b7b7")
      }
      .height(40)
      .width('100%')
      .backgroundColor("#ffb7b7b7")
      //tabs
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        ForEach(this.tabArray, (item: number, index: number) => {
          TabContent() {
            Text('我是页面 ' + item + " 的内容")
              .height(300)
              .width('100%')
              .fontSize(30)
          }
          .backgroundColor(Color.White)
        }, (item: string) => item)
      }
      .onAreaChange((oldValue: Area,newValue: Area)=> {
        let width = Number.parseFloat(newValue.width.toString())
        this.tabsWidth = Number.isNaN(width) ? 0 : width
      })
      .width('100%')
      .barHeight(0)
      .animationDuration(100)
      .onChange((index: number) => {
        console.log('foo change')
        this.focusIndex = index
        this.scrollerForScroll.scrollToIndex(index-1,true)
      })
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        // 切换动画开始时触发该回调。下划线跟着页面一起滑动
        this.focusIndex = targetIndex
        let targetIndexInfo = this.getTextInfo(targetIndex)
        this.startAnimateTo(this.animationDuration, targetIndexInfo.left, targetIndexInfo.width)
      })
      .onAnimationEnd((index: number,event: TabsAnimationEvent) => {
        // 切换动画结束时触发该回调。下划线动画停止。
        let currentIndicatorInfo = this.getCurrentIndicatorInfo(index,event)
        this.startAnimateTo(0,currentIndicatorInfo.left,currentIndicatorInfo.width)
      })
      .onGestureSwipe((index: number,event: TabsAnimationEvent) => {
        // 在页面跟手滑动过程中，逐帧触发该回调。
        let currentIndicatorInfo = this.getCurrentIndicatorInfo(index,event)
        this.focusIndex = currentIndicatorInfo.index
        this.indicatorLeftMargin = currentIndicatorInfo.left
        this.tabWidth = currentIndicatorInfo.width
        this.indicatorWidth = currentIndicatorInfo.width
      })
    }
    .height('100%')
  }

  private getTextInfo(index: number): Record<string, number> {
    let strJson = getInspectorByKey(index.toString())
    try {
      let obj: Record<string, string> = JSON.parse(strJson)
      let rectInfo: number[][] = JSON.parse('[' + obj.$rect + ']')
      return { 'left': px2vp(rectInfo[0][0]), 'width': px2vp(rectInfo[1][0] - rectInfo[0][0]) }
    } catch (error) {
      return { 'left': 0, 'width': 0 }
    }
  }
  private getCurrentIndicatorInfo(index: number, event: TabsAnimationEvent): Record<string, number> {
    let nextIndex = index
    if (index > 0 && event.currentOffset > 0) {
      nextIndex--
    } else if (index < 4 && event.currentOffset < 0) {
      nextIndex++
    }
    let indexInfo = this.getTextInfo(index)
    let nextIndexInfo = this.getTextInfo(nextIndex)
    let swipeRatio = Math.abs(event.currentOffset / this.tabsWidth)
    let currentIndex = swipeRatio > 0.5 ? nextIndex : index  // 页面滑动超过一半，tabBar切换到下一页。
    let currentLeft = indexInfo.left + (nextIndexInfo.left - indexInfo.left) * swipeRatio
    let currentWidth = indexInfo.width + (nextIndexInfo.width - indexInfo.width) * swipeRatio
    return { 'index': currentIndex, 'left': currentLeft, 'width': currentWidth }
  }

  private startAnimateTo(duration: number, leftMargin: number, width: number) {
    animateTo({
      duration: duration, // 动画时长
      curve: Curve.Linear, // 动画曲线
      iterations: 1, // 播放次数
      playMode: PlayMode.Normal, // 动画模式
      onFinish: () => {
        console.info('play end')
      }
    }, () => {
      this.indicatorLeftMargin = leftMargin
      this.tabWidth = width
      this.indicatorWidth = width
    })
  }
}
5、HarmonyOS 如何监听Map？

可以用@State来修饰Map变量，现在支持Map、Set类型 但是不支持HashMap。

相关推荐
小冷爱学习！9 小时前
华为动态路由-OSPF-完全末梢区域
服务器·网络·华为
2501_9044477410 小时前
华为发力中端，上半年nova14下半年nova15，大力普及原生鸿蒙
华为·智能手机·django·scikit-learn·pygame
MarkHD11 小时前
第十八天 WebView深度优化指南
华为·harmonyos
塞尔维亚大汉11 小时前
OpenHarmony（鸿蒙南向）——平台驱动开发【MIPI CSI】
harmonyos·领域驱动设计
别说我什么都不会12 小时前
鸿蒙轻内核M核源码分析系列十五 CPU使用率CPUP
操作系统·harmonyos
feiniao865113 小时前
2025年华为手机解锁BL的方法
华为·智能手机
塞尔维亚大汉14 小时前
OpenHarmony（鸿蒙南向）——平台驱动开发【I3C】
harmonyos·领域驱动设计
VVVVWeiYee14 小时前
BGP配置华为——路径优选验证
运维·网络·华为·信息与通信
今阳15 小时前
鸿蒙开发笔记-6-装饰器之@Require装饰器，@Reusable装饰器
android·app·harmonyos
余多多_zZ16 小时前
鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图（@ohos.arkui.componentSnapshot (组件截图) ）
学习·华为·harmonyos·鸿蒙·鸿蒙系统
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07DeepSeek RAGFlow构建本地知识库系统08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10【docker】Windows10安装Docker Desktop - WSL update failed