3.1.2 Span组件 原创 精华

发布于 2022-5-19 20:51
浏览
1收藏

在正式演示文本段落组件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()
            }
          }

如下图所示:

3.1.2 Span组件-开源基础软件社区

在各媒体资源文件夹下面加入返回图标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运行效果如下:

3.1.2 Span组件-开源基础软件社区

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")))
          }

效果如下:

3.1.2 Span组件-开源基础软件社区

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

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

效果如下:

3.1.2 Span组件-开源基础软件社区

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) // 设置文本大小写

效果如下:

3.1.2 Span组件-开源基础软件社区

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
1
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐