鸿蒙开发-布局进阶
- 一.定位
- 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控制,也学习了常用的通用属性,图形变换知识点,在我们页面布局中起了很大作用
![[通信原理]绪论2：信息量 × 信息熵](https://i-blog.csdnimg.cn/direct/1eb1b28eb23d4fd0a4072f2cbf85a5c1.jpeg)
