2025ArkTS基础UI(一)——Column、Row、Text组件

2025ArkTS基础UI(一)------Column、Row、Text组件

前言

臭宝们,今天我们来学习ArkTS基础UI组件的使用,其中包括:

Column、Row、Text组件。

知识点

Colum、Row组件用于布局,Text、Image、Button组件用于展示。

Column组件

Column组件用于垂直布局,其子元素从上到下依次排列,常作为布局的根组件。

示例代码(一)
复制代码
@Extend(Column) function  Columnd(){
  .width('100%')
  .height('20%')
}
@Entry
@Component
struct Index {
 

  build() {
    Column() {
      Column()
        .backgroundColor(Color.Black)
        .Columnd()
      Column()
        .Columnd()
        .backgroundColor(Color.Brown)
      Column()
        .Columnd()
        .backgroundColor(Color.Blue)
      Column()
        .Columnd()
        .backgroundColor(Color.Pink)

    }
    .height('100%')
    .width('100%')
  }
}
效果图(一)
示例代码(二)
复制代码
@Entry
@Component
struct Index {

  build() {
    Column() {
      Column()
        .backgroundColor(Color.Black)
        .width('80%')
        .height('20%')
      Column()
        .width('60%')
        .height('40')
        .backgroundColor(Color.Brown)
    }
    .height('100%')
    .width('100%')
  }
}
效果图(二)
Column属性
属性名 类型 说明
width string | number 设置组件的宽度,可以是百分比或具体数值。例如:'100%' 或 '200px'。
height string | number 设置组件的高度,可以是百分比或具体数值。例如:'50%' 或 '300px'。
backgroundColor Color 设置背景颜色。例如:backgroundColor(Color.Red)

Row组件

Row组件用于水平布局,其子元素从左到右依次排列。

示例代码(一)
复制代码
@Extend(Column) function  Columnd(){
  .width('20%')
  .height('100%')
}
@Entry
@Component
struct Index {


  build() {
    Row() {
      Column()
        .backgroundColor(Color.Black)
        .Columnd()
      Column()
        .Columnd()
        .backgroundColor(Color.Brown)
      Column()
        .Columnd()
        .backgroundColor(Color.Blue)
      Column()
        .Columnd()
        .backgroundColor(Color.Pink)

    }
    .height('100%')
    .width('100%')
  }
}
效果图(一)
示例代码(二)
复制代码
@Entry
@Component
struct Index {


  build() {
    Row() {
      Column()
        .backgroundColor(Color.Black)
        .width('20%')
        .height('80%')
      Column()
        .width('60%')
        .height('100%')
        .backgroundColor(Color.Brown)
    }
    .height('100%')
    .width('100%')
  }
效果图(二)
Row属性
属性名 类型 说明
width string | number 设置组件的宽度,可以是百分比或具体数值。例如:'100%' 或 '200px'。
height string | number 设置组件的高度,可以是百分比或具体数值。例如:'50%' 或 '300px'。
backgroundColor Color 设置背景颜色。例如:backgroundColor(Color.Red)

Text组件

text组件用于展示文本内容。

示例代码
复制代码
@Entry
@Component
struct Index {


  build() {
    Column() {
      Text('我是Text组件')
        .fontSize(30)
      Text('我是红色')
        .fontSize(30)
        .fontColor(Color.Red)
      Text('我是粗体')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
    }
    .height('100%')
    .width('100%')
  }
}
效果图
Text属性
属性名 类型 说明
fontSize number 设置字体大小。例如:fontSize(24),单位为像素(px)。
fontColor Color 设置字体颜色。例如:fontColor(Color.Blue)
fontWeight FontWeight 设置字体粗细。例如:fontWeight(FontWeight.Bold)

最后,希望臭宝们能够熟练掌握这些基础组件的使用,以便在开发中灵活运用。

相关推荐
程序员潘Sir21 小时前
鸿蒙应用开发从入门到实战(七):ArkTS组件声明语法
harmonyos·鸿蒙
程序员潘Sir2 天前
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
harmonyos·鸿蒙
Yasin Chen2 天前
Unity UI坐标说明
ui·unity
鸿蒙小白龙3 天前
鸿蒙应用之网络请求方案总结
harmonyos·鸿蒙·鸿蒙系统·open harmony
咏方舟【长江支流】3 天前
AI+华为HarmonyOS开发工具DevEco Studio详细安装指南
人工智能·华为·移动开发·harmonyos·arkts·deveco studio·长江支流
赵健zj3 天前
鸿蒙实现右滑加载更多
鸿蒙
眠りたいです3 天前
基于脚手架微服务的视频点播系统-数据管理与网络通信部分的预备工作
c++·qt·ui·微服务·云原生·架构·媒体
程序员潘Sir3 天前
鸿蒙应用开发从入门到实战(五):ArkUI概述
harmonyos·鸿蒙
程序员潘Sir4 天前
鸿蒙应用开发从入门到实战(四):ArkTS 语言概述
harmonyos·鸿蒙