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

发布于 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 文本采用全大写。

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%')
  }
}

②、预览器效果

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

2、 Button属性

名称 参数类型 默认值 描述
type ButtonType Capsule 设置Button样式。
stateEffect boolean true 状态切换时是否开启切换效果,当状态置为false时,点击效果关闭。
  • 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%')
  }
}

②、预览器效果

点击前:

#Dayu200体验官# 第二章 openharmony eTS之常用控件-开源基础软件社区

点击后:

#Dayu200体验官# 第二章 openharmony eTS之常用控件-开源基础软件社区

三、eTS之Image控件讲解

1、 Image参数

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

权限:ohos.permission.INTERNET(使用网络图片)

  • 参数

    参数名 参数类型 必填 默认值 参数描述
    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 将图像渲染为模板图像,忽略图片的颜色信息。

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"
  }

#Dayu200体验官# 第二章 openharmony eTS之常用控件-开源基础软件社区

③、预览器效果

#Dayu200体验官# 第二章 openharmony eTS之常用控件-开源基础软件社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
4
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐