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

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

前言

臭宝们，今天我们来学习ArkTS基础UI组件的使用，其中包括：
Column、Row、Text、Button组件。

知识点

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)。

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