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

【每日学点HarmonyOS Next知识】防截屏、加载不同View、函数传参、加载中效果、沉浸式底部状态栏

news 来源：原创 2025/5/25 20:46:57

1、HarmonyOS 如何修改下拉刷新时里面的icon，将其替换成文字？

下面是隐藏icon&显示文字的demo：

@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false
  @State arr: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9','10']
  @Builder
  customRefreshComponent()
  {
    Stack()
    {
      Row()
      {
        // 隐藏icon
        // LoadingProgress().height(32)
        Text("正在刷新...").fontSize(16).margin({left:20})
      }
      .alignItems(VerticalAlign.Center)
    }.width("100%").align(Alignment.Center)
  }

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing,builder:this.customRefreshComponent()}) {
        List() {
          ForEach(this.arr, (item: string) => {
            ListItem() {
              Text('' + item)
                .width('100%').height(100).fontSize(16)
                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
            }
          }, (item: string) => item)
        }
        .onScrollIndex((first: number) => {
          console.info(first.toString())
        })
        .width('100%')
        .height('100%')
        .divider({strokeWidth:1,color:Color.Yellow,startMargin:10,endMargin:10})
        .scrollBar(BarState.Off)
      }

      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
      .onRefreshing(() => {
        setTimeout(() => {
          this.isRefreshing = false
        }, 2000)
        console.log('onRefreshing test')
      })
      .backgroundColor(0x89CFF0)
    }
  }
}

2、HarmonyOS 如何设置固定浅色模式？

可主动设置应用的深浅色风格，设置后，应用的深浅色模式固定，不会随系统改变。参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-light-dark-color-adaptation-V5#section19361879317

应用默认配置为跟随系统切换深浅色模式，如不希望应用跟随系统深浅色模式变化，可主动设置应用的深浅色风格。设置后，应用的深浅色模式固定，不会随系统改变。

onCreate(): void {
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
}

系统默认判断规则

如果应用调用上述setColorMode接口主动设置了深浅色，则以接口效果优先。
应用没有调用setColorMode接口时：
- 如果应用工程dark目录下有深色资源，则系统内置组件在深色模式下会自动切换成为深色。
- 如果应用工程dark目录下没有任何深色资源，则系统内置组件在深色模式下仍会保持浅色体验。

如果应用全部都是由系统内置组件/系统颜色开发，且想要跟随系统切换深浅色模式时，请参考以下示例修改代码来保证应用体验。

onCreate(): void {
  this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
}

3、HarmonyOS 通过string和图片生成一个二维码？

通过string和图片生成一个二维码，然后二维码可以通过扫描解析出来

参考QRCode组件生成二维码：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-qrcode-V5
QRCode二维码内容为字符串。最大支持256个字符，若超出，则截取前256个字符。

4、HarmonyOS Text获取文本显示的行数？

需要获取Text的行数，根据行数不同进行不同的布局

@ohos.measure可以返回多行文字的宽高，没有返回行数，但可以根据业务场景来计算。API文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-measure-V5
在这里插入图片描述

//场景一：超过特定行数（下方以3行为例），样式不同，比如加上展开、收缩。 计算文本总高度
let textSize : SizeOptions = measure.measureTextSize({ textContent: this.message, fontSize: 24, constraintWidth: 300 });
//限定宽度和最大行数（3行），计算高度
let textSize2 : SizeOptions = measure.measureTextSize({ textContent: this.message, fontSize: 24, maxLines: 3, constraintWidth: 300 });
//若textSize.height > textSize2.height，则表示实际高度超过3行，根据判断结果进行业务处理。
//场景二：组件渲染前预留合适高度展示内容

import measure from '@ohos.measure'
@Entry
@Component struct Index {
  @State textSize: SizeOptions = { width: 0, height: 0 }
  @State message: string = '很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段';
  aboutToAppear(): void {
    this.textSize = measure.measureTextSize({
      textContent: this.message, fontSize: 14, constraintWidth: 300 })
    console.log(JSON.stringify(this.textSize))
  }
  build() {
    Row() {
      Swiper() {
        Row() {
          Text(this.message)
            .fontSize(14)
            .width(300) }
        .backgroundColor(Color.Yellow)
        .width(300)
        .height(px2vp(Number(this.textSize.height))) } }
    .height('100%')
  }
}

5、HarmonyOS inputText输入框怎么主动退出输入状态，失去焦点？

inputText输入框怎么主动退出输入状态，失去焦点

通过stopediting退出软件盘的编辑状态，可参考如下代码：

@Entry
@Component
struct TextInputExample {
  controller: TextInputController = new TextInputController()
  @State inputValue: string = “”
  build() {
    Column() {
      TextInput({ text: this.inputValue, placeholder: ‘input your word…’, controller: this.controller })
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .caretColor(Color.Blue)
        .width(‘95%’)
      .height(40)
        .margin(20)
        .fontSize(14)
        .fontColor(Color.Black)
        .onChange((value: string) => {
          this.inputValue = value
        })

    }
    .width(‘100%’)
    .height(‘100%’)
    .onClick(()=>{
      this.controller.stopEditing()
    })
  }
}