当前位置：首页 > news >正文

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

news 2025/5/2 15:29:11

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

前言

臭宝们，今天我们来学习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)`。

Button组件

Button组件用于创建按钮，可以设置文本、图标、样式等属性。

示例代码


@Entry
@Component
struct Index {@State name  :string= 'Text组件'build() {Column() {Text(this.name).fontSize(40)Button('我是Button').width('30%').onClick(()=>{this.name=  'Button组件'})}.height('100%').width('100%')}
}

效果图

在这里插入图片描述
点击一下 "我是Button"组件

在这里插入图片描述

Button属性

属性名	类型	说明
fontSize	number	字体大小，默认值：16px。
fontWeight	string	字体粗细，默认值：‘normal’。可选值为 ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, ‘800’, ‘900’, ‘normal’。
fontFamily	string	字体类型，默认值：‘sans-serif’
fontColor	string	字体颜色，默认值：‘#000000’
width	string/number	按钮宽度，默认值：‘100%’。可选值为长度单位（px、em等）或百分比。
height	string/number	按钮高度，默认值：‘auto’。可选值为长度单位（px、em等）或百分比。
borderRadius	string/number	边框圆角，默认值：‘0px’。可选值为长度单位（px、em等）。
backgroundColor	string	背景颜色，默认值：‘#FFFFFF’
border	BorderOptions	边框属性，默认值：{width: ‘0px’, style: ‘solid’,color:‘#ffffff’}。可选值为长度单位（px、em等）或百分比。
borderStyle	string	边框样式，默认值：‘solid’。可选值为 ‘none’, ‘hidden’, ‘dotted’, ‘dashed’, ‘solid’,
onClick	function	点击事件回调函数。