当前位置： 首页 > article >正文

【每日学点HarmonyOS Next知识】Tab切换声明周期、复杂Json组装、scroll最大高度、引用传递报错、Web性能

article 2025/3/9 7:29:39
1、HarmonyOS 内嵌在Tabs的组件不走onPageShow方法？

Tabs组件切换不执行onPageShow生命周期，因为onPageShow是页面级的生命周期，tabs切换触发的是子组件组件级的生命周期aboutToAppear()，可以将showPage()放在该生命周期内调用，如果需要每一次切换都要执行TabContent中的showPage方法，这边推荐使用onTabBarClick(event: (index: number) => void)获取父组件当前点击的tabIndex，在父组件中通过@State定义一个currentTabIndex变量，在onTabBarClick回调中将index赋值给currentTabIndex，并将这个值传递给TabContent包裹的子组件。在子组件中通过@Props和@Watch来监听父组件传递值的不同，执行各个tabContent中的showPage方法。

demo参考：

// xxx.ets
import { FirstPage } from './FirstPage'

@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  @State mainPageState:boolean = false
  @Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
        TabContent() {
          FirstPage({mainPageState:this.mainPageState}).width('100%').height('100%').backgroundColor('#00CB87')

        }.tabBar(this.tabBuilder(0, 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }.tabBar(this.tabBuilder(1, 'blue'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }.tabBar(this.tabBuilder(2, 'yellow'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar(this.tabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width('100%')
      .height('100%')
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }

  onPageShow(): void {
    console.log('index--- onPageShow')
    this.mainPageState = true
  }
  onPageHide(): void {
    console.log('index--- onPageHide')
    this.mainPageState = false
  }
}

import { router } from '@kit.ArkUI';
import { FaultLogger } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
export struct FirstPage {
  @State message: string = 'Hello World';
  @Link @Watch('mainIsShow') mainPageState:boolean
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold).onClick(()=>{
          router.pushUrl({
            url:'pages/DetailPage',

          })

        })
      }
      .width('100%')
    }
    .height('100%')
  }
  mainIsShow(){
    console.log('mainIsShow--',this.mainPageState)
  }
  aboutToAppear(): void {
    console.log('firstPAGE--- aboutToAppear')
  }

  onPageShow(): void {
    console.log('firstPAGE--- onPageShow')
  }
  onPageHide(): void {
    console.log('firstPAGE--- onPageHide')
  }
  aboutToRecycle(): void {
    console.log('firstPAGE--- aboutToRecycle')
  }

}

import { Notification } from '@kit.NotificationKit';

@Entry
@Component
struct DetailPage {
  @State message: string = '详情';

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

    console.log('firstPAGE--- onPageHide')
  }
  onBackPress(): boolean | void {
    console.log('firstPAGE--- onBackPress')
  }
}
2、如何实现复杂json数据的组装？

参考demo：

jsonObject:Record<string,Object> = {}
aboutToAppear(): void {
  this.jsonObject["k1"] = "v1"
  this.jsonObject["k2"] = 20
  let json: string = JSON.stringify(this.jsonObject)
  console.log(json)
}
3、HarmonyOS scroll如何限制最大高度？

在一个布局中间需要展示一段文本，给这个文本（Text组件）套了个scroll，这个文本上下都有其它ui需要展示；当文本较短比如只有一行可以正常展示，但如果这个文本超长一个屏幕都展示不了，那么文本下面的ui会被挤出屏幕，如何在文本超长的情况下控制这个Text组件或scroll组件的高度以防止其它ui被挤出屏幕。
参考demo：

@Entry
@Component
struct NestedScroll {
  @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
  private arr: number[] = [1]
  private scrollerForList: Scroller = new Scroller()

  build() {
    Flex() {
      Column() {
        Text("头部")
          .width("100%")
          .height("20%")
          .backgroundColor(0X330000FF)
          .fontSize(16)
          .textAlign(TextAlign.Center)

        List({ space: 20, scroller: this.scrollerForList }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text("这是一段超长文字这是一段超长文字这是一段超" +
                "长文字这是一段超长文字这是一段超长文字这是一段超长文" +
                "字这是一段超长文字这是一段超长文字这是一段超长文字这是一" +
                "段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +
                "长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段" +
                "超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长" +
                "文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这" +
                "是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长" +
                "文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是" +
                "一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +
                "长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一" +
                "段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +
                "长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这" +
                "是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文" +
                "字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字")
                .borderRadius(15)
                .fontSize(16)
                .backgroundColor(Color.White)
            }.width("100%")
          }, (item: string) => item)


        }
        .borderColor(Color.Green)
        .borderWidth(2)
        .width("100%")
        .edgeEffect(EdgeEffect.None)
        .friction(0.6)
        .onReachStart(() => {
          this.listPosition = 0
        })
        .onReachEnd(() => {
          this.listPosition = 2
        })
        .onScrollFrameBegin((offset: number) => {
          if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) {
            return { offsetRemain: 0 }
          }
          this.listPosition = 1
          return { offsetRemain: offset };
        })
        .constraintSize({ maxHeight: 400 })

        Text("尾部")
          .width("100%")
          .height("20%")
          .backgroundColor(0X330000FF)
          .fontSize(16)
          .textAlign(TextAlign.Center)
      }
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
  }
}
4、HarmonyOS @Builder 按引用传递参数编译错误？

编译提示：Object literals cannot be used as type declarations (ArkTS-no-obj-literals-as-types) <ArkTSCheck>
代码：

@Builder overBuilder($$: { paramA1: string }) {
  Row() {
    Text(`UseStateVarByReference: ${$$.paramA1} `)
  }

参考代码：

class Tmp{
  paramA1:string = ‘’
}
@Builder function overBuilder($$ : Tmp) {
  Text($$.params)
    .width(400)
    .height(50)
    .backgroundColor(Color.Blue)
}
5、HarmonyOS H5页面嵌套是否会存在页面卡顿的现象，该如何优化？

参考最佳实践：https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-web-develop-optimization-V5

ArkWeb（方舟Web）是一个Web组件平台，旨在为应用程序提供展示Web页面内容的功能，并为开发者提供丰富的能力，包括页面加载、页面交互、页面调试等功能。在这个数字化时代，页面显示的速度直接体现了应用的流畅性，影响着用户对应用的印象和体验。快速加载并展示页面不仅可以吸引用户留在应用上，还能减少他们的等待时间和不耐烦情绪，从而提升用户的满意度。

Web页面的显示过程可以被分为多个阶段，包括DNS解析、建立连接、发送请求、接收响应、解析HTML、下载资源等步骤。在这个过程中，许多因素都会对页面显示速度产生影响，比如网络延迟、服务器响应时间、页面大小、资源压缩等。为了提升Web页面显示速度，开发者可以在Web页面加载、资源下载和页面渲染等方面进行优化，以提升性能和用户体验。

本文将介绍以下常见的优化方式。

  • Web页面加载优化：Web页面加载速度对于用户体验至关重要，提高页面加载的速度可以直接提升应用的流畅性。
  • JSBridge：通过JSBridge通信，可以解决ArkTS环境的冗余切换，避免造成UI阻塞。
  • 同层渲染：通过将页面元素分层渲染，可以减少页面重绘和重排的次数，提高页面渲染效率。

ArkWeb（方舟Web）为开发者提供了优化页面显示速度的方法。通过采取这些优化方式，开发者可以改善应用程序的性能和用户体验，使用户能够更快速、更流畅地浏览Web页面，从而提升用户满意度和留存率。


http://www.kler.cn/a/576862.html

相关文章：

  • saltstack通过master下发脚本批量修改minion_id，修改为IP
  • 递归专题刷题
  • 大模型工程师学习日记（十五）：Hugging Face 模型微调训练（基于 BERT 的中文评价情感分析）
  • Python写一个查星座的小程序，适合初学者练手——字典和if语句练习
  • ARMV8的64位指令
  • cdn取消接口缓存
  • Redis 各数据类型使用场景详解
  • Scaling Laws for Neural Language Models
  • DIY Tomcat：手写一个简易Servlet容器
  • HTTPS安全通信协议原理
  • 什么是 Java 的 Timer？
  • opentitan riscv
  • 关于父组件向子组件传值的形式（类型一）
  • 【商城实战(13)】购物车价格与数量的奥秘
  • 【leetcode hot 100 142】环形链表Ⅱ
  • webflux响应式编程
  • Windows、macOS和Linux系统的统计文件夹下的文件数量的方法
  • 笔记：代码随想录算法训练营day38： LeetCode322. 零钱兑换、279.完全平方数、139.单词拆分；多重背包
  • 数学建模：MATLAB强化学习
  • MacBook上API调⽤⼯具推荐