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)

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

相关推荐
Element_南笙13 小时前
吴恩达新课程:Agentic AI(笔记2)
数据库·人工智能·笔记·python·深度学习·ui·自然语言处理
SmartSoftHelp开发辅助优化14 小时前
C# WinForm 编程高手:程序,进程,线程。程序,窗体,UI,后台。是如何协调工作的?深度解析>SmartSoftHelp魔法精灵工作室
microsoft·ui·c#
我命由我1234519 小时前
Photoshop - Photoshop 工具栏(14)抓手工具
ui·职场和发展·pdf·求职招聘·职场发展·photoshop·美工
覆东流1 天前
Photoshop修图
ui·photoshop
Kingsdesigner1 天前
告别“手绘”图表:Illustrator与XD联动的数据可视化(Data Viz)工作流
ui·adobe·信息可视化·illustrator·媒体·图表·平面设计
鸿蒙小白龙1 天前
OpenHarmony 与 HarmonyOS 的 NAPI 开发实战对比:自上而下与自下而上的差异解析
harmonyos·鸿蒙·鸿蒙系统·open harmony
鸿蒙小白龙1 天前
OpenHarmony平台大语言模型本地推理:llama深度适配与部署技术详解
人工智能·语言模型·harmonyos·鸿蒙·鸿蒙系统·llama·open harmony
Larry_Yanan2 天前
QML学习笔记(四十三)QML与C++交互:上下文属性暴露
c++·笔记·qt·学习·ui·交互
Bert丶seven2 天前
鸿蒙Harmony实战开发教学(No.4)-RichText组件基础到高阶介绍篇
华为·harmonyos·arkts·鸿蒙·鸿蒙系统·arkui·开发教程
鸿蒙小白龙2 天前
openharmony之分布式蓝牙实现多功能场景设备协同实战
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony