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

一、eTS之 Text控件讲解

1、Text参数

Text(content?: string)

2、Text属性

• TextAlign枚举说明

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

• TextOverflow枚举说明

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

• TextDecorationType枚举说明

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

• TextCase枚举说明

  名称	描述
  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%')
  }
}

②、预览器效果

二、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参数说明。

2、 Button属性

• ButtonType枚举说明

  名称	描述
  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%')
  }
}

②、预览器效果

点击前：

点击后：

三、eTS之Image控件讲解

1、 Image参数

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

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

• 参数

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

2、 Image属性

• ImageFit枚举说明

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

• ImageInterpolation枚举说明

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

• ImageRenderMode枚举说明

  名称	描述
  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%')
  }
}

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

添加：

"reqPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }

③、预览器效果