#Dayu200体验官# 第二章 openharmony eTS之常用控件原创精华

yukoyu

发布于 2022-5-25 12:57

浏览

1收藏

加载失败

#Dayu200体验官#第二章 openharmony eTS之常用控件

一、eTS之 Text控件讲解

1、Text参数

Text(content?: string)

参数名	参数类型	必填	默认值	参数描述
content	string	否	“”	文本内容，包含子组件Span时不生效，显示Span内容。

2、Text属性

名称	参数类型	默认值	描述
textAlign	TextAlign	TextAlign.Start	设置多行文本的文本对齐方式。
textOverflow	{overflow: TextOverflow}	{overflow: TextOverflow.Clip}	设置文本超长时的显示方式。说明：文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。
maxLines	number	Infinity	设置文本的最大行数。
lineHeight	Length	-	设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。
decoration	{ type: TextDecorationType, color?: Color }	{ type: TextDecorationType.None, color：Color.Black }	设置文本装饰线样式及其颜色。
baselineOffset	Length	-	设置文本基线的偏移量。
textCase	TextCase	TextCase.Normal	设置文本大小写。

TextAlign枚举说明

名称描述

Center 文本居中对齐。

Start 根据文字书写相同的方向对齐。

End 根据文字书写相反的方向对齐。
TextOverflow枚举说明

名称描述

Clip 文本超长时进行裁剪显示。

Ellipsis 文本超长时显示不下的文本用省略号代替。

None 文本超长时不进行裁剪。
TextDecorationType枚举说明

名称描述

Underline 文字下划线修饰。

LineThrough 穿过文本的修饰线。

Overline 文字上划线修饰。

None 不使用文本装饰线。
TextCase枚举说明

名称描述

Normal 保持文本原有大小写。

LowerCase 文本采用全小写。

UpperCase 文本采用全大写。

名称	描述
Center	文本居中对齐。
Start	根据文字书写相同的方向对齐。
End	根据文字书写相反的方向对齐。

名称	描述
Clip	文本超长时进行裁剪显示。
Ellipsis	文本超长时显示不下的文本用省略号代替。
None	文本超长时不进行裁剪。

名称	描述
Underline	文字下划线修饰。
LineThrough	穿过文本的修饰线。
Overline	文字上划线修饰。
None	不使用文本装饰线。

名称	描述
Normal	保持文本原有大小写。
LowerCase	文本采用全小写。
UpperCase	文本采用全大写。

3、Text控件上手实战

①、示例代码：

@Entry
@Component
struct Textyukoyu {
  @State srtText: string = "hello 51CTO";
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Hello World') //test控件使用示例1
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      Text(this.srtText) //test控件使用示例2
        .fontSize(60)
        .fontWeight(FontWeight.Bold)
        .fontColor("#e94674")
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

②、预览器效果

#Dayu200体验官# 第二章 openharmony eTS之常用控件-鸿蒙开发者社区

二、eTS之 Button控件讲解

1、 Button参数

Button(options?: {type?: ButtonType, stateEffect?: boolean})

表1 options参数说明

参数名	参数类型	必填	默认值	参数描述
type	ButtonType	否	Capsule	描述按钮风格。
stateEffect	boolean	否	true	按钮按下时是否开启切换效果，当状态置为false时，点击效果关闭。

Button(label?: string, options?: { type?: ButtonType, stateEffect?: boolean })

使用文本内容创建相应的按钮组件，此时Button无法包含子组件。

表2 value参数说明

参数名参数类型必填默认值参数描述

label string 否 - 按钮文本内容。

options Object 否 - 见options参数说明。

参数名	参数类型	必填	默认值	参数描述
label	string	否	-	按钮文本内容。
options	Object	否	-	见options参数说明。

2、 Button属性

名称	参数类型	默认值	描述
type	ButtonType	Capsule	设置Button样式。
stateEffect	boolean	true	状态切换时是否开启切换效果，当状态置为false时，点击效果关闭。

ButtonType枚举说明

名称描述

Capsule 胶囊型按钮（圆角默认为高度的一半）。

Circle 圆形按钮。

Normal 普通按钮（默认不带圆角）。

名称	描述
Capsule	胶囊型按钮（圆角默认为高度的一半）。
Circle	圆形按钮。
Normal	普通按钮（默认不带圆角）。

3、 Button控件上手实战

①、示例代码

@Entry
@Component
struct Buttonyukoyu {
  @State srtbutton: string = "hello world!";
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text(this.srtbutton)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      Button() {    //按钮控件
        Text('点击')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }.type(ButtonType.Capsule)
      .margin({
        top: 200
      })
      .width('50%')
      .height('10%')
      .backgroundColor('#0D9FFB')
      .onClick(() => {    //点击事件
          this.srtbutton = "hello 51CTO!"
      })
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.

②、预览器效果

点击前：

#Dayu200体验官# 第二章 openharmony eTS之常用控件-鸿蒙开发者社区

点击后：

#Dayu200体验官# 第二章 openharmony eTS之常用控件-鸿蒙开发者社区

三、eTS之Image控件讲解

1、 Image参数

Image(value: {uri: string | PixelMap})

权限：ohos.permission.INTERNET（使用网络图片）

参数

参数名参数类型必填默认值参数描述

uri string 是 - 图片的uri，支持本地图片和网络路径。

参数名	参数类型	必填	默认值	参数描述
uri	string	是	-	图片的uri，支持本地图片和网络路径。

2、 Image属性

名称	参数类型	默认值	描述
alt	string	-	加载时显示的占位图。支持本地图片和网络路径。
objectFit	ImageFit	Cover	设置图片的缩放类型。
objectRepeat	ImageRepeat	NoRepeat	设置图片的重复样式。 > 说明： > - SVG类型图源不支持该属性。
interpolation	ImageInterpolation	None	设置图片的插值效果，仅针对图片放大插值。 > 说明： > - SVG类型图源不支持该属性。 > > - PixelMap资源不支持该属性。
renderMode	ImageRenderMode	Original	设置图片渲染的模式。 > 说明： > - SVG类型图源不支持该属性。
sourceSize	{ width: number, height: number }	-	设置图片解码尺寸，将原始图片解码成指定尺寸的图片，number类型单位为px。 > 说明： > PixelMap资源不支持该属性。
syncLoad8+	boolean	false	设置是否同步加载图片，默认是异步加载。同步加载时阻塞UI线程，不会显示占位图。

ImageFit枚举说明

名称	描述
Cover	保持宽高比进行缩小或者放大，使得图片两边都大于或等于显示边界。
Contain	保持宽高比进行缩小或者放大，使得图片完全显示在显示边界内。
Fill	不保持宽高比进行放大缩小，使得图片填充满显示边界。
None	保持原有尺寸显示。通常配合objectRepeat属性一起使用。
ScaleDown	保持宽高比显示，图片缩小或者保持不变。

ImageInterpolation枚举说明

名称	描述
None	不使用插值图片数据。
High	高度使用插值图片数据，可能会影响图片渲染的速度。
Medium	中度使用插值图片数据。
Low	低度使用插值图片数据。

ImageRenderMode枚举说明

名称描述

Original 按照原图进行渲染，包括颜色。

Template 将图像渲染为模板图像，忽略图片的颜色信息。

名称	描述
Original	按照原图进行渲染，包括颜色。
Template	将图像渲染为模板图像，忽略图片的颜色信息。

3、 Image控件上手实战

①、代码示例

@Entry
@Component
struct Imageyukoyu {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('image控件')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)

      Image($r("app.media.icon")) //使用本地图片
        .width(200)
        .height(200)
        .border({ width: 1 })
        .borderStyle(BorderStyle.Dashed)
        .syncLoad(false)

      Image("http://www.news.cn/politics/leaders/2022-05/24/1128679005_16534016367591n.jpg") //网络图片
        .width(1080)
        .height(400)
        .border({ width: 1 })
        .borderStyle(BorderStyle.Dashed)
        .syncLoad(false)
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

②、使用网络图片添加网络权限

添加：

"reqPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
1.
2.
3.
4.

#Dayu200体验官# 第二章 openharmony eTS之常用控件-鸿蒙开发者社区

③、预览器效果

#Dayu200体验官# 第二章 openharmony eTS之常用控件-鸿蒙开发者社区

分类

标签

51CTO

51CTO博客

51CTO学堂

#Dayu200体验官# 第二章 openharmony eTS之常用控件原创精华

#Dayu200体验官#第二章 openharmony eTS之常用控件

一、eTS之 Text控件讲解

1、Text参数

2、Text属性

3、Text控件上手实战

①、示例代码：

②、预览器效果

二、eTS之 Button控件讲解

1、 Button参数

2、 Button属性

3、 Button控件上手实战

①、示例代码

②、预览器效果

点击前：

点击后：

三、eTS之Image控件讲解

1、 Image参数

2、 Image属性

3、 Image控件上手实战

①、代码示例

②、使用网络图片添加网络权限

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

#Dayu200体验官# 第二章 openharmony eTS之常用控件 原创 精华

#Dayu200体验官#第二章 openharmony eTS之常用控件

一、eTS之 Text控件讲解

1、Text参数

2、Text属性

3、Text控件上手实战

①、示例代码：

②、预览器效果

二、eTS之 Button控件讲解

1、 Button参数

2、 Button属性

3、 Button控件上手实战

①、示例代码

②、预览器效果

点击前：

点击后：

三、eTS之Image控件讲解

1、 Image参数

2、 Image属性

3、 Image控件上手实战

①、代码示例

②、使用网络图片添加网络权限

目录

订阅鸿蒙技术特刊，精选内容抢先看

#Dayu200体验官# 第二章 openharmony eTS之常用控件原创精华