【HarmonyOS 鸿蒙黑马程序员学习笔记18.1】

这里写目录标题

文字溢出则用省略号代替
- 滚动文字显示
图片加载
- 本地图片加载
- 网络图片加载
完整参考代码

文字溢出则用省略号代替

.textOverflow({overflow:TextOverflow.Ellipsis})
.maxLines(3)

滚动文字显示

.textOverflow({overflow:TextOverflow.MARQUEE})

图片加载

本地图片加载

Image($r('app.media.startIcon'))

网络图片加载

Image('https://)

完整参考代码

@Entry
@Component
struct Index {

  build() {
    // 限制文本行数  溢出文本用省略号代替
    Column(){
      Text('RelativeContainer 官方说明')
        .width('100%')
        .fontSize(25)
        .fontWeight(FontWeight.Bold)
      Text('容器内子组件区分水平方向，垂直方向：\n' +
        '水平方向为left， middle， right，对应容器的HorizontalAlign.Start， HorizontalAlign.Center， HorizontalAlign.End。\n' +
        '垂直方向为top， center， bottom，对应容器的VerticalAlign.Top， VerticalAlign.Center， VerticalAlign.Bottom。\n' +
        '子组件可以将容器、guideline、barrier或者其他子组件设为锚点：\n' +
        '参与相对布局的容器内组件，不设置id的组件能显示，但是不能被其他子组件作为锚点，相对布局容器会为其拼接id，此id的规律无法被应用感知；容器id固定为__container__；guideline和barrier的id不能与组件重复，重复的话按照组件 > guideline > barrier的优先级生效。\n' +
        '此子组件某一方向上的三个位置（水平方向为left、middle、right，垂直方向为top、center、bottom）可以指定容器或其他子组件同方向的三个位置（水平方向为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End，垂直方向为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom）为锚点。若同方向上设置两个以上锚点，水平方向Start和Center优先，垂直方向Top和Center优先。例如，水平方向上指定了left以容器的HorizontalAlign.Start为锚点，middle以容器的HorizontalAlign.Center为锚点，又指定right的锚点为容器的HorizontalAlign.End，当组件的width和容器的width不能同时满足3条约束规则时，优先取Start和Center的约束规则。\n' +
        '当同时存在前端页面设置的子组件尺寸和相对布局规则时，子组件的绘制尺寸取决于约束规则。从API Version 11开始，该规则发生变化，子组件绘制尺寸取决于前端页面设置的尺寸。\n' +
        '对齐后需要额外偏移可设置offset(API Version 11上新增了bias， 不建议再使用offset)。\n' +
        '从API Version 11开始，在RelativeContainer组件中，width、height设置auto表示自适应子组件。\n' +
        '当width设置auto时，如果水平方向上子组件以容器作为锚点，则auto不生效，垂直方向上同理。\n' +
        '相对布局容器内的子组件的margin含义不同于通用属性的margin，其含义为到该方向上的锚点的距离。若该方向上没有锚点，则该方向的margin不生效。\n' +
        'guideline的位置在不声明或者声明异常值(如undefined)时，取start：0的位置；start和end两种方式声明一种即可，同时声明时仅start生效。\n' +
        '当容器在某个方向的size声明为“auto”时，该方向上guideline的位置只能使用start的方式声明(不可使用百分比)。\n' +
        '垂直方向的guideline和barrier只能作为组件水平方向的锚点，作为垂直方向的锚点时取0；水平方向的guideline和barrier只能作为组件垂直方向的锚点，作为水平方向的锚点时取0。\n' +
        '链的形成依靠组件间的依赖关系。以一个组件A、组件B组成的最小水平链为例，需要有锚点1 <-- 组件A <---> 组件B --> 锚点2的依赖关系，即A具有left锚点，B具有right锚点，同时A的right锚点是B的HorizontalAlign.Start，B的left锚点是A的HorizontalAlign.End。\n' +
        '链的方向和格式声明在链头组件的chainMode接口；链内元素的bias属性全部失效，链头元素的bias作为整个链的bias生效。\n' +
        '链内所有元素的size如果超出链的锚点约束，超出的部分将均分在链的两侧。在Packed链中，超出部分的分布可以通过bias来设置。\n' +
        '特殊情况\n' +
        '根据约束条件和子组件本身的size属性无法确定子组件大小，则子组件不绘制。\n' +
        '互相依赖、环形依赖时容器内子组件全部不绘制。\n' +
        '同方向上两个及以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。')
        .width('100%')
        .textOverflow({overflow:TextOverflow.Ellipsis})
        // 溢出则用省略号代替
        .maxLines(3)
        // 设置超出多少行算溢出
      Text('这是一段滚动文字演示代码,不需要设置maxLines,只需要文字超出width范围')
        .width('!00%')
        .textOverflow({overflow:TextOverflow.MARQUEE})

      // 加载图片
      Row(){
        // 加载本地图片
        Image($r('app.media.startIcon'))
          .width(40)
        Text('本代码 是黑马程序员 17课 和 18课')
      }.width('100%')
      Row(){
        // 加载网络图片
        Image('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/yuanfuwuicon.png')
          .width(40)
        Text('感谢 哔哩哔哩 优快云 鸿蒙 提供的帮助')
      }.width('100%')
    }
    .width('100%')
    .height('100%')
    // 背景图片设置
    .backgroundImage('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/1025-pc-banner.jpeg')

  }
}