3.4 鸿蒙组件初探（Text、Button、Image等）

鸿蒙系统提供了一套丰富的 UI 组件库，开发者可以快速构建功能强大的用户界面。本节将介绍几个常用的基础组件，包括 Text、Button 和 Image，以及它们的常见用法。

3.4.1 Text 组件

Text 组件用于显示简单的文本内容，支持字体大小、颜色等样式配置。

基本用法

build() {
    return (
        <text
            value="欢迎使用鸿蒙应用"
            fontSize="24px"
            color="#333"
            alignment="center"
        />
    );
}

Text 组件主要属性

属性描述示例值
value显示的文本内容"欢迎使用鸿蒙"
fontSize字体大小，支持像素值（px）或相对值（em/rem）"18px"
color字体颜色，支持十六进制、RGB 或颜色名"#FF0000"
fontWeight字体粗细，支持 normal、bold、lighter 等值"bold"
textAlign文本对齐方式，支持 left、center 和 right"center"
maxLines显示的最大行数，超出时会截断2
lineHeight行间距（行高），支持像素值或相对值"1.5"
decoration文本修饰，支持 none、underline 和 line-through"underline"
letterSpacing字符间距，支持像素值或相对值"2px"
ellipsis是否在超出最大行数时显示省略号true 或 false

3.4.2 Button 组件

Button 组件用于触发操作或事件。

基本用法

build() {
    return (
        <button
            value="点击我"
            width="150px"
            height="50px"
            backgroundColor="#4CAF50"
            onClick={() => {
                console.log('按钮被点击！');
            }}
        />
    );
}

主要属性

属性描述示例值
value按钮显示的文本内容"提交"
type按钮的类型，支持 normal、capsule、circle 等样式"normal"
width按钮的宽度"150px"
height按钮的高度"50px"
backgroundColor按钮背景颜色，支持十六进制、RGB 或颜色名"#4CAF50"
fontSize按钮文字的字体大小"16px"
fontWeight按钮文字的字体粗细"bold"
textColor按钮文字的颜色"#FFFFFF"
borderRadius按钮的圆角半径"10px"
onClick按钮的点击事件回调函数{() => {...}}
disabled按钮是否不可用true 或 false
padding按钮的内边距"10px 20px"
margin按钮的外边距"10px"
borderColor按钮边框颜色"#CCCCCC"
borderWidth按钮边框宽度"1px"

交互示例

@State count: number = 0;

build() {
    return (
        <div>
            <button
                value="点击增加"
                onClick={() => {
                    this.count++;
                }}
            />
            <text value={`当前计数：${this.count}`} />
        </div>
    );
}

3.4.3 Image 组件

Image 组件用于展示图片资源，可以是本地图片或网络图片。

基本用法

build() {
    return (
        <image
            src="https://example.com/logo.png"
            width="100px"
            height="100px"
            objectFit="cover"
        />
    );
}

主要属性

属性描述示例值
src图片地址，可以是本地图片路径或网络 URL"https://example.com/image.png" 或 "$r('app.media.logo')"
width图片宽度"100px"
height图片高度"100px"
objectFit图片的填充模式，支持 contain、cover、fill、none 等"cover"
alt图片加载失败时显示的替代文本"加载失败"
borderRadius图片的圆角半径"10px"
backgroundColor图片的背景颜色（在图片未加载时显示的颜色）"#F0F0F0"
margin图片的外边距"10px"
padding图片的内边距"5px"
alignment图片的对齐方式，支持 left、center 和 right"center"
aspectRatio图片的宽高比1.5
onClick图片的点击事件回调函数{() => {...}}

本地图片示例

将图片放置在项目的 resources 目录下：

build() {
    return (
        <image src="$r('app.media.icon')" />
    );
}

3.4.4 多组件结合示例

以下是一个结合 Text、Button 和 Image 组件的完整界面：

@State message: string = "欢迎使用鸿蒙";

build() {
    return (
        <stack direction="vertical" alignment="center" width="100%" height="100%">
            <image
                src="https://example.com/logo.png"
                width="120px"
                height="120px"
                margin="20px"
            />
            <text
                value={this.message}
                fontSize="20px"
                color="#000"
                alignment="center"
            />
            <button
                value="点击更改文字"
                width="200px"
                height="50px"
                margin="20px"
                onClick={() => {
                    this.message = "鸿蒙世界欢迎您！";
                }}
            />
        </stack>
    );
}

小结

  • Text 用于显示静态文本，支持多种样式配置。
  • Button 提供交互能力，触发用户操作。
  • Image 用于展示图片资源，支持本地和网络图片。

通过基础组件的组合，开发者可以快速构建出功能丰富且界面友好的鸿蒙应用。

Last Updated::