【每日学点HarmonyOS Next知识】gbk2313传到native、NAPI打印日志问题、table表格控件、Web 触发新窗口卡住、修饰列表

85 阅读2分钟

1、HarmonyOS NAPI调用中,如果从ArkTS传入编码为gbk2313的字符串到Native层,该调用哪个方法?

如果需要从ArkTS传递编码为gbk2313的字符串到Native层,可以使用napi_get_value_string_utf8方法。这个方法允许 获取ArkTS侧传入的字符串到char数组的长度。

2、HarmonyOS NAPI日志不能打印,OH_LOG_INFO和printf都不行?

请参考下面代码

宏定义,可以自己替换
#define LOGI(format, args) OH_LOG_Print(LOG_APP, LOG_INFO, 0, "logI", format, args);

//调用宏 需要在打印参数前加public 数字用d 字符串用s
LOGI("调用宏======%{public}d==================",123);

3、HarmonyOS 有table表格控件吗?

目前没有表格组件,暂时只能使用web组件引入一个本地的html,在html中绘制一个表格。demo如下:

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct TableHtml {
  controller: web_webview.WebviewController = new web_webview.WebviewController();

  build() {
    Column() {
      Button("点击此处,加载HTML富文本").onClick(() => {
        this.controller.loadData(`<html> <head> <style> .table-font-size{ font-size:20px; } </style> </head> <body bgcolor=\"white\"> <table width="1000" border="5" height="1000"> <tr class="table-font-size"> <th>Month</th> <th>Month</th> </tr> <tr class="table-font-size"> <th>Month</th> <th>Month</th> </tr> <tr class="table-font-size"> <th>Month</th> <th>Month</th> </tr> <tr class="table-font-size"> <th>Month</th> <th>Month</th> </tr> </table> </body></html>`, "text/html", "UTF-8");
      }) // 通过$rawfile加载本地资源文件。
      Web({ src: 'www', controller: this.controller }).javaScriptAccess(true).domStorageAccess(true).fileAccess(true)
      // .defaultFontSize(this.fontSize)
    }
  }
}

4、HarmonyOS Web 触发新窗口时卡住?

import webview from '@ohos.web.webview'
import router from '@ohos.router'

@Entry
@Component
struct WebDemo {
  controller = new webview.WebviewController

  getUrl(): string {
    const params = router.getParams() as Record<string, string>
    return params?.url ?? 'https://www.huawei.com/appview/question/56402307?appview=1'
  }

  build() {
    Column() {
      Web({
        src: this.getUrl(),
        controller: this.controller,
      })
        .height('100%')
        .width('100%')
        .multiWindowAccess(true)
        .onWindowNew((e) => {
          console.log('onWindowNew', e.targetUrl)
          router.pushUrl({
            url: 'pages/WebDemo',
            params: {
              url: e.targetUrl,
            },
          })

          //关键代码
          //将新窗口对应WebviewController返回给Web内核。
          //如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
          //若不调用event.handler.setWebController接口,会造成render进程阻塞。
          e.handler.setWebController(null)
        })
    }
  }
}

5、HarmonyOS 关于@State或@Link 修饰Array的应用?

现有一个数据Bean类型如下:

export class TagBean {
  title: string = ""
  id: string = ""
  is_choose: boolean = false
}

用@State或@Link修饰该Bean的Array数组,如:@Link tagBeans: TagBean[]

目前发现一个问题,在List()中的ForEach(this.tagBeans)内写Text(),背景设置为:.backgroundColor($r(item.is_choose ? “颜色A” : “颜色B”))

在点击事件中使tagBeans[index].is\_choose=true,无法实时更新UI状态

但如果使用额外的string对象去记录点击id,判断(this.chooseIds.indexOf(item.id) >= 0),就可以实现实时更新UI

@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步:developer.huawei.com/consumer/cn…

demo参考如下

import util from '@ohos.util';

@Observed
class TagBean {
  key: string = util.generateRandomUUID(true);
  name: string;
  is_Choose: boolean;

  constructor(name: string, is_choose: boolean) {
    this.name = name;
    this.is_Choose = is_choose;
  }
}

@Component
struct ViewListItem {
  @ObjectLink tagBean: TagBean;

  build() {
    ListItem() {
      Text(this.tagBean.name)
        .width('100%')
        .height(100)
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .borderRadius(10)
        .backgroundColor(this.tagBean.is_Choose ? Color.White : Color.Red)
    }.onClick(() => {
      this.tagBean.is_Choose = !this.tagBean.is_Choose
    })
  }
}

@Entry
@Component
struct ObservedDemo {
  @State tagBeans: Array<TagBean> = [
    new TagBean('小红1', false),
    new TagBean('小红2', false),
    new TagBean('小红3', false),
    new TagBean('小红4', false),
    new TagBean('小红5', false),
    new TagBean('小红6', false),
    new TagBean('小红7', false),
    new TagBean('小红8', false),
    new TagBean('小红9', false),
  ]

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.tagBeans, (item: TagBean) => {
          ViewListItem({ tagBean: item })
        }, (item: TagBean) => item.key)
      }
      .listDirection(Axis.Vertical)
      .friction(0.6)
      .divider({
        strokeWidth: 2,
        color: 0xFFFFFF,
        startMargin: 20,
        endMargin: 20
      })
      .edgeEffect(EdgeEffect.Spring)
      .width('90%')
    }
    .backgroundColor(Color.Black)
    .width('100%')
    .height('100%')
  }
}