鸿蒙开发加强4

文本溢出
属性：textOverflow
文本超出默认是剪裁效果
1. 超出的内容部分以省略号显示  => 超出几行后？
 .textOverflow({
 // 设置超出显示的方式 => 省略号 滚动形式 
 overflow: TextOverflow.Ellipsis  // 省略号显示
 }).maxLines(2)   // 最多几行

2. 滚动播放显示（跑马灯）
 .textOverflow({
 // 设置超出显示的方式 =>  滚动形式 
 overflow: TextOverflow.MAQUEE  // 省略号显示
 })   // 滚动播放形式，是一行播放，不需要 maxLines 属性
 
3. 裁剪效果 可以配置最多几行，和默认效果有区别

4. None 和裁剪效果差不多，可以设置最多几行

Image组件属性
显示图片
// Image('网络图片地址')
Image()
可以设置宽度和高度的，如果只设置高度，宽度会跟着高度等比例改变，如果只设置宽度，高度也会跟着变

// 本地图片地址
注意：图片存在这个位置  =>  resources/base/media
Image($r('app.media.图片名'))
注意：图片的命名需要是纯字母的

aspectRatio  设置宽高比 => 通用属性
aspectRatio(2) 宽高比为两倍

针对网络图片加载不出来
alt(本地图片地址)  => 空着不好看，本地照片先顶一下  是非通用属性

图片填充
属性：objectFit 
参数类型：枚举 ImageFit
1. Contain  图片会保证等比列的缩放，会显示完整 => 容器有空余
2. Cover    图片会保证等比列的缩放，要完全覆盖住容器 => 图片显示不完整 常用，是默认值
3. Fill        图片要覆盖住容器，但是不保证等比例 => 图片会变形

==========================基础布局==========================

设计资源-图标库
图标下载地址
https://developer.huawei.com/consumer/cn/design/harmonyos-icon/

图标格式是： .svg
svg优势：svg不会放大失真 换颜色很方便
png jpg 图片：放大会失真，换颜色很麻烦

fillcolor 填充颜色
.fillcolor(Color.Green)

组件的模型
margin 外边距
border 边框
padding 内边距
最里面是组件内容

padding()  单值，padding(20) 表示四个方向相同
padding()  对象，padding({top:20,bottom:20,left:50,right:50})

margin()  单值是四个方向
对象可以设置四个方向

容器组件 Column Row
基础组件 Text Image Button
通用属性 width height backgrondcolor aspectRatio 

Button('文字')  按钮

边框属性
属性：border
参数：{width: 1, // 边框的粗细
    color: Color.red,  // 边框的颜色
    style: borderStyle.Solid  // 边框的样式 Dotted(点线) Dashed(虚线)  默认是实线
}
边框需要设置边框颜色，边框的粗细，边框的样式
参数里的width，color，style 也可以给个 对象{}，设置四个方向

边框圆角
borderRadius(10)  是一个圆润的角，数值越大，越圆润
borderRadius()  想要有一个圆，前提是正方形，设置边框圆角是宽（高）的一半

borderRadius()  想要有一个胶囊，前提是长方形，设置边框圆角是高的一半

不是一定要有边框才可以设置边框圆角
borderRadius({
    topLeft:10,
    topRight:20,
    bottomRight:30,
    bottomLeft:40
})