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)

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

相关推荐
UI罐头11 小时前
后台设计指南:系统架构、交互规范与工具实战全流程解析
ui·设计·设计工具
UI前端开发工作室14 小时前
UI前端与数字孪生融合新领域拓展:智慧教育的虚拟实验室建设
ui
前端开发与ui设计的老司机21 小时前
从数据洞察到设计变革:UI前端如何利用数字孪生重塑用户体验?
ui·ux
前端开发与ui设计的老司机1 天前
大数据时代UI前端的智能化升级:基于机器学习的用户意图预测
大数据·ui
前端开发与ui设计的老司机1 天前
从UI设计到数字孪生实战:构建智慧教育的个性化学习平台
学习·ui
前端世界1 天前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Keya2 天前
在HarmonyOS(鸿蒙)中H5页面中的视频不会自动播放
app·harmonyos·arkts
儿歌八万首2 天前
HarmonyOS中各种动画的使用介绍
华为·harmonyos·arkts·arkui
HarmonyOS小助手2 天前
从航旅纵横到东南亚Grab:鸿蒙生态的“星辰大海”,由开发者共绘
harmonyos·鸿蒙·鸿蒙生态
共享ui设计和前端开发人才2 天前
数字孪生技术引领UI前端设计新风向:跨领域数据融合的可视化
ui