【鸿蒙开发 day12】

news/2025/1/15 17:27:19/

鸿蒙开发-布局进阶

  • 一.定位
      • 1.绝对定位
      • 2.相对定位
      • 3.定位案例-VIP
  • 二.Z序控制
  • 三.层叠布局
  • 四.bilibili卡片案例
  • 五.list列表容器组件
      • 滚动条状态
      • 列表分割线
  • 六.通用属性
  • 七.动画
  • 八.图形变换
      • 1.平移
      • 2.定位结合平移实现精准定位
      • 3.旋转和缩放
  • 九.总结

一.定位

  • 作用：改变组件位置
    分类：

1.绝对定位

  • position，相对父组件左上角进行偏移
  • 设置百分比,是相对父组件的大小来计算的
  • 绝对定位后的组件不在占用原有位置
    相对定位：offset，相对自身左上角进行偏移
    在这里插入图片描述

2.相对定位

属性：offset()
参数：{x: 水平偏移量, y: 垂直偏移量}
偏移量取值
数字，单位是vp

  • 参照自身原来位置进行偏移
  • 百分比是相当父组件的的尺寸计算结果
  • 不会脱标,占据原来的位置
    在这里插入图片描述

3.定位案例-VIP

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Column() {Column(){Image($r('app.media.moco')).syncLoad(true).borderRadius(10).width('100%')Row(){Image($r('app.media.ic_device_earphone_roc_filled')).height( 30).width(30).backgroundColor('#49bafb').borderRadius(15).padding(5).fillColor('#fff')Text('飞狗MOCO').fontSize(18).fontWeight(700).margin({left:10})}.width('100%').padding({left:10,top:5,bottom:10})//vipText('vip').width(40).height(20).fontWeight(600).fontStyle(FontStyle.Italic).backgroundColor('#e39443').borderRadius({topLeft:10,bottomRight:10}).fontColor('#fff').position({x:0,y:0}).textAlign(TextAlign.Center).border({width:2,color:'rgba(255, 255, 255,0.5)'}).fontSize(14)}.width(200).height(320).shadow({radius:30}).borderRadius(10)}}
}

运行结果:
在这里插入图片描述

二.Z序控制

定位后的组件，默认后定义的组件在最上面显示，可以通过 zIndex 属性调整显示层级
属性：zIndex(数字)
特点：取值为整数数字，取值越大，显示层级越高
在这里插入图片描述

三.层叠布局

  • 布局容器stack

  • 子组件会层叠到一起,越往后的子组件层级越高

  • 改变子组件的层级Zindex(数字),和前面定位使用的方式一致,给子组件设置提高子组件的层级

  • 数字越大,层级越高

  • alignContent:alignment枚举,这个是设置stack中子组件的对齐方式- 默认垂直水平居中

  • 当有两个子组件,其中有一个子组件位置摆放有规律

  • 层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过 Stack 容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。
    层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
    在这里插入图片描述

四.bilibili卡片案例

代码实现

@Entry
@Component
struct Index {build() {Column() {Column() {//上Stack({ alignContent: Alignment.TopStart }) {Image($r('app.media.tieyi')).borderRadius({topLeft:10,topRight:10}).width(300)Stack({ alignContent: Alignment.BottomStart }) {Row() {Row({ space: 10 }) {Image($r('app.media.ic_bofangshu')).width(35).fillColor('#fff')Text('282万').fontColor('#fff').fontWeight(600)}.margin({ left: 10, right: 10 })Row({ space: 10 }) {Image($r('app.media.ic_ziyuan')).width(35).fillColor('#fff')Text('8655').fontColor('#fff').fontWeight(600)}.layoutWeight(1)Text('14:33').fontColor('#fff').margin({ right: 10 }).fontWeight(600)}}.width('100%').height('55%')}.width(300)//下面Column(){Text('【凤凰传奇新歌】欢迎来到国风统治区:唢呐一响神曲《铁衣法发顺丰五千人过去').fontSize(20).fontWeight(600).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(2)Row(){Text('19万点赞').backgroundColor('#ffdbc7').fontColor('#be7a6b').borderRadius(5).padding(5)Image($r('app.media.ic_gengduo')).width(25).fillColor('#ccc')}.margin({top:20,left:10,right:10}).width('100%').justifyContent(FlexAlign.SpaceBetween)}.padding({top:5,left:10,right:10,bottom:20})}.width(300).height(280).backgroundColor('#fff').borderRadius(10).shadow({ radius: 20 })}.width('100%').height('100%')// .backgroundColor('#999').padding(10)}
}

运行结果:
在这里插入图片描述

五.list列表容器组件

  • list组件里面只能放listItem子组件
  • list的子组件间距相同可以用space设置
  • listItem里面只能放一个根组件
  • 滚动效果:当子组件的尺寸大于父组件list的尺寸,默认会出现垂直滚动的效果
  • list组件的主轴默认是垂直方向
  • 可以使用listdirection设置滚动的方向,
  • 里面有个axis枚举,horizontal是水平滚动,vertical是默认的垂直滚动
  • 垂直滚动
@Entry
@Component
struct Index {build() {List(){ListItem(){}.width(300).height(100).backgroundColor(Color.Blue)ListItem(){}.width(300).height(100).backgroundColor(Color.Orange)ListItem(){}.width(300).height(100).backgroundColor(Color.Red)ListItem(){}.width(300).height(100).backgroundColor(Color.Gray)}.width('100%').height(300).backgroundColor(Color.Pink)}
}

水平滚动:我们只需要改变list组件的滚动方向,使用listDirection(axis.Horizontal)

滚动条状态

属性: .scrollBar(BarState.)
参数枚举: BarState

  • on 一直显示
  • off 关闭滚动条
  • auto 显示,两秒后消失

列表分割线

  • 列表默认没有分割线
  • 属性：divider()
  • 参数：{ strokeWidth: 数字， color?: ‘color’, startMargin?: 数字, endMargin?: 数字 }
    在这里插入图片描述

六.通用属性

属性：stateStyles()

  • 如果点击后样式,在点击前里面不具备,那么此样式会复制到点击前样式里面,导致不可恢复原样
  • 通用属性可以在多态样式改变样式
  • 参数 描述
    normal 组件无状态时的样式（默认状态）
    pressed 组件按下状态的样式
    disabled 组件禁用状态的样式
    focused 组件获焦状态的样式
    clicked 组件点击状态的样式
@Entry
@Component
struct Index {build() {Column(){Text('文字').width(100).height(120).backgroundColor(Color.Gray).stateStyles({clicked:{.width(120).height(140).backgroundColor(Color.Pink)}})}}
}

七.动画

  • 动画属性:animation
  • 动画属性只能给通用属性使用
  • 动画属性要写在其他属性后面
  • 支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
  • duration 设置动画时长。
    默认值：1000
    单位：毫秒
  • curve 设置动画曲线
    默认值：Curve.EaseInOut
  • delay 设置动画延迟执行的时长。
    默认值：0，不延迟播放。
    单位：毫秒
  • iterations 设置播放次数。
    默认值：1
    设置为-1时表示无限次播放。设置为0时表示无动画效果。
  • 代码演示
@Entry
@Component
struct Index {build() {Column(){Text('文字').width(100).height(50).backgroundColor(Color.Orange)//设置通用属性.stateStyles({clicked:{.height(300)}})//设置动画.animation({//设置动画时长duration:1000,//动画速度曲线curve:Curve.Linear,//动画延迟delay:1000,//动画播放次数(-1是无限播放)iterations:1})}}
}

八.图形变换

1.平移

属性:translate

  • 百分比取值相对自身尺寸计算结果
  • 作用：可使组件在以组件左上角为坐标原点的坐标系中进行移动
@Entry
@Component
struct Index {build() {Column() {Text('文字').width(100).height(50).backgroundColor(Color.Orange).translate({ x: 0, y: 0 })//设置通用属性.stateStyles({clicked: {// .translate({x:100,y:100})// .translate({x:'50%',y:0}).translate({ x: 0, y: '50' })}})//设置动画.animation({})}}
}

2.定位结合平移实现精准定位

@Entry
@Component
struct Index {
build() {
Column() {
Text(‘文字’)
.width(‘100%’)
.height(50)
.backgroundColor(Color.Orange)
//将文字区域定位到底部正中心
// .position({x:‘50%’,y:‘100%’})
// .translate({ x:‘-50%’, y:‘-100%’ })//设置通用属性

      //组件宽度100%,设置到底部.position({x:0,y:'100%'}).translate({x:0,y:'-100%'})//设置动画.animation({})
}

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

3.旋转和缩放

  • 旋转
    属性:rotate()
    参数: {angle:角度}

  • 缩放
    属性scale()
    参数:{x:数字,y:数字}
    数字大于1代表放大,数字小于1代表缩小

@Entry
@Component
struct Index {build() {Column() {Text('文字').width(100).height(100).backgroundColor(Color.Orange)//旋转.rotate({angle:0})//缩放.scale({x:1,y:1})//鼠标点击.stateStyles({clicked:{.rotate({angle:360}).scale({x:1.5,y:1.5})}})//设置动画.animation({})}.width('100%')}
}

九.总结

本章主要还是学习一个常用的布局方式,这些布局方式都有它对应的应用场景,比如列表组件,stack层叠组件,还学习了我们的定位(相对定位和绝对定位),以及在我们使用层序布局和定位产生层叠效果时,为提高组件层级,会使用Zindex控制,也学习了常用的通用属性,图形变换知识点,在我们页面布局中起了很大作用


http://www.ppmy.cn/news/1525935.html

相关文章

机器学习-------数据标准化

机器学习-------数据标准化

什么是归一化，它与标准化的区别是什么？ 一 作用 在做训练时，需要先将特征值与标签标准化，可以防止梯度防炸和过拟合； 将标签标准化后，网络预测出的数据是符合标准正态分布的—StandarScaler()&#xff0c…
阅读更多...
setImmediate() vs setTimeout() 在 JavaScript 中的区别

setImmediate() vs setTimeout() 在 JavaScript 中的区别

setImmediate() vs setTimeout() 在 JavaScript 中的区别 在 JavaScript 中，setImmediate() 和 setTimeout() 都用于调度任务，但它们的工作方式不同。 JavaScript 的异步特性 JavaScript 以其非阻塞、异步行为而闻名，尤其是在 Node.js 环境…
阅读更多...
[000-002-01].第03节：Linux系统下Oracle的安装与使用

[000-002-01].第03节：Linux系统下Oracle的安装与使用

2.1.Docker安装Oracle 在CentOS7中使用Docker安装Oracle： 1.安装Docker,详细请参考：https://blog.csdn.net/weixin_43783284/article/details/1211403682.拉取镜像： docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g3.下载…
阅读更多...
用Blender来烘培模型材质

用Blender来烘培模型材质

通常我们在做三维设计，游戏开发的时候，经常需要从网上下载一些3D模型，这些模型采用的材质分辨率通常都不一样，而我们从性能考虑，需要对材质进行统一的处理，例如把材质都统一为2K的分辨率。 我们可以在Blen…
阅读更多...
105页PPT：华为ISC集成供应链变革、模式与方法解析

105页PPT：华为ISC集成供应链变革、模式与方法解析

105页PPT:华为ISC变革、模式与方法PPT,下载链接见文末~ 华为ISC（Integrated Supply Chain，集成供应链）规划管理与变革是华为公司战略转型和提升核心竞争力的关键举措之一。通过多年的努力与实践，华为已经成功构建了一个高效、协同…
阅读更多...
怎么把网站设置成HTTPS访问？

怎么把网站设置成HTTPS访问？

有很多的网站尤其是公司网站都是可以HTTPS访问的，而且在地址栏前面还会显示安全锁，这就是HTTPS证书所起到的作用。没有安装HTTPS证书的网站强制用HTTPS访问会被浏览器提醒不安全。那么我们怎么解决这个问题呢？ 解决办法 一：首先…
阅读更多...
Unity的Button组件进行扩展

Unity的Button组件进行扩展

废话不多说，在Untiy中，如果想要对Button等组件进行扩展的话，那么不仅仅只需要将新增的属性设置为public或者增加SerializeField字段就行了的，同时需要对Inspector的GUI面板进行修改，以下直接展示代码： using UnityEngine; using UnityEngine.EventSystems; using UnityE…
阅读更多...
17、电科院FTU检测标准学习笔记-录波性能

17、电科院FTU检测标准学习笔记-录波性能

作者简介： 本人从事电力系统多年，岗位包含研发，测试，工程等，具有丰富的经验 在配电自动化验收测试以及电科院测试中，本人全程参与，积累了不少现场的经验 ———————————————————…
阅读更多...
最新文章

Copyright @ 2022~2023