鸿蒙ArkUI布局基础入门知识，带你走进布局，认识布局。

ZHONG_YU
646 阅读18分钟

ArkUI

方舟开发框架(简称：ArkUI),是一套 构建HarmonyOS应用界面的框架。
构建页面的最小单位就是 "组件"。

基础入门

在 build里面写代码，预览器看效果。

image.png

一. ArkUI基础语法：

// 情况1
组件名(参数)
  .属性1()
  .属性2()
  .属性N()

Text('显示的内容')
  .fontSize(50)
  .width(100)

// 情况2
组件名(参数) {
  内容
}
.属性1()
.属性2()
.属性N()

二. 常用系统组件

  1. 容器组件（用来布局的）
组件描述
Column列，内容垂直排列
Row行，内容水平排列
  1. 基础组件
组件描述
Text显示文本
Image显示图片
Button按钮

示例代码(结构布局)

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('小说简介')
      Row() {
        Text('都市')
        Text('生活')
        Text('情感')
        Text('男频')
      }
    }
  }
}

三. 通用属性

属性描述
width宽度✨✨✨
height高度✨✨✨
backgroundColor背景色✨✨✨

做出下图效果：

image.png

代码实现：

// 表示这个文件是一个页面
@Entry
// 表示这个文件是一个组件
@Component
// 使用strust关键字来定义一个结构
struct Index {
  // build方法（编写页面显示原素在该方法里）
  build() {
    /*
     * 布局思路：
     * 1.考虑全局的布局是垂直还是水平（组件：Column列垂直排列.Row行水平排列）
     * 2.考虑里面用什么基础组件去显示内容（Text显示文本.Image显示图片.Button按钮）
     * 注意事项：
     * 1.花括号要配对
     * 2.组件大小写要配对
     * 3. 容器组件只控制其内部一级内容的布局
     * 4.build函数内部只能有一个根组件且是一个容器组件（Column,Row）
     * 小技巧：
     * ctrl+alt+L 自动化格式组件
     *
     * */
      // Column里面元素默认居中
      Column() {
        // Text组件
        Text('小说简介')
          // 设置文字样式加粗
          .fontWeight(FontWeight.Bold)
          // 文字大小
          .fontSize(30)
            // 将文字宽度设置100%，文字自动从左到右排列
          .width('100%')
          .height('40')
          // .backgroundColor(Color.Brown)
        // Row组件:特点：让其内部一级组件从左到右排列
        Row() {
          Text('都市')
            // 设置宽度
            .width('50')
            // 设置高度
            .height('30')
            // 设置背景颜色
            .backgroundColor(Color.Orange)
          Text('生活')
            .width('50')
            .height('30')
            .backgroundColor(Color.Pink)
          Text('情感')
            .width('50')
            .height('30')
            .backgroundColor(Color.Yellow)
          Text('男频')
            .width('50')
            .height('30')
            .backgroundColor(Color.Grey)
        }
       .width('100%')
      }
      // 设置Column宽度
      .width('100%')
      //   设置Column背景颜色
      .backgroundColor(Color.White)
  }
}
1. 颜色渐变

作用：设置组件颜色渐变效果
分类：线性渐变 和 径向渐变

1.1. 线性渐变

场景：

image.png

属性： linearGradient(参数) 参数：

  • angle：线性渐变的起始角度。0点方向顺时针旋转为正向角度，默认值：180
  • direction: 线性渐变的方向，值为 枚举类型 GradientDirection，使用优先级低于 angle，一旦设置了angle，则direction不会生效，而是以angle为准 。
  • Left：从右向左
    Top：从下向上
    Right：从左向右
    Bottom：从上向下
    LeftTop：从右下 到 左上
    LeftBottom：从右上 到 左下
    RightTop：从左下 到 右上
    RightBottom：从左上 到 右下
1.2. 径向渐变

场景：下图CD唱片背后的那个黄色的发光的效果

image.png

属性： radialGradient() 参数：

  • center：径向渐变的中心点，即相对于当前组件左上角的坐标，写法[x坐标, y坐标]
2. 阴影

如下图粉红色边框外红色的部分就是阴影。

image.png

作用：为组件添加阴影效果

属性： shadow(参数) 参数：{}

3. 多态样式

属性：stateStyles()

参数描述
normal✨组件无状态时的样式（默认状态）
pressed✨组件按下状态的样式
disabled组件禁用状态的样式
focused组件获焦状态的样式
clicked组件点击状态的样式

颜色渐变及阴影随笔代码：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('线性渐变演示')
        .width(200)
        .height(90)
        .fontWeight(600)
        // 渐变色，渐变色的优先级比背景色高
        .linearGradient({
          colors:[
            // colors用来设置渐变的各种颜色
            // 红色，0
            [Color.Red,0],
            // 橘色，0.5
            [Color.Orange,0.1],
            [Color.Green,0.3],
            [Color.Blue,0.6],
            [Color.Yellow,1]
          //  可以写很多，但后面数值只能0-1，代表位置
          ],
          // 控制渐变方向direction,默认值GradientDirection.bottom
          // 红色往左边变色，
          direction:GradientDirection.Left,
          // angle控制渐变方向，但是angle的优先级比direction高
          // angle:90
          // repeating是否重复着色，只对颜色没铺满进行着色，默认值是false
          //  repeating:true
        })
      /*
       * 总结：
       * 线性渐变linearGradient所有组件都可以用
       * 语法：
       * 组件().linearGradient(){
       * colors:[[color.颜色，数值],[],[],[]] 数值只能是0-1
       * direction控制渐变方向
       * angle控制渐变角度，angle的优先级比direction高
       * repeating是否重复着色
       * }
       * */

      // 线性渐变案列：
      Column(){
      }
      .linearGradient({
        colors:[[Color.Gray,0],[Color.Red,0.8]],
      })
      .width(80)
      .height(150)
      .backgroundColor(Color.Green)


      /*
       * 径向渐变:radialGradient,所有组件都可以用
       * 三个重要属性：
       * center渐变的中心点[X,Y],数值或者百分比都可以
       * radius半径：数值或者百分比
       * colors多个颜色渐变设置[[颜色，位置(小数表示"0-1")],[],[]]
       * colors中如果使用了color.Transparent,则最后一个颜色使用的是组件本身的颜色
       * */
      Text('径向渐变演示')
        .width(200)
        .height(200)
        .fontWeight(600)
        .backgroundColor(Color.Black)
        .radialGradient({
          // 中心点[X,Y]
          center:['50%','50%'],
          // 半径(数值/百分比字符串)
          radius:80,
          // 颜色
          colors:[[Color.Red,0],[Color.Orange,0.5],[Color.Pink,1]]
        })
        // 阴影效果
        .shadow({
          // 控制边框阴影大小
          radius:30,
          //ShadowType.COLOR是默认值
          type:ShadowType.COLOR,
        //设置阴影颜色
          color:Color.Red,
          // 阴影在X，Y上的偏移量
          offsetX:60,
          offsetY:50,
        // 阴影部分填充组件内部(优先级低于组件背景色backgroundColor)
          fill:false
        })
    }
    .width('100%')
    .height('100%')
  }
}

代码实现效果：

image.png

4. 动画 animation

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。 属性：animation 参数： {}

参数描述
duration设置动画时长。
默认值：1000
单位：毫秒
curve设置动画曲线
默认值：Curve.EaseInOut
delay设置动画延迟执行的时长。
默认值：0，不延迟播放。
单位：毫秒
iterations设置播放次数。
默认值：1
设置为-1时表示无限次播放。设置为0时表示无动画效果。
5. 图形变换

用于对组件进行平移、旋转、缩放、矩阵变换等操作。

5.1 平移

作用：可使组件在以组件左上角为坐标原点的坐标系中进行移动

属性：

translate() 参数：

{x?: X轴移动距离, y?: Y轴移动距离, z?: Z轴移动距离}

5.2 缩放

作用：分别设置X轴、Y轴、Z轴的缩放比例，默认值为1

属性： scale()参数：

{x?: X轴缩放比例, y?: Y轴缩放比例, z?: Z轴缩放比例, centerX?: Y轴中心点坐标, centerY? Y轴中心点坐标}

5.3 旋转

作用：可使组件在以组件左上角为坐标原点的坐标系中进行旋转。

属性：

rotate() 参数：

{angle: 旋转角度, centerX?: Y轴中心点坐标, centerY? Y轴中心点坐标}

Tips：
1.Span()：Text组件的子组件，用于显示行内文本的组件
2.ImageSpan()：Text组件的子组件，用于显示行内图片

动画及图片变形随笔代码：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('线性渐变演示')
        .width(100)
        .height(100)
        .backgroundColor(Color.Gray)
        .borderRadius(9)
        // 设置多态样式
        .stateStyles({
        // 当用户按压文本时，高，宽变200，背景颜色变绿色，边框圆角变60
         pressed:{
        // 提醒：只能是通用属性，高，宽，背景，边框等
          .height(200)
           .width(200)
           .backgroundColor(Color.Green)
           .borderRadius(60)
       }
        })
        // 设置动画
        // 注意：要想一个组件发生动画效果，该组件上一定要有一个通用属性有多态样式
        // 通用属性要有中间的变化状态的值，才有用
        .animation({
          // 表示元素动画时间2秒，1秒=1000毫秒
          duration:2000,
          // 设置动画的循环次数，默认为一次，-1表示循环动画，0表示0次
          iterations:1,
          // 延迟动画播放时间
          delay:3000,
          // 改变动画曲线
          curve:Curve.Ease
        })
        
        
      // 图形变换
      // 平移
      /*
       * 总结：
       * 水平移动：translate({x:数值,y:数值,z:数值})
       * 与绝对定位，相对定位的区别：
       * translate的移动以自己之前位置来进行移动
       * 要做位移动动画优先选择translate，原因：性能高效
       * translate中的X,Y如果是百分比，计算的参考值是自身的宽高
       * 必须配合动画和多态才能使用
       * */
        Image('/images/maiyao.png')
        .width(150)
        .height(150)
        .translate({
          x:0,y:0
        })
        .stateStyles({
          pressed:{
            .translate({
              // x:100,y:100
              x:'50%',
              y:'50%',
              z:'50%'
            })
          }
        })
          .animation({
            duration:2000
          })

          // 缩放
          // 必须配合动画和多态才能使用
          Image('/images/woerma.png')
            .width(150)
          .scale({
            x:1,
            y:1
          })
            .stateStyles({
              pressed:{
                .scale({
                // x,y轴各缩放2倍
                  x:2,
                  y:2
                })
              }
            })
            .animation({
              duration:2000
            })

      // 旋转
      // 必须配合动画和多态才能使用
      Image('/images/cat.jpg')
        .width(160)
        .rotate({
          // 角度：0-360
          angle:0,
          centerX:0,
          centerY:0
        })
        .stateStyles({
          pressed:{
            .rotate({
              // 按压后的角度为360
              angle:360,
            //   改变旋转中心点X位置
              centerX:20,
            //   改变旋转中心点Y位置
              centerY:30
            })
          }
        })
        .animation({
          duration:2000
        })
    }
    .width('100%')
    .height('100%')
  }
}

代码效果实现：

动画13.gif

四. 文本属性

使用：.属性(参数)

属性描述
fontSize字体大小✨
fontColor字体颜色✨
fontStyle字体样式
fontWeight字体粗细✨
lineHeight文本行高
decoration文本修饰线及颜色
textAlign水平方向Text对齐方式✨
align垂直方向对齐方式
textIndent文本首行缩进
textOverflow设置文本超长时的显示方式✨
maxLines设置文本的最大行数✨
1. 字体大小

属性：fontSize(数字)
提示：默认字体大小为 16，单位 fp（字体像素）

2. 字体颜色

属性：fontColor(颜色色值)
色值：

  • 颜色枚举值：Color.xx，例如：Color.Pink
  • 十六进制（HEX）颜色，例如：'#ffffff’或“#fff”
  • rgb() 或 rgba()颜色
    • rgb(r, g, b)， 取值为 0 ~ 255
    • rgba(r, g, b, a)，a 为透明度，取值范围 0 ~ 1
3. 字体样式

作用：设置字体是否倾斜
属性：fontStyle()
参数：枚举FontStyle

  • Normal：正常字体（不倾斜）
  • Italic：斜体
4. 字体粗细

作用：设置文字粗细

属性：fontWeight()
参数：

  • [100, 900]，取值越大，字体越粗，默认值为 400
  • 枚举 FontWeight
    • Lighter：字体较细
    • Normal：字体粗细正常，默认值
    • Regular：字体粗细正常
    • Medium：字体粗细适中
    • Bold：字体较粗
    • Bolder：字体非常粗
5. 文本行高

作用：设置文本行间距
属性：lineHeight()

6. 文本修饰

作用：设置文本装饰线样式及其颜色

属性：decoration()
参数：{}

  • type：修饰线类型，TextDecorationType（枚举）
    • None：无
    • Underline：下划线
    • LineThrough：删除线
    • Overline：顶划线
  • color：修饰线颜色，可选，默认为黑色
7.文本水平对齐方式

作用：设置文本在水平方向的对齐方式

属性：textAlign
参数：枚举 TextAlign

  • Start：左对齐，默认值
  • Center：居中
  • End：右对齐
8. 文本垂直对齐方式

Text 组件内容默认垂直居中

可使用align属性调整Text组件垂直对齐方式。
属性： align()
参数： 枚举Alignment

参数描述
Top顶对齐
Center垂直居中，默认值
Bottom底对齐

看完文本属性不明白？上机熟悉不磨叽：

@Entry
@Component
struct Index {
  build() {
    Column(){
      Text('绝对是方式方法，的收购德国法国')
        .fontColor(Color.Yellow)
      Text('绝对是方式方法，咕嘟咕嘟刚刚')
        // 将来设置文字颜色常用的一种方式
        .fontColor('#ff142f80')
        .fontStyle(FontStyle.Italic)
        .fontSize(20)
      Text('绝对是方式方法，的的控股股东法国')
        .fontColor('rgba(155, 9, 22, 1.00)')
      Text('绝对是方式方法，面面俱到的')
        // rgba中的透明度可以调颜色深浅，0-1来选择，0为透明，1为不透明
        // 更常用
        .fontColor('rgba(0,0,0,0.2)')

      // 3.字体的样式,Normal:默认值正体
      Text('3.字体样式斜体.FontStyle')
        .fontStyle(FontStyle.Italic)
      // 4.字体粗细写法
      Text('4.字体粗细写法: .fontWeight(数值[100-900]/枚举)')
        .fontWeight(900)
      // 正常是400，低于400越细，大于400越粗
      // .fontWeight(fontWeight.Bold)

      // 行高使用的是lineHeight,其中文字大小默认为16，所以行高设置时要高于16，否则会挤在一起
      Text('5.行高演示 .lineHeight()->HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
        .lineHeight(30)
      /*
       * decoration接受的参数
       * */
      // 下划线
      Text('6.文本修饰')
        .decoration({
          type:TextDecorationType.Underline,
          color:'#ffa50a28'
        })
      // 顶划线
      Text('6.文本修饰')
        .decoration({
          type:TextDecorationType.Overline,
          color:'#ff8a0b24'
        })
      // 删除线
      Text('6.文本修饰')
        .decoration({
          type:TextDecorationType.LineThrough,
          color:'#ffd61037'
        })
      // 注意点：textAlign使用的时候text的宽度要大于里面内容
      Text('7.文本水平对齐')
        .textAlign(TextAlign.End)
        .width('100%')
        .backgroundColor(Color.Yellow)
        
      // 注意点：align垂直对齐，使用的时候TEXT的高度要大于里面的内容高度才有用
      // .align(Alignment.Center)居中对齐
      // .align(Alignment.Top)顶端对齐
      // .align(Alignment.Bottom)底端对齐
      Text('8.文本垂直对齐')
        .backgroundColor(Color.Blue)
        .height(100)
        .align(Alignment.Center)
      Text('9.首行缩进textInder(缩进值)')

      Text('妖神记')
        .textAlign(TextAlign.Center)
        .width('100%')
        .fontColor(Color.Green)
        .height('30')
        .fontWeight(FontWeight.Bold)
        .fontSize('30')
      Text('天蚕土豆')
        .fontColor('rgba(0,0,0,0.4)')
        .textAlign(TextAlign.Center)
        .width('100%')
    }
    .width('100%')
    .height('100%')
  }
}

代码实现效果图：

image.png

9. 文本首行缩进

属性：textIndent
参数：数值

10. 文本溢出

使用 textOverflow 配合 maxLines 实现文本溢出显示省略号效果

11. 文本超长显示方式

属性：textOverflow
参数：{overflow: TextOverflow}，TextOverflow 为枚举类型

  • None：文本超长时裁剪显示
  • Clip：文本超长时进行裁剪显示
  • Ellipsis：文本超长时显示不下的文本用省略号代替
  • MARQUEE：文本超长时以跑马灯的方式展示（滚动显示）
12. 最大行数

属性：maxLines
参数：数字

没看很明白？ 上机就能很明白

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('HarmonyOS 是新一代的智能终端操作系统，为不同设备的智能化、互联与协同提供了统一的语言。带来简洁，流畅，连续，安全可靠的全场景交互体验。')
        .fontSize(14)
        .textIndent(28) //设置首行缩进
        .maxLines(2) //最大为2行
        // 超长文本使用省略号代替
        .textOverflow({overflow: TextOverflow.Ellipsis})
        // 裁剪超长文本
        .textOverflow({overflow: TextOverflow.Clip})
        // 超长文本滚动显示，（为一行跑马灯方式展现）
        .textOverflow({overflow: TextOverflow.MARQUEE})
    }
  }
}

代码效果图：

.textOverflow({overflow: TextOverflow.Ellipsis}) image.png

.textOverflow({overflow: TextOverflow.Clip}) image.png

.textOverflow({overflow: TextOverflow.MARQUEE})

动画10.gif

五. 布局属性

组件布局

属性描述
padding内边距
margin外边距
border边框线
borderRadius边框圆角
1. 内边距 padding

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

未添加内边距的Text：

添加了内边距的Text：

Text('文字')
  //语法1：
  .padding(20)  // 给上，下，左，右四个方向设定相同的内边距
  //语法2：
  .padding({top:10,bottom:20,left:5,right:15}) // 给上，下，左，右四个方向单独设置内边距
1.1 padding() 参数：数字 或 对象{ }
  • 数字：上下左右内边距相同。
  • 对象{ }：配合 left、right、top、bottom 单独设置某个方向内边距。
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('文字')
        .backgroundColor(Color.Pink)
        // 单值：四个方向padding相同
        .padding(20)
        // 对象：单独设置某个方向
        .padding({
          top: 10,
          right: 20,
          bottom: 40,
          left: 80
        })
    }
  }
}

✨✨padding属性在各种组件上都可以使用，例如：Column，Row，Text，Image，Button等。

2.外边距 margin

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

Text('文字')
  //语法1：
  .margin(20)  // 给上，下，左，右四个方向设定相同的外边距
  //语法2：
  .margin({top:10,bottom:20,left:5,right:15}) // 给上，下，左，右四个方向单独设置外边距
2.1 margin() 参数：数字 或 对象{}
  • 数字：上下左右内边距相同。
  • 对象{}：配合 left、right、top、bottom 单独设置某个方向内边距。
@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Text('dddddd')
          .backgroundColor(Color.Pink)
          .margin(20)
        Text('hhhhhh')
          .backgroundColor(Color.Orange)
          .margin({
            top: 10,
            right: 20,
            bottom: 40,
            left: 80
          })
      }
    }
  }
}

✨✨margin属性在各种组件上都可以使用，例如：Column，Row，Text，Image，Button等。

padding和margin都是设置间距，他们可以使布局更加美观，提高视觉效果。

3. 边框线

作用：给组件添加边界，进行装饰美化。

3.1 四个方向边框相同

属性：border()
参数：{width?: 数字, color?: '', style?: BorderStyle}，

  • width：边框宽度，边框宽度默认值为0，即不显示边框。
  • color：边框颜色。
  • style：边框样式，BorderStyle为枚举类型。
    • Solid：实线（默认）
    • Dashed：虚线
    • Dotted：点线
3.2 四个方向边框不同

语法代码：

组件()
.border({
  width: {},
  color: {},
  style: {}
})

width、color、style 均可以通过top、right、bottom、left设置各个方向边框外观

4. 边框圆角

✨大多数组件默认情况下是没有边框圆角效果的，需要我们通过编码来设定。

Text边框默认是边框是直角

设置边框圆角以后效果：

胶囊形状：

圆形：

四个角的半径都不同：

属性：borderRadius(圆角半径)
参数：数值 或 枚举 BorderRadiuses

  • topLeft：左上角
  • topRight：右上角
  • bottomLeft：左下角
  • bottomRight：右下角

语法代码：

组件()
  //语法1：给四个角设置相同值
 .borderRadius(圆角半径数值)
  
  //语法2：给四个角单独设值
 .borderRadius({
          topLeft: 左上角半径数值,
          topRight: 右上角半径数值,
          bottomLeft: 左下角半径数值,
          bottomRight: 右下角半径数值        
        })

边框线，边框圆角随笔代码：

@Entry
@Component
struct  Index{
build() {
  Column({space:20}) {
    Text('待完善')
      .fontColor(Color.Red)
      .border({
        width:2,
        color:Color.Green,
        style:BorderStyle.Dashed
      })
      .fontSize(23)
    Text('待完善')
      .fontSize(40)
      .fontColor(Color.Red)
      .border({
        // 设置边框宽度上下左右都可以设置
        width:({top:1,bottom:3,left:4,right:5}),
        // 边框颜色,上下左右都可以设置
        color:({top:Color.Blue,right:Color.Red}),
        // 边框样式，上下左右都可以设置
        style:({top:BorderStyle.Solid,right:BorderStyle.Dashed})
      //   可以用于各个组件
      })
      // 设置边框四角圆角上下左右不一样:
      //注意：胶囊形状的圆角：取高或宽的一半（横着排取高一半，竖着排取宽的一半）
      //注意： 圆：必须是保证正方形形状（宽高一样）
      .borderRadius({
        topLeft:10,
        topRight:20,
        bottomLeft:5,
        bottomRight:30
      })
    // 修改按钮的边框样式
    Button({type:ButtonType.Normal}){
      Text('登录')
    }
    .width(100)
    .height(100)
    .borderRadius(50)
    Text('发展大道路却长')
      .border({
        width:({top:30,bottom:30,left:40,right:40}),
        color:({top:Color.Blue,right:Color.Red}),
        style:({top:BorderStyle.Solid,right:BorderStyle.Dashed})
      })
      .borderRadius(10)
    Image($r('app.media.sunwukong'))
      .width(300)
      .border({
        width:({top:30,bottom:30,left:40,right:40}),
        color:({top:Color.Blue,right:Color.Red}),
        style:({top:BorderStyle.Solid,right:BorderStyle.Dashed})
      })
      .borderRadius(3)
  }
  // 设置column容器内边距上下左右的距离
  .padding(10)
  .width('100%')

  }
}

代码实现效果：

image.png

六. 背景属性

属性描述
backgroundColor背景色
backgroundImage背景图
backgroundImageSize背景图尺寸
backgroundImagePosition背景图位置
1. backgroundColor(常用)

设置组件的背景色 ,组件添加宽高属性或有内容才能观察到背景色

2. backgroundImage

作用：使用背景图实现装饰效果

语法：

  1. 组件().backgroundImage(背景图地址, 背景图平铺方式 ImageRepeat)
  2. 组件(){}.backgroundImage(背景图地址, 背景图平铺方式 ImageRepeat)
    背景图平铺方式：（可省略）
    ●NoRepeat：不平铺，默认值
    ●X：水平平铺
    ●Y：垂直平铺
    ●XY：水平垂直均平铺
3. backgroundImageSize

作用：背景图缩放

属性：backgroundImageSize

参数：
●设置背景图宽高尺寸：{width: 数值, height: 数值}（只设置宽或高，另一个尺寸等比例缩放）
●枚举 ImageSize:

  1. Cover：等比例缩放背景图至图片完全覆盖组件范围
  2. Contain：等比例缩放背景图，当宽或高与组件尺寸相同则停止缩放
  3. Auto：默认，原图尺寸

@Entry
@Component
struct Index {
build() {
Column() {
Text('组件')
.width(300)
.height(100)
.backgroundColor(Color.Pink)
.backgroundImage($r('app.media.flower'))
.backgroundImageSize({width: 100})
.backgroundImageSize(ImageSize.Cover)
.backgroundImageSize(ImageSize.Contain)
}
.padding(20)
}
}
4. backgroundImagePosition

作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角 属性：backgroundImagePosition() 参数：
●位置坐标： {x: 位置, y: 位置}
●枚举 Alignment

名称描述
TopStart顶部起始端（默认位置）
Top顶部横向居中
TopEnd顶部尾端
Start起始端纵向居中
Center居中
End尾端纵向居中
BottomStart底部起始端
Bottom底部横向居中
BottomEnd底部尾端
@Entry
@Component
struct Index {
build() {
Column() {
Text('组件')
.width(300)
.height(100)
.backgroundColor(Color.Pink)
.backgroundImage($r('app.media.flower'))
.backgroundImagePosition({x: 100, y: 50})
.backgroundImagePosition(Alignment.Center)
}
.padding(20)
}
}

七. 显示图片

作用：在应用中显示图片，支持png、jpg、bmp、svg和gif类型的图片格式。
组件：Image('图片的数据源')，支持本地图片资源和网络图片资源。

图片数据源

图片数据源即图片存储位置，通常存储在resources/base/media

代码操作一下：

@Entry
@Component
struct Index {
  build() {
    Column(){
      // 用本地图片演示
      /*
       * app.media是固定写法：它会定义到项目的resources/base/media目录
       * app.media.图片名，就可以取指定图片
       * */
      Image($r('app.media.background'))
        .width(20)
      // 用网络图片演示
      Image('https://search-operate.cdn.bcebos.com/e8cbce1d53432a6950071bf26b640e2b.gif')
        .width(100)
      Image('https://wx1.sinaimg.cn/large/00630Gpxly1fv731j8t3eg306o06oah6.gif')
        .width(200)
      Image('https://bkimg.cdn.bcebos.com/pic/a044ad345982b2b7d0a2ae8b85fcdcef76094b362d78')
        .width(100)

      Text('妖神记')
        .textAlign(TextAlign.Center)
        .width('100%')
        .fontColor(Color.Green)
        .height('30')
        .fontWeight(FontWeight.Bold)
        .fontSize('30')
      Text('天蚕土豆')
        .fontColor('rgba(0,0,0,0.4)')
        .textAlign(TextAlign.Center)
        .width('100%')
      Text('404万字')
        .width(100)
        .fontColor('rgba(0,0,0,0.4)')
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height('100%')
  }
}

注意： (网络图片的地址可能会改变，常用的还是项目的resources/base/media目录中的图片)

代码效果：

动画9.gif

1. Image组件属性

属性描述
width宽度（通用属性）
height高度（通用属性）
aspectRatio宽高比（通用属性）aspectRatio值=width/height
alt加载时显示的占位图，支持本地图片（png、jpg、bmp、svg和gif类型），不支持网络图片。
objectFit设置图片的填充效果。 默认值：ImageFit.Cover

添加backgroundColor属性添加背景色，方便观察组件尺寸范围

尺寸控制

  • width：组件宽度，取值数字或百分比
  • height：组件高度，取值数字或百分比
  • aspectRatio：组件宽高比，宽度/高度

2. 占位图 alt

作用：加载时显示的占位图片
属性：alt

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image('https://www.itheima.com/images/logo.png')
        .width(200)

        // 加载时显示的占位图
        .alt($r('app.media.startIcon'))
    }
  }
}

3. 图片填充 objectFit

属性：objectFit
参数类型：枚举 ImageFit

  • Contain： 图片宽或高缩放到与组件尺寸相同则停止缩放，可能导致组件有空白（等比缩放）
  • Cover： 默认效果，图片缩放到完全覆盖组件范围，可能导致图片显示不完整（等比缩放）
  • Fill： 图片缩放至充满组件（不等比缩放）

文字描述看不明白，代码实操补一下：

@Entry
@Component
struct Index {
  build() {
   Column({space:32}){
     Image($r('app.media.zhoujielun'))
       .width(200)
       .height(100)
       .backgroundColor(Color.Yellow)
       // 缩放图片到image宽高中最小的值的大小，图片完整但是会留白
       .objectFit(ImageFit.Contain)
     Image($r('app.media.zhoujielun'))
       .width(200)
       .height(100)
       // 默认效果，图片完全覆盖image组件的大小，图片不完整
       .objectFit(ImageFit.Cover)
     Image($r('app.media.zhoujielun'))
       .width(200)
       .height(100)
       // 图片铺满整个image组件，显示完整图片，但是图片会压缩失真
       .objectFit(ImageFit.Fill)
    }
    .width('100%')
    .height('100%')
    }
  }

代码实现效果与下图一一对应：

image.png

八. 设计资源-SVG图标

SVG：是用一种用文本格式来描述的图标（可改颜色，放大或缩小不失真）

作用：界面中展示图标可以使用SVG

使用：Image(SVG图标)

1. 设计资源-图标库

HarmonyOS 图标库为 HarmonyOS 开发者提供丰富的在线图标资源，涵盖多种使用场景以及风格分类，提供灵活的颜色、大小和格式定义，满足不同角色的下载需求

下载图标
●HarmonyOS 图标库
●IconFont 图标库
进入图标库网站，下载SVG 格式，存储到工程目录：resources/base/media/

HarmonyOS 图标默认命名以** ic_** 开头，其他图标库下载的图标素材建议修改为与 HarmonyOS 命名规则相同。
使用图标 : 使用 Image 组件显示图标，添加 fillColor() 属性修改图标颜色

@Entry
@Component
struct Index {
build() {
Column() {
Image($r('app.media.ic_gallery_create'))
.width(30)
.fillColor('#f60')
}
.padding(20)
}
}
avatar
文章
阅读
粉丝