组件的属性和方法

需求:美化组件外观效果 → 组件的属性方法

语法:

组件() {}
  .属性方法1(参数)
  .属性方法2(参数)
  .属性方法3(参数)
  ...

比如:

Text('小说简介')
  .height(40)
  .fontSize(20)
  ...

以下是常用的属性方法

现在我们开始优化上期的文字排版

// 构建 → 界面
build () {
  // 布局思路:先排版,后内容
  Column () {
    // 内容
    Text('小说简介')
      .width('100%')
      .height(40)
      .fontSize(20)
      .fontWeight(700) // 100~900的数字 加粗700 默认400
      // .fontWeight(FontWeight.Bold) 和上面一样的效果文字加粗
    Row () {
      Text('都市')
        .width(50)
        .height(30)
        .backgroundColor(Color.Orange) // 橙色
      Text('生活')
        .width(50)
        .height(30)
        .backgroundColor(Color.Pink) // 粉色
      Text('情感')
        .width(50)
        .height(30)
        .backgroundColor(Color.Yellow) // 黄色
      Text('男频')
        .width(50)
        .height(30)
        .backgroundColor(Color.Gray) // 灰色
    }
    .width('100%')
  }
}

注:在方法输入百分比需要使用单引号('100%')

 最后效果图:

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐