手把手一步一步学鸿蒙

作者：码上变富团队：坚果派公众号："大前端之旅" 润开鸿生态技术专家，华为HDE，CSDN博客专家，CSDN超级个体，CSDN特邀嘉宾，InfoQ签约作者，OpenHarmony布道师，电子发烧友专家博客，51CTO博客专家，擅长HarmonyOS/OpenHarmony应用开发、熟悉服务卡片开发。欢迎合作。

前言

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

第一篇小试牛刀：Text组件的使用

我们从官网developer.harmonyos.com/cn/develop/... 下载开发工具，安装好之后打开工具

此时我们就创建一个鸿蒙项目，很简单吧

我们index文件中的message稍作修改，然后保存（ctrl+S）

css 复制代码

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

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

这边是我们写的第一行鸿蒙代码。接着我们想让字显示在一行，我们可以修改字体的大小，我们只需要修改fontSize属性

scss 复制代码

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

如果我们想修改字的颜色，我们只需要修改fontColor属性

scss 复制代码

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

我们给Text加上width属性

我们发现文字向左紧靠着屏幕边缘了，这是为什么呢？

我们点击TT按钮，鼠标放在"手把手一步一步学鸿蒙"这几个字上

可以发现这几个字所在的组件Text宽度和屏幕宽度一样大了，并且里面的字默认是向左对齐的。我们添加textAlign(TextAlign.Center)属性，发现字显示在空间的中间了。

scss 复制代码

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

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

我们想让两个Text有一个间距，可以对下边的Text设置

css 复制代码

.margin({top:10})

我们想让这两行小字的左右两边距离屏幕有个间距，看起来不是那么拥挤，key设置

css 复制代码

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

我们想让这两行小字，显示成一行，超出屏幕的显示为...

less 复制代码

@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...