作者:码上变富

团队:坚果派 公众号:“大前端之旅” 润开鸿生态技术专家,华为HDE,CSDN博客专家,CSDN超级个别,CSDN特邀嘉宾,InfoQ签约作者,OpenHarmony布道师,电子发烧友专家博客,51CTO博客专家,擅长HarmonyOS/OpenHarmony运用开发、熟悉服务卡片开发。欢迎协作。

前语

凡天下事,预则立,不预则废。 关于鸿蒙开发学与不学的争辩,在网上铺天盖地,争辩得不亦乐乎。笔者以为,鸿蒙作为一个优秀的国产系统,咱们应该理性考虑,与其在犹豫中徘徊,不如先静下心来一步一步学起来,剩下的交给时刻,撸起袖子,干就完了!

手把手一步一步学鸿蒙(一)

  1. 第一篇 小试牛刀:Text组件的运用

咱们从官网developer.harmonyos.com/cn/develop/… 下载开发工具,安装好之后翻开工具

手把手一步一步学鸿蒙(一)

手把手一步一步学鸿蒙(一)

手把手一步一步学鸿蒙(一)

此时咱们就创立一个鸿蒙项目,很简单吧

咱们index文件中的message稍作修正,然后保存(ctrl S)

@State message: string = '手把手一步一步学鸿蒙'

咱们会看到开发工具的预览器上发生了一点小改变

手把手一步一步学鸿蒙(一)

这便是咱们写的第一行鸿蒙代码。 接着咱们想让字显现在一行,咱们能够修正字体的大小,咱们只需要修正fontSize特点

Column() {
  Text(this.message)
    .fontSize(30)
    .fontWeight(FontWeight.Bold)
}

假如咱们想修正字的色彩,咱们只需要修正fontColor特点

Column() {
  Text(this.message)
    .fontSize(30)//字体大小
    .fontWeight(FontWeight.Bold)//字体粗细
    .fontColor(Color.Blue)//字体色彩
}

咱们给Text加上width特点

手把手一步一步学鸿蒙(一)

咱们发现文字向左紧靠着屏幕边际了,这是为什么呢?

手把手一步一步学鸿蒙(一)

咱们点击TT按钮,鼠标放在“手把手一步一步学鸿蒙”这几个字上

手把手一步一步学鸿蒙(一)
能够发现这几个字所在的组件Text宽度和屏幕宽度相同大了,而且里面的字默许是向左对齐的。 咱们增加textAlign(TextAlign.Center)特点,发现字显现在空间的中间了。

手把手一步一步学鸿蒙(一)

Text(this.message)
  .fontSize(30)//字体大小
  .fontWeight(FontWeight.Bold)//字体粗细
  .fontColor(Color.Blue)//字体色彩
  .width('100%')
  .textAlign(TextAlign.Center)

下面咱们在这个Text下面再写一个Text

手把手一步一步学鸿蒙(一)
咱们想让两个Text有一个距离,能够对下边的Text设置

.margin({top:10})

咱们想让这两行小字的左右两头距离屏幕有个距离,看起来不是那么拥堵,key设置

.padding({left:10,right:10})

咱们想让这两行小字,显现成一行,超出屏幕的显现为…

手把手一步一步学鸿蒙(一)

@Entry
@Component
struct Index {
  @State message: string = '手把手一步一步学鸿蒙'
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(30)//字体大小
          .fontWeight(FontWeight.Bold)//字体粗细
          .fontColor(Color.Blue)//字体色彩
          .width('100%')
          .textAlign(TextAlign.Center)
        Text("诗曰: 混沌未分天地乱,茫茫渺渺无人见。"  
        "自从盘古破鸿蒙,拓荒从兹清浊辨。"  
        "覆载群生仰至仁,发明万物皆成善。"  
        "欲知造化会元功,须看西游释厄传。")
          .fontSize(10)//字体大小
          .fontWeight(FontWeight.Bold)//字体粗细
          .fontColor(Color.Blue)//字体色彩
          .width('100%')
          .margin({top:10,left:10,right:10})
          .padding({left:10,right:10})
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
      }
      .width('100%')
    }
    .height('100%')
  }
}

最后总结:

本章首要介绍了运用开发工具创立一个项目和Text组件的运用方法。 期望对同学的工作和学习有所协助,假如你觉得文章写得还不错,麻烦点赞、关注和转发,谢谢。

项目地址: gitee.com/jiangnan112…