鸿蒙知识点---第三章

鸿蒙笔记

一、文字溢出省略号、行高

1.文字溢出省略（设置文本超长时的显示方式）

语法：

.textOverflow({

  overflow:TextOverflow.xxx//xxx代表Clip,None,Ellipsis

})

Ellipsis省略号；Clip超出则不显示；None不显示；MARQUEE跑马灯效果（NEXT版本才有）

注意：需要配合.maxLines(行数)使用

2.行高

语法：

.lineHeight(数字)

例如：

@Entry
@Component
struct Index {
  build() {
      Column() {
        Text('HarmonyOS开发初体验')
          .width('100%')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .lineHeight(50)
        Text('方舟开发框架(简称ArkUI)为HarmonyOS应用的UI开发提供了完整的基础设施，包括简介的UI语法、丰富的UI组件(组件、布局、动画以及交互事件)，以及实时页面预览工具等，可以支持开发者进行可视化界面开发')
          .width('100%')
          .lineHeight(24)
          .textOverflow({
            overflow:TextOverflow.Ellipsis
          })
          .maxLines(3)
      }
      .width('100%')
  }
}

总结：

1.设置文字溢出省略号

.textOverflow({
  overflow:TextOverflow.Ellipsis
})
.maxLines(数字)//控制最大行数

2.设置行高

.lineHeight(数字)

二、Image 图片组件

作用：界面中展示图片

语法：Image（图片数据源） 支持网络图片和本地图片资源。

//网络图片：Image('图片的网络地址')

Image('https://www.itheima.com/images/logo.png')

//本地图片:存放在media目录下面
Image($r('app.media.文件名'))

总结：

1.显示图片的组件：

Image（图片数据源）

2.图片数据源支持的两种格式：

①网络图片：

Image('https://www.itheima.com/images/logo.png')

②本地图片：

Image($r('app.media.文件名'))

三、输入框与按钮

输入框语法：

TextInput(参数对象)
 .属性方法()

1.参数对象：placeholder 提示文本

TextInput({
  placeholder:'占位提升文本'
})

2.属性方法：.type(InputType.xxx)设置输入框type类型

按钮语法：

Button('按钮描述')

总结：

1.输入框组件语法：

TextInput({ placeholder:'占位提升文本' })
  .type(InputType.Password)

2.按钮组件：

Button('登录')

3.调整组件之间的距离：

给外容器组件加{space:数字}

Column({space:10}) {…}

四、设计资源-svg图标

界面中展示图标可以使用svg图标（任意放大缩小不失真、可以改颜色）

颜色更改语法：

.fillColor(颜色值)

官方图标库超链接：HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟 (huawei.com)

Column(){
  //svg特点：
  //1.任意放大缩小不失真
  //2.可以修改颜色
  Image($r('app.media.ic_gallery_free'))
    .width(200)
  Image($r('app.media.ic_gallery_free'))
    .width(200)
    .fillColor(Color.Pink)//设置为粉色
}

效果图：

总结：

1.SVG图标修改颜色：

.fillColor(颜色)

2.放大缩小不会失真。

五、布局元素的组成（内、外边距）

布局元素的组成

内边距padding

作用：在组件内添加间距，拉开内容与组件边缘之间的距离。

语法：

四周间距相同：

Text('内边距padding')
  .padding(20) //四个方向边距均为20

四周间距不相同：

Text('内边距padding')

  .padding({

    top:10,

    right:20,

    bottom:40,

    left:80

  }) //四个方向间距不相同

例如：

Text('鸿蒙开发')
  .padding(20) //四个方向边距均为20
  .backgroundColor(Color.Pink)
Text('仓颉语言')
  .backgroundColor(Color.Orange)
  .padding({
    top:10,
    right:20,
    bottom:40,
    left:80
  }) //四个方向间距不相同

效果图：

外边距margin

作用：在组件外添加间距，拉开两个组件之间的距离。

总结：

1.布局元素的组成：

2.内边距语法：

四周间距相同：

Text('内边距padding')
  .padding(20) //四个方向边距均为20

四周间距不相同：

Text('内边距padding')

  .padding({

    top:10,

    right:20,

    bottom:40,

    left:80

  }) //四个方向间距不相同

外边距语法：

四周外边距相同：

Text('外边距margin')
  .margin(20)

四周外边距不同：

Text('外边距margin')
  .margin({
    top:10,
    right:20,
    bottom:40,
    left:80
  })