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

最后，希望臭寶們能夠熟練掌握這些基礎組件的使用，以便在開發中靈活運用。