【每日学点 HarmonyOS Next 知识】字符串、图片生成二维码，文本行数获取及输入框退出编辑状态方法汇总

2025-03-15
北京
本文字数：2746 字
阅读完需：约 9 分钟

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

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

@Entry@Componentstruct 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-V5QRCode二维码内容为字符串。最大支持 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@Componentstruct 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()    })  }}