3.1.2 Span组件 原创 精华

在正式演示文本段落组件Span之前，我想建立一个列表导航页面，方便随时跳转到相应的组件演示页面。

1.建立页面导航

将上一小节演示Text组件的index.ets页面复制粘贴为TextSample.ets页面。修改index.ets页面的代码为：

@Extend(Text) function li() {
  .fontColor($r("app.color.fgLevel1"))
  .fontSize($r("app.float.fontSizeSubTitle1"))
  .fontWeight(Number($r("app.float.fontWeightSubTitle1")))
}

@Entry
@Component
struct Index {
  build() {
    Column({space:8}) {
      Text('第3章 基础组件')
        .fontColor($r("app.color.fgLevel1"))
        .fontSize($r("app.float.fontSizeH6"))

      Navigator({ target: 'pages/TextSample', type: NavigationType.Push }) {
        Text('1.Text组件').li()
      }
      Navigator({ target: 'pages/SpanSample', type: NavigationType.Push }) {
        Text('2.Span组件').li()
      }
    }
    .width('100%')
    .height('100%')
    .padding({top: $r("app.float.spaceTop"), bottom:$r("app.float.spaceBottom"), left:$r("app.float.spaceLeft"), right: $r("app.float.spaceRight")}) // 屏幕边缘间隔
    .backgroundColor($r("app.color.appBg")) // App背景颜色
    .alignItems(HorizontalAlign.Start)
  }
}

修改config.json文件配置，增加TextSample页面和SpanSample页面：

        "pages": [
          "pages/index",
          "pages/TextSample",
          "pages/SpanSample"
        ],

修改TextSample.ets页面，将代码：

struct Index {

改为：

struct TextSample {

所有页面的struct命名必须唯一，否则会编译冲突。

然后，在TextSample.ets页面顶部（Column布局组件下）加入返回首页的链接代码：

          // 返回首页
          Row({space:8}){
            Image($r("app.media.ic_back")).width(24).height(24)

            Navigator({ target: 'pages/index', type: NavigationType.Back }) {
              Text('返回').title()
            }
          }

如下图所示：

在各媒体资源文件夹下面加入返回图标ic_back.png。

然后新建一个SpanSample.ets的页面，用于演示Span组件。初始代码如下：

/**
 * 3.1.2 Span组件
 */
@Entry
@Component
struct SpanSample {
  build() {
    Stack({ alignContent: Alignment.TopStart }){
      Scroll() {
        Column({space:16}){
          // 返回首页
          Row({space:8}){
            Image($r("app.media.ic_back")).width(24).height(24)

            Navigator({ target: 'pages/index', type: NavigationType.Back }) {
              Text('返回')
                .fontColor($r("app.color.fgLevel1"))
                .fontSize($r("app.float.fontSizeH8"))
                .fontWeight(Number($r("app.float.fontWeightH8")))
            }
          }

        }.padding({left: $r('app.float.spaceLeft'), right: $r('app.float.spaceRight')}).alignItems(HorizontalAlign.Start)
      }
    }.width('100%').height('100%').backgroundColor($r("app.color.appBg")).padding({top:$r('app.float.spaceTop'), bottom:$r('app.float.spaceBottom')})
  }
}

App运行效果如下：

2.接口:Span(content: string)

文本段落组件Span，只能作为Text子组件，呈现一段文本信息。接口调用方法和Text组件相同，示范代码如下：

          /**
           * 文本段落组件(Span):只能作为Text子组件，呈现一段文本信息。
           * 接口:Span(content: string)
           *     content: string 文本内容。
           */
          Text() {
            Span('鸿蒙开发ArkUI最佳实践')
              .fontColor($r("app.color.fgLevel1"))
              .fontSize($r("app.float.fontSizeBody1"))
              .fontWeight(Number($r("app.float.fontWeightBody1")))
          }

效果如下：

注意：在包含Span子组件的时候，Text组件中设置的文本不会生效，我们做个实验，代码如下：

          /**
           * Text组件的文本内容，包含子组件Span时不生效，显示Span内容。
           */
          Text('儿子出生后，我说话都没人听的') { // 这段文本不会显示
            Span('我猜老爸在玩消失')
              .fontColor($r("app.color.fgLevel1"))
              .fontSize($r("app.float.fontSizeBody1"))
              .fontWeight(Number($r("app.float.fontWeightBody1")))
          }

效果如下：

3.Span的属性

在鸿蒙官方开发文档中提到： 通用属性方法仅支持通用文本样式。 仅列出了decoration（ 设置文本装饰线样式及其颜色）和 textCase （ 设置文本大小写 ）的属性，使用方式和Text的同名属性使用方法一摸一样，这里就不赘述了。示例代码：

          /**
           * Span的属性
           */
          Text() {
            Span('HarmonyOS ArkUI For eTS.')
              .fontColor($r("app.color.fgLevel1"))
              .fontSize($r("app.float.fontSizeBody1"))
              .fontWeight(Number($r("app.float.fontWeightBody1")))
              .decoration({ type: TextDecorationType.Underline, color: $r("app.color.danger") }) // 设置文本装饰线样式及其颜色
              .textCase(TextCase.UpperCase) // 设置文本大小写

效果如下：

【源码地址：https://gitee.com/cloudev/harmonyos3/tree/master/3.0/BaseComponent 】