【鸿蒙实战开发】HarmonyOS各种组件样式的基础应用

鸿蒙开发基础与实战

最新推荐文章于 2025-01-03 15:36:39 发布

原创

最新推荐文章于 2025-01-03 15:36:39 发布 · 1k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #鸿蒙 #鸿蒙开发

1. 基础入门

在 build里面写代码，预览器看效果。
在这里插入图片描述

2. ArkUI 基本语法

方舟开发框架（简称：ArkUI），是一套构建HarmonyOS应用界面的框架。
构建页面的最小单位就是 “组件”。

码组件名(参数) { 
  内容 
  } 
  .属性1() 
  .属性2() 
  .属性N()

3. 常用系统组件

3.1. 系统组件
在这里插入图片描述
结果图

代码如下：

@Entry 
@Component 
struct Index { 
  build() {
    Column() { 
      Text('小说简介')
      Row() { 
        Text('都市') 
        Text('生活') 
        Text('情感') 
        Text('男频') 
      } 
    } 
  } 
}

3.2. 通用属性

在这里插入图片描述

实现图：
在这里插入图片描述

代码如下：

@Entry 
@Component 
struct Index { 
  build() { 
    Column() { 
      Text('小说简介') 
        .width('100%') 
        .height(40) 
      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) 
        } 
        // 宽度100%后， 内容居左对齐 
      .width('100%') 
    } 
  } 
}