HarmonyOS鸿蒙Next中ArkUI eTS组件Hyperlink存在的问题及使用建议

HarmonyOS鸿蒙Next中ArkUI eTS组件Hyperlink存在的问题及使用建议本节讲解ArkUI eTS组件Hyperlink的使用方法，对于目前Hyperlink组件Beta版存在的问题，给出了使用建议。

做B/S架构开发的同学，应该很熟悉超级链接组件“a”，通常，链接到另一个网页，写法如下：

<a href="http://www.baidu.com" title="百度" />

而在ArkUI eTS官方提供的组件中有一个和它对标的组件Hyperlink。该组件的接口写法为：

Hyperlink(address: string, content?: string)

其中接口参数"address"对标"href"，可选参数content对标"title"。

示例代码如下：

/**
 * 接口:Hyperlink(address: string, content?: string)
 *    address: string hyperlink组件跳转的网页。
 *    content: string hyperlink组件中超链接显示文本。
 */
Hyperlink('https://ost.51cto.com/person/posts/15589203', '鸿蒙开发之南拳北腿') {
    Image($r("app.media.cover"))
      .width("100%")
      .aspectRatio(1.5)
      .borderRadius($r("app.float.radius_L"))
}

本地预览器只能查看界面效果，无法跳转网页，所以建议在远程模拟器测试，效果如下：

我们发现，接口参数“content”的文本“鸿蒙开发之南拳北腿”是没有显示的，点击图片后，打开浏览器，进入了参数“address”指向的网页。

在上述示范代码中，我放了一个子组件Image。但是，如果我再放入一个子组件呢？说干就干，我在Image组件后面放入一行代码：

Text('鸿蒙开发ArkUI最佳实践')

神奇的一幕发生了：在本地预览器和远程模拟器中发现，接口参数“content”的文本居然出现了！

让人不能接受的是，这个文本字号大小不可控制，文字颜色也不可控制，在深色模式下直接就看不到了。当然，目前Hyperlink组件还处于Beta版阶段，有点小瑕疵，也是可以理解的，希望华为的同学能在Release版时优化下这个问题。

“问题”还没有完。我们给新增加的Text组件加入一点样式，代码如下：

Text('鸿蒙开发ArkUI最佳实践')
  .fontColor($r("app.color.fgLevel1"))
  .fontSize($r("app.float.fontSizeH8"))
  .fontWeight(Number($r("app.float.fontWeightH8")))

我们对比下浅色模式和深色模式下的效果：

原本适配深色模式的文字，在深色模式下不再显示白色文字了！我猜，这与Hyperlink组件的color属性有关。

官方文档中对color属性的描述是：当子组件中有文本和图片时，设置文本和图片的颜色。

可能即使未设置color属性，Hyperlink组件的color属性默认值也会作用于其子组件。那么，如何破局？代码修改如下：

Hyperlink('https://ost.51cto.com/person/posts/15589203', '鸿蒙开发之南拳北腿') { // Hyperlink接口
    Image($r("app.media.cover"))
      .width("100%")
      .aspectRatio(1.5)
      .borderRadius($r("app.float.radius_L"))
    Text('鸿蒙开发ArkUI最佳实践')
      .fontSize($r("app.float.fontSizeH8"))
      .fontWeight(Number($r("app.float.fontWeightH8")))
}.color($r("app.color.fgLevel1"))

效果如下：

"app.color.fgLevel1"这个资源颜色在浅色模式下显示为黑色，在深色模式下显示为白色。现在文字显示合理了，但图片被影响了。

对于Hyperlink组件的使用，我的建议是：不要设置接口参数“content”；同时，在其容器中只放一个子组件，以免互相影响；最后，文本链接的颜色，需要通过Hyperlink的color属性设置。上述代码改造如下：

/**
 * 接口:Hyperlink(address: string, content?: string)
 *    address: string hyperlink组件跳转的网页。
 *    content: string hyperlink组件中超链接显示文本。
 */
Hyperlink('https://ost.51cto.com/person/posts/15589203') { // Hyperlink接口
    Image($r("app.media.cover"))
      .width("100%")
      .aspectRatio(1.5)
      .borderRadius($r("app.float.radius_L"))
}
/**
 * 属性：color:color 当子组件中有文本和图片时，设置文本和图片的颜色。
 */
Hyperlink('https://ost.51cto.com/person/posts/15589203') {
    Text('鸿蒙开发ArkUI最佳实践')
      .fontSize($r("app.float.fontSizeH8"))
      .fontWeight(Number($r("app.float.fontWeightH8")))
      .decoration({ type: TextDecorationType.Underline })
}.color($r("app.color.info")) // 属性：color

浅色模式和深色模式下的效果如下：