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)

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

相关推荐
yuanpan25 分钟前
认识跨平台UI框架Flutter和MAUI区别,如何选。
flutter·ui·maui
EndingCoder2 小时前
Electron 高级 UI:集成 React 或 Vue.js
react.js·ui·electron·前端框架
我命由我1234514 小时前
Word - Word 的 5 种视图(页面视图、阅读视图、Web 版式视图、大纲视图、草稿视图)
ui·word·excel·photoshop·表格·ps·美工
CodingCos19 小时前
【芯片设计-信号完整性 SI 学习 1.1.1 -- Unit Interval,比特周期】
学习·ui·si 比特周期
开开心心loky19 小时前
[iOS] ViewController 的生命周期
macos·ui·ios·objective-c·cocoa
我命由我123451 天前
Excel 表格 - Excel 减少干扰、专注于内容的查看方式
学习·ui·excel·photoshop·表格·ps·美工
我命由我123451 天前
Excel 表格 - Excel 单元格添加边框
学习·ui·excel·课程设计·photoshop·ps·美工
伽蓝_游戏1 天前
UGUI源码剖析(15):Slider的运行时逻辑与编辑器实现
游戏·ui·unity·性能优化·c#·游戏引擎·.net
John_ToDebug1 天前
定制 ResourceBundle 的实现与 DuiLib 思想在 Chromium 架构下的应用解析
c++·chrome·ui
stormsha2 天前
飞算JavaAI炫技赛电商系统商品管理模块的架构设计与实现
java·架构·鸿蒙系统