基础容器及通用属性和样式

已于 2024-08-23 10:03:14 修改
阅读量667 收藏 22
点赞数 28
文章标签： 学习方法 前端 鸿蒙
于 2024-08-23 10:01:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62341746/article/details/141455404
版权

容器及通用属性

一、容器组件（布局用的）

组件布局说明(排列方式)适用场景
Column(){}线性布局内容垂直(从上往下)排列内容需要垂直排列
Row(){}线性布局内容水平(从左往右)排列内容需要水平排列
Flex(){}弹性布局能将元素整齐分配剩余空间(存在性能问题)页面头部,搭建或多行数据排列
Stack(){}层叠布局里面可写任何元素,元素默认居中叠加
List(){}列表把元素按垂直或水平方式排列通讯录，音乐列表

二、容器功能及基本结构

Column && Row

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
      }
    }
  }
}

2.1 线性布局

  • 主轴：容器在布局方向上的轴线，元素默认沿主轴排列。Column主轴为纵向（竖着的），Row主轴为横向

  • 交叉轴：与主轴垂直的轴线，Column交叉轴为横向，Row交叉轴为垂直（竖着的）

  • 间距：元素与元素之间的距离

    在这里插入图片描述

2.1.1 布局方向-direction

在容器中我们可以通过direction属性来控制元素在容器中的排列方式

枚举值描述
Column主轴为垂直(竖着)，从上往下排列
ColumnReverse主轴为垂直(竖着)，从下往上排列
Row主轴为水平，从左往右排列
RowReverse主轴为水平，从右往左排列

试一试

@Entry
@Component
struct Index {
  build() {
    // 垂直排列
    Flex({ direction: FlexDirection.Column }) {
      Text('1')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Orange)
      Text('2')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Pink)
      Text('3')
        .width('33%')
        .height(30)
        .backgroundColor(Color.Orange)
    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')
  }
}
2.2 主轴方向的间距

通过space属性，可以设置主轴上的子元素的间距

在这里插入图片描述
在这里插入图片描述

@Entry
@Component
struct Index {
  build() {
    Column({ space: 0 }) {
      Row({ space: 0 }) {
      }
    }
  }
}
2.3 主轴对齐方式

​ .justifyContent()

设置主轴上的元素的对齐方式（作用在容器里的所有元素）

​ 在这里插入图片描述

​ 语法：

Column(){}.justifyContent(FlexAlign.Center)
Row(){}.justifyContent(FlexAlign.Start)
属性描述
Start首端对齐
Center居中对齐
End尾部对齐
Spacebetween两端对齐
SpaceAround子元素两侧间距相等
SpaceEvenly首个元素与行首的间距到最后一个元素到行尾的间距一样
2.4 交叉轴对齐方式

alignItems

设置容器中子元素在交叉轴的对齐方式（作用在容器中所有子元素）

语法：

Column(){}.alignItems(HorizontalAlign.枚举值)
Row(){}.alignItems(VerticalAlign.枚举值)

Column

在这里插入图片描述

Row

在这里插入图片描述

2.5 单个子元素在交叉轴的对齐方式

alignSelf

设置容器中子元素自身的对齐方式（脱离父容器的对齐方式）

语法

Column(){
  Text('子元素1')
  Text('子元素2')
  .alginSelf(ItemAlign.枚举值)
}
.justifyContent(FlexAlign.枚举值)

在这里插入图片描述

2.6 自适应缩放

layoutWeight

在设置了layoutWeight的元素会把剩下的空间占了

在这里插入图片描述

试一试

@Entry
@Component
struct Index {
  build() {
    Row() {
      Text('左边内容1 左边内容2 左边内容3 左边内容4')
        .backgroundColor(Color.Pink)
        .height(80)
        .layoutWeight(1)  // 占父容器的全部剩余空间

      Text('右边内容')
        .width(100)  // 固定宽度
        .backgroundColor(Color.Green)
        .height(80)

    }
    .width('100%')
    .height(80)
    .backgroundColor(Color.Gray)
  }
}
2.6.1 多个元素设置layoutWeight

在这里插入图片描述

试一试

@Entry
@Component
struct Index {
  build() {
    Column({ space: 40 }) {
      Row() {
        Text('左边内容1 左边内容2 左边内容3 左边内容4')
          .backgroundColor(Color.Pink)
          .height(80)
          .layoutWeight(1)

        Text('中间内容1 中间内容2 中间内容3 中间内容4')
          .backgroundColor(Color.Orange)
          .height(80)
          .layoutWeight(1)

        Text('右边内容')
          .width(100)
          .backgroundColor(Color.Green)
          .height(80)
      }
      .width('100%')
      .height(80)
      .backgroundColor(Color.Gray)

      Row() {
        Text('左边内容1 左边内容2 左边内容3 左边内容4')
          .backgroundColor(Color.Pink)
          .height(80)
          .layoutWeight(1)

        Text('中间内容1 中间内容2 中间内容3 中间内容4')
          .backgroundColor(Color.Orange)
          .height(80)
          .layoutWeight(1)

        Text('右边内容')
          .layoutWeight(1)
          .backgroundColor(Color.Green)
          .height(80)
      }
      .width('100%')
      .height(80)
      .backgroundColor(Color.Gray)

      Row() {
        Text('左边内容1 左边内容2 左边内容3 左边内容4')
          .backgroundColor(Color.Pink)
          .height(80)
          .layoutWeight(1)

        Text('中间内容1 中间内容2 中间内容3 中间内容4')
          .backgroundColor(Color.Orange)
          .height(80)
          .layoutWeight(2)

        Text('右边内容')
          .layoutWeight(1)
          .backgroundColor(Color.Green)
          .height(80)
      }
      .width('100%')
      .height(80)
      .backgroundColor(Color.Gray)
    }
  }
}

Flex && Stack && List

@Entry
@Component
struct Index {
  build() {
    Column() {
      Flex() {
        Stack() {
          List() {
			ListItem(){}
          }
        }
      }
    }
  }
}

2.7 Flex (弹性布局)

Flex的justifyContent属性与线性布局一样

在这里插入图片描述

2.7.1 交叉轴对齐-alignItems
枚举值描述
Strecth交叉轴方向拉伸填充，如果没有设置尺寸，拉伸到容器尺寸
Baseline交叉轴文本基线对齐

注意：其它枚举与线性一致

试一试

@Entry
@Component
struct Index {
  build() {
    Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
      Text('1')
        .width(30)
        .height(30)
        .backgroundColor(Color.Orange)
      Text('2')
        .width(30)
        .height(30)
        .backgroundColor(Color.Pink)// 交叉轴拉伸
        .alignSelf(ItemAlign.Stretch)
      Text('3')
        .width(30)
        .height(30)
        .backgroundColor(Color.Orange)
      Text('4')
        .width(30)
        .height(30)
        .backgroundColor(Color.Pink)
    }
    .width('100%')
    .height(200)
    .backgroundColor('#ccc')
  }
}
2.7.2 Flex换行-wrap

**概念：**弹性布局分为多行或单行，Flex中的子元素默认排在一条线上（又叫线轴）。当子元素尺寸总和大于Flex时，子元素会自动挤压， 通过wrap可以控制Flex是单行还是多行。

Flex({wrap:Flex.Wrap})

2.7.3 Stack（层叠布局）

Stack容器中的子元素默认居中推叠

在这里插入图片描述

试一试

@Entry
@Component
struct Index {
  build() {
    Column() {
      Stack() {
        Column() {
        }
        .width('90%')
        .height(130)
        .backgroundColor(Color.Gray)

        Text('text')
          .width('60%')
          .height('60%')
          .backgroundColor(Color.Orange)
        Button('button')
          .width('30%')
          .height('30%')
          .backgroundColor('#ff8ff3eb')
          .fontColor('#000')
      }
      .width('100%')
      .height(150)
      .backgroundColor(Color.Pink)
    }
    .margin(10)
  }
}

对齐方式

枚举值描述
Top顶部居中
TopStart左上角
TopEnd右上角
Start左上角竖着居中
Center居中（默认）
End右边竖着居中
Bottom底部居中
BottomStart左下角
BottomEnd右下角
2.7.4 Z序控制

zIndex(数字)

作用：用来控制显示优先级，数值越大优先级越高

2.8 List列表容器

作用：内容超过List容器尺寸时，自动提供滚动功能

在这里插入图片描述

基本语法

List(){
  ListItem(){
  
  }
}
2.8.1 List主轴

属性：listDirection()

参数：枚举（Axis）

  • Vertical 垂直方向，默认
  • Horizontal 水平方向
List(){
  ListItem(){
  }
}
.listDirection(Axis.Vertical)//默认值写不写都可以
2.8.2 List交叉轴

属性：lanes(参数1，参数2)，参1设置交叉轴列数，参2设置列与列之间的间距

List(){
 ListItem(){
 }
}
.lanes(3,10)

对齐方式

属性：alignListItem()

参数：枚举 ListItemAlign

  • Stater 首部对齐，默认
  • Center 居中对齐
  • End 尾部对齐
List(){
 ListItem(){
 }
}
.alignListItem(ListItemAlign.Center)
2.8.3 自定义列表

分割线

列表默认没有分割线

属性：divider({})

参数：

  • strokeWidth: 线的宽度

  • color?: 颜色

  • startMargin?: 离左边容器边缘的距离

  • endMargin?: 离右边容器边缘的距离

    List() {
  ListItem(){}
}
    .divider({
    strokeWidth: 1,
    color: Color.Orange,
    startMargin: 10,
    endMargin: 10
  })

    滚动条状态

    属性：scrollBar()

    参数：枚举 BarState

  • Off : 关闭滚动条

  • On :一直显示

  • Auto : 滚动触摸时显示，无操作2s后消失

    List() {
  ListItem(){
  }
}
 .scrollBar(BarState.Off)

三、属性

3.1、通用属性

属性描述
width容器宽度
height容器高度
backgroundColor背景颜色
linearGradient({参数})线性渐变，0-1之间取值 ,
radialGradient({参数})径向渐变(由一个中心点向四周扩散渐变)
shadow({参数})给组件添加阴影
stateStyle({参数})给组件设置样式
padding内边距
margin外边距
border边框线
borderRadius边框圆角

3.1.1语法及说明

1、width 、height、 backgroundColor

试一试

@Entry
@Component
struct Index{
	build(){
		Column(){
		}
        //宽高的两种写法
		 .width('100%')
		 //.width(100)
        .height('100%')
        //.height(100)
        //背景颜色的三种方式
        .backgroundColor(Color.Red)
        //.backgroundColor('#ff00ff')
        //.backgroundColor('rgba(0,0,0,0-1之间)')
	}
}

2、linearGradient（线性渐变）、radiaGradient（径向渐变）

在这里插入图片描述

.linearGradient（线性渐变）

试一试

@Entry
@Component
struct Index {
  build() {
    Column() {

      Text('线性渐变')
        .fontSize(50)
        .width(200)
        .height(200)

        .linearGradient({
          //渐变颜色 颜色由红色0渐变到蓝色1 （0、1表示颜色显示的透明度）
          colors: [
            [Color.Red, 0],
            [Color.Blue, 0.5]
          ],
          //渐变方向(Bottom是默认值)
          direction: GradientDirection.LeftTop,
          //渐变角度 (默认180，0-360)
          angle: 130,
          //是否重复渐变 (false是默认值)
          repeating: true
        })
    }
    .width('100%')
    .height('100%')
  }
}

注意：

  • angle 线性渐变起始角度 12点顺时针向右转为正向角度，默认180

  • direction 线性渐变的方向，枚举类型优先级低于angle，写了angle，direction会失效

    .radiaGradient (径向渐变)

    试一试

    @Entry
@Component
struct Index {
  build() {
    Column() {
      Text('')
        .width(200)
        .height(200)

        .radialGradient({
          //从这个位置开始向四周扩散
          center: ['50%', '50%'],
          //半径
          radius: 100,
          //颜色
          colors: [
            [Color.Orange, 0.3], [Color.Yellow, 0.6],
            //透明度
            [Color.Transparent, 1],
          ]

        })
    }
    .width('100%')
    .height('100%')
  }
}

    三个重要属性

    1. center

    2. radius

    3. colors

      注意：colors里设置了透明度，最后一个颜色则是组件本身背景色

      shadow （给组件添加阴影）

      @Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Text('阴影')
      }
      .margin({ top: 50 })
      .width(200)
      .height(200)
      .shadow({
        //设置边框阴影大小
        radius: 50,
        //阴影样式
        type: ShadowType.COLOR,
        //阴影颜色
        color: 'rgba(223, 0, 77, 1.00)',
        offsetX: 50, //X轴上的偏移量
        offsetY: 10, //Y轴上的偏移量
        fill: false //阴影部分填充在组件内部,默认false
      })
    }
    .backgroundColor('rgba(12, 88, 159, 0.36)')
    .width('100%')
    .height('100%')
  }
}

      注意：fill的优先级比组件的背景色低

      padding(外边距)

      作用：让内容与组件边缘拉开距离

      在这里插入图片描述

试一试

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('内边距')
        .width(200)
        .height(200)
        .backgroundColor(Color.Pink)
          //给四个方向设置相同的内边距
        //.padding(70)
      //给四个方向设置不同的内边距
      .padding({
        top: 10,
        bottom: 10,
        right: 10,
        left: 70
      })
    }
    .width('100%')
    .height('100%')
  }
}

pdaaing 在任意组件容器上都可以使用，如：Column、Row、Button、Image、Text…

margin(外边距)

作用：拉开两个组件之间的距离

在这里插入图片描述

试一试

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('QQ登录')
        .width('70%')
        .height(60)
        .margin({ top: 10 })
      Button('微信登录')
        .width('70%')
        .height(60)
        .margin({ top: 20 })
        //给四个方向设置外边距
        .margin({top:0,bottom:0,right:0,left:0})
    }
    .width('100%')
    .height('100%')
  }
}

注意：margin和padding一样可以用在任意容器或组件上

border&&borderRadius

作用：装饰美化组件

border:参数：{width:1,color:’ ',style: BorderStyle}

  • width:边框宽度，默认0，就是没有边框

  • color:边框颜色

  • style:边框样式，BorderStyle,为枚举类型

  • Soid:实线（默认）

  • Dashed:虚线

  • Dotted:点线

在这里插入图片描述
在这里插入图片描述

borderRadius

在这里插入图片描述
在这里插入图片描述

参数：数值或枚举 BorderRadius

  • topLeft:左上角

  • topRight:右上角

  • bottomLeft:左下角

  • bottomRight:右下角

    试一试

    @Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Border')
        .width(100)
        .height(100)
        .backgroundColor('Color.Pink')
          //border
        .border({
          width: {
            left: 1,
            right: 2,
            top: 3,
            bottom: 4
          },
          color: {
            top: Color.Blue,
            bottom: Color.Red,
            left: Color.Green,
            right: Color.Orange
          },
          style: { top: BorderStyle.Dashed, bottom: BorderStyle.Dotted }
        })
      Text('BorderRadius')
        .width(150)
        .height(100)
        .margin({ top: 40 })//borderRadius
          //.borderRadius(10)四个角都是10
        .border({ width: 2 })
        .borderRadius({
          topLeft: 10,
          topRight: 10,
          bottomLeft: 10,
          bottomRight: 10
        })
    }
    .width('100%')
    .height('100%')
  }
}

    注意：边框圆角属性几乎可以给所有组件设置，比如：Column、Row、Text、Image、但Button有默认情况下圆角边框会失效

3.2、文本属性

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

试一试

/*
fontSize、fontColor、fontWeight、lineHeight、fontStyle
*/

@Entry
@Component
struct Index{
  build(){
    Column(){
      Text('文本属性')
        .fontSize(20)//字体大小,默认16，单位fp(字体像素)
        .fontColor(Color.Red)//颜色
        .fontStyle(FontStyle.Italic)//样式，默认Normal没有样式，Italic字体倾斜
        .fontWeight(500)//粗细，默认400，大于400变粗，小于400变细
        .lineHeight(0)//文本行高
    }
    .width('100%')
    .height('100%')
  }
}

fontWeight

  • Lighter 比较细
  • Normal 默认值
  • Regular 正常
  • Medium 适中粗细
  • Bold 较粗
  • Bolder 最粗

试一试

/*
decoration、textAlign、align、textIndent、textOverflow、maxLines
*/
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666')
        .width('100%')
        .height(200)
        .fontSize(30)
        .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })//文本修饰线和颜色，修饰线颜色，默认黑色
        .textAlign(TextAlign.Center)//文本水平方向对齐
        .align(Alignment.Center)//垂直对齐
        .textIndent(30)//首行缩进
        .textOverflow({ overflow: TextOverflow.Ellipsis })//文字溢出
        .maxLines(2)//显示最大行数
    }
    .width('100%')
    .height('100%')
  }
}

注意：maxLines是配合textOverflow使用

decoration

  • None 这里什么都没发生
  • Underline 下划线
  • LineThrough 删除线
  • Overline 头顶上有根横着或者竖着的线

textAlign

  • Start 左对齐，默认值
  • Center 居中
  • End 右对齐

align

  • Top 头顶对齐

  • Bottom 底对齐

  • Center 居中对齐，默认

textOverflow

  • None 超长裁剪显示

  • Clip 超长时进行裁剪显示

  • Ellipsis 超长尾部用省略号显示

  • MARQUEE 滚动方式显示

3.3、背景属性

属性描述
backgroundColor背景色

作用：给组件设置背景色

代码小示例

@Entry
@Compoent
 struct Index{
  build(){
	Column(){
}
	 .width('100%')
	 .height('100%')
//三种写法
	 .backgroundColor('rgba(0,0,0,1)')
//.backgroundColor('#ffff00')
//.backgroundColor(Color.red)
  }
}

注意：要给容器添加宽高或者内容才能看到背景色

backgroundImage背景图

作用：给组件设置背景图起到装饰效果

平铺方式

  1. NoRepeat 不平铺（默认值）
  2. X 水平平铺
  3. Y 垂直平铺
  4. XY 水平垂直一起铺

试一试

@Entry
@Compoent
 struct Index{
  build(){
  	Column(){
        .backgroundImage($r())
  	  .backgroundImage($r('app.media.图片名字'),ImageRepeat.Y)//背景图平铺
  	}
  	.width('100%')
  	.height('100%')   
  }
}
backgroundImagePosition背景图位置

作用：调整背景图的位置，默认显示在容器左上角。

  • TopStart 顶部起始端（左上角）
  • Top 顶部横着居中
  • TopEnd 顶部尾端（右上角）
  • Start 起始端纵向居中（竖着）
  • Center 居中
  • End 尾部纵向居中
  • BottomStart 底部起始端
  • Bottom 底部横向居中
  • BottomEnd 底部尾端

试一试

@Entry
@Compoent
 struct Index{
  build(){
    Column(){
    .backgroundImage($r('app.media.图片名字')
     .width(400)
     .backgroundImagePosition({x:0,y:0})//背景图位置
     //.backgroundImagePosition(Alignment.End)
    }
     .width('100%')
     .height('100%')
  }
 }
backgroundImageSize背景图大小

作用：调整背景图大小

  • 类型：枚举
  • Cover 等比例缩放背景图，缩放到完全覆盖组件范围。
  • Contain 等比例缩放背景图，缩至与组件宽度一致停止缩放。
  • Auto 原图大小（默认）

试一试

@Entry
@Compoent
struct Index{
  build(){
   Column(){
    .backgroundImage($r('app.media.图片名字')
    .backgroundImageSize({width:0})//背景图大小
   }
      .width('100%')
       .height('100%')
  }
}

3.4 图片存放位置

图片存储位置，通常存储在resources/base/media

在这里插入图片描述
在这里插入图片描述

获取media中的图片

语法：Image($r(‘app.media.图片名称’))

在ets目录上新建imgs文件夹，并获取

语法：Image(‘/imgs/图片名称’)

3.5 Image (图片)属性

属性描述
aspectRatio宽高比（通用属性）aspectRatio值=width/height
alt网络加载时显示的占位图，支持本地图片（png、jpg、bmp、svg和gif类型），不支持网络图片。
objectFit图片的填充效果，默认：ImageFit.Cover
@Entry
@Component
struct Index {
  build() {
    Column() {
      // 本地图片 正方形图添加 aspectRatio 属性，宽高比例为 1:1
      Image($r('app.media.cat'))
        .width(200)
        .aspectRatio(1)
      // 网络图片
      Image('https://www.baidu.com/images/logo.png')
        .width(200)
        // 长方形图片设置宽高比1:1, 会导致图片显示不全
        .aspectRatio(1)
    }
  }
}

3.5.1 占位图

网络加载时还没有显示出内容的时候放了一张图（就叫占位图）

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image('https://www.baidu.com/images/logo.png')
        .width(200)
        // 加载时的占位图
        .alt($r('app.media.startIcon'))
    }
  }
}

3.5.2 图片填充

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

  • Contain：图片宽或高缩放到与组件尺寸相同则停止缩放，可能导致组件有空白（等比缩放）

  • Cover：默认效果，图片缩放到完全覆盖组件范围，可能导致图片显示不完整（等比缩放）

  • Fill：图片缩放至充满组件（不等比缩放）

    @Entry
@Component
struct Index {
  build() {
    Column() {
      Image($r('app.media.cat'))
        .width(200)
        .height(100)
        .backgroundColor(Color.Pink)
        .objectFit(ImageFit.Contain)
        .objectFit(ImageFit.Cover)
        .objectFit(ImageFit.Fill)
    }
  }
}

四、多态样式 - stateStyles

属性：stateStyles()

参数描述
normal无状态样式（默认）
pressed按下时的样式
disabled禁用时的样式
focused获焦时的样式
clicked被点击时的样式
/*
.stateStyles({
  状态: {
    属性
  }
})
*/

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('文本')
      .width(50)
      .height(50)
      .backgroundColor(Color.Pink)
      .stateStyles({
        pressed: {
          .width(200)
        }
      })
    }
      .padding(20)
  }
}

五、动画 animation

参数描述
duration动画时长 默认1000，单位：毫秒
curve动画曲线 默认Curve.EaseInOut
delay动画延迟播放的时长 ，默认0，单位：毫秒
iterations播放次数 默认1，-1无限循环，0没有动画效果
@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('文本')
        .width(50)
        .height(50)
        .backgroundColor(Color.Pink)
        .stateStyles({
          pressed: {
            .width(200)
          }
        })
        .animation({
          duration: 2000,
          // 速度曲线
          curve: Curve.Linear,
          delay: 1000,
          iterations: -1
        })
    }
    .padding(20)
  }
}

六、 定位

6.1 绝对定位

在父容器左上角开始偏移，实现层叠效果

属性：position({x:水平偏移，y:垂直偏移})

特点：偏移后不占原有位置

Text('绝对定位')
.position({x:0,y:0})

6.2 相对定位

根据自身进行偏移，但会占原来位置

特点：偏移后仍占原有位置

 Text('相对定位')
        .offset({
          x: 10,
          y: 10
        })

七、图形变换

对组件进行平移、旋转、缩放、矩阵变换

7.1 平移

与绝对定位，相对定位的区别：
① translate的移动以自生之前的位置来进行移动
② 要做移动画效果，优先选择translate，原因：性能高效一些
③ translate中的x,y的值如果是百分比，计算的参考值是自身的宽高

组件以左上角为起始点进行平移

在这里插入图片描述

属性：translate({})

参数：{x?:0,y?:0,z?:0}

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image('/images/cat.jpg')//cat.jpg是图片名字
        .height(100)
        .translate({
          x: 0,
          // y: 0
          // z:0
        })
        .stateStyles({
          pressed: {
            .translate({
              x: '50%',
              // y: 100
              // z:100
            })
          }
        })
        .animation({
          duration: 2000
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Gray)
  }
}

7.2 缩放

将图片缩大缩小

属性：scale()

参数： {x?: 1, y?: 1, z?: 1, centerX?: 1, centerY? 1}

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image($r('app.media.startIcon'))
        .height(200)
        .scale({
          x: 1, // x轴不缩放
          y: 1, // y轴不缩放
          centerX: 20, //了解即可
          centerY: 20//了解即可
        })
        .stateStyles({
          pressed: {
            .scale({
              x: 0.8, // x轴缩放到0.8
              y: 0.8, // y轴缩放到0.8
              centerX: 20, //了解即可
              centerY: 20//了解即可
            })
          }
        })
        .animation({
          duration: 1000
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Gray)
  }
}

7.3 旋转

以自身左上角为中心进行旋转

属性：rotate

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

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image($r('app.media.app_icon'))
        .height(200)
        .rotate({
          angle: 0, // 角度：0 -360
          centerX: 20, //改变旋转中心点x位置
          centerY: 20 //改变旋转中心点y位置
        })
        .stateStyles({
          pressed: {
            .rotate({
              angle: 360, // 按压后的角度为360
              centerX: 20, //改变旋转中心点x位置
              centerY: 20 //改变旋转中心点y位置
            })
          }
        })
        .animation({
          duration: 10000, //旋转一圈用时10秒
          iterations: -1, //不停的旋转
          curve: Curve.Linear  // 匀速旋转
        })
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Gray)
  }
}
神秘面具男ll
关注
flex布局（flex容器，flex属性）
weixin_45921263的博客
05-31 1095
文章目录前言一、flex（Flexible Box）概述二、flex容器，flex属性1.flexBox弹性模型2.基本概念详解3.弹性容器的属性4.弹性元素的属性5.圣杯布局6.垂直居中对齐总结 前言 本篇文章中主要归纳flex布局弹性元素的属性和弹性容器的属性，以及使用flex布局制作导航栏。 一、flex（Flexible Box）概述 1.概述：Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。 2.1 任何一个容器都可以指定为flex布局。 .box{
CSS教程：scrollbar的属性知识及样式分类介绍
12-13
在本教程中，我们将深入探讨CSS中与滚动条相关的属性和样式，以及如何通过它们来定制滚动条的外观。 首先，我们要关注的是`overflow`属性。`overflow`属性用于控制内容在元素容器内溢出时的行为。它有两个可选子...
鸿蒙开发3-1 基本组件+通用属性+通用事件
weixin_51267334的博客
01-05 2406
本系列是windows系统下、采用ArkTS语言、ArkUI框架、deveco studio编译器学习纯鸿蒙软件研发，采用API version 9进行。本小节主要了解鸿蒙开发的部分常用组件、属性、事件等。并基于该章结合之前的博客知识点，补充了函数作为参数的传递方式，带有this对象的函数作为参数的传递方式，实现了一个待办事项的Demo及其升级。纯小白，一步步学习，记录一下过程便于查询。
Windows应用程序基础之控件属性及方法
yanshihaooo的博客
08-18 1469
C#常用控件属性及方法介绍 1、窗体（Form） 2、Label (标签)控件 3、TextBox（文本框）控件 4、RichTextBox控件 5、NumericUpDown控件 6、Button（按钮）控件 7、GroupBox（分组框）控件 8、RadioButton（单选按钮）控件 9、CheckBox（复选框）控件 10、ListBox（列表框）控件 11、ComboBox（组合框）控件 12、CheckedListBox（复选列表框）控件 13、PictureBox（图片框）控件 14、Tim
【VUE基础】全网最详细CSS常用基础属性
TT小子的博客
07-12 1384
CSS 指的是层叠样式表* (Cascading Style Sheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中。
css 实用属性穿透样式及修改原生标签样式
weixin_43512977的博客
08-09 1494
css 功能
CSS 基础知识 属性
wgchen
10-19 1467
CSS 基础知识 属性
第5节 - ArkUI基本组件01 - 通用属性
to do , to be .
12-22 1293
组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等。
Flex布局基础及常用样式
qt的博客
03-26 1542
转载阮一峰老师的Flex布局语法和实际开发，已经一些相关的案例 Flex语法 网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: fl
如何定义html基础样式,HTML & CSS 基础
weixin_42486337的博客
06-18 692
HTML 基本结构基本骨架DTD命名空间字符集基本骨架：标签：根标签标签标签：浏览器的内容显示标签：设置页面标题，title关键字可以作为搜索引擎抓取的关键字注意：meta声明的字库，必须和编辑器软件默认的字库相同，否则浏览器在加载时会出现乱码.HTML 常用标签html注释语法：``标题标签：~标题标签为容器级标签，不能互相嵌套，是同级关系书写.由于权重高，内部文字对提高搜索引擎排名非常重要。为...
【微信小程序】组件使用及属性参考
choice~的博客
07-20 7671
小程序组件微信小程序的开发实际上也是前端开发的一种。我们想要开发一个前端程序，首先要做的就是创建美观的页面，然后处理好业务代码。在用户眼中首先会看到的是页面，而不会关心代码的实现，所以在学习前端开发时通常都是先从HTML、CSS入手，再去学习JavaScript。所以，本章先进行小程序组件的讲解。掌握了视图容器组件、内容组件，并学会使用导航组件进行跳转后，我们就可以开始搭建各种页面了。......
VML通用属性.
03-28
**VML特有的通用属性**：例如`strokeweight`定义边框宽度，`strokecolor`定义边框颜色，`stroked`控制边框是否显示，`fillcolor`定义填充颜色，`filled`控制填充是否开启，`print`决定图形是否可打印，`coordsize`...
Firefox和IE通用的三则网站重构实用技巧
12-12
给外边框容器加上overflow:auto的属性，可以解决IE7和FF下的清除浮动问题，但是IE6下不生效，我们需要使用IE的一个私有属性zoom使IE5.5 的浏览器达到外框跟随变化的效果。 　需要注意的几个细节问题，例如我们建立一...
通用css样式
08-26
根据给定文件的信息，我们可以总结出以下关于“通用CSS样式”的关键知识点： ### CSS样式的基础配置 ...这种通用的CSS样式表有助于提高网页开发的效率和一致性，同时也能更好地支持跨浏览器的兼容性。
图结构感知的Transformer：一种新的图表示学习方法
人工智能讲师分享前沿技术
09-22 853
尽管图神经网络（GNNs）在处理图数据方面取得了显著成就，但它们在表达能力和捕获长距离依赖方面存在局限性。为了突破这些局限，研究者们开始探索将Transformer架构应用于图表示学习。在此基础上，瑞士苏黎世联邦理工学院的研究团队提出了一种创新的方法——Structure-Aware Transformer（SAT），旨在通过在自注意力机制中引入基于子图的表示，增强模型对图结构的感知能力，从而在计算注意力时能够显式地考虑节点间的图结构信息。
day01
JiangMeiXue的博客
09-25 246
目录。
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 123
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 698
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 1711
Webpack 打包后文件过大，如何优化？
简洁通用登录界面源代码及CSS样式
"提供了一个通用的登录界面的HTML源代码和CSS样式，设计简洁，易于修改，适用于多种网页和网站的登录及注册页面，适合初学者使用。" 在这个登录界面的源代码中，主要涉及了HTML结构和CSS样式两部分。首先，HTML部分...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值