回复
五、组件的多层布局 原创
亚鲁鲁666
发布于 2024-12-10 21:37
浏览
0收藏
1.定位
作用: 改变组件的位置
分类: 绝地定位 和 相对定位
1.1绝对定位属性-position({})
作用: 控制组件位置, 可实现层叠效果
特点:
- 1.参照父组件的左上角进行偏移
- 2.绝对定位后的组件,不在占用自身的原有位置
语法: .position({ 接收的是一个对象 })
参数 { x:50,y:50 } 或 {x:50%,y:50%}, 都是参照父组件
.position({
x:100,
y:60
})
.zlndex(1).zIndex层级(数字),取值为整数, 数值约到层级越高
1.2相对定位-offset({})
作用: 移动组件
特点:
- 相对自身左上角进行偏移
- 相对定位后组件奶然占据自身原有位置
语法: .offset({ 接收的是一个对象 })
参数: { x:50,y:50 } , 参照自身位置移动50px 或
{x:50%,y:50%}, 参照自身位置, 移动的大小为父组件的百分之多少
绝对定位不嫩一次相对定位组合使用, 绝对定位但可以与 translate({})平移组合使用
1.3 Z序控制
作用: 定位后的组件, 默认后定义的组件在最上面显示, 可以通过zIndex属性调整显示层级
属性: zIndex(数字)
特点: 取值为整数, 取值越大, 显示层级越高
没设置zIndex()的组件默认为0
2.**Stack-**层叠布局
绝对定位属性-.position({})更适合某一个组件实现层叠
层叠布局组件-Stack({}){}更适合对一组组件实现层叠
2.1基本使用
Stack组件是可实现内部各种子元素堆叠效果的容器组件, 默认是居中对齐.
场景: 卡片层叠效果等
Stack()层叠布局的由于层叠特性所以每个子组件都可以扩大到父组件能扩大到最大的空间
层叠布局组件:Stack(){}
Stack({
alignContent:Alignment.XXX //层叠布局组件在父组件中的位置
}){
Item1
Item2
Item3 //越往下显示层级越高,也可用zIndex()手动调整组件的显示级
}
import { colorSpaceManager } from '@kit.ArkGraphics2D';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Column(){
//层叠布局组件Stack
Stack({
//alignContent: Alignment.xxx枚举 层叠布局组件在父组件中的位置
alignContent: Alignment.Top
}){
Text('Item1')
.backgroundColor(Color.Pink)
.width(200)
.height(200)
Text('Item2')
.backgroundColor(Color.Blue)
.width(120)
.height(120)
Text('Item3')
.backgroundColor(Color.Yellow)
.width(80)
.height(80)
}
.width(300)
.height(400)
.backgroundColor(Color.Green)
}
.padding(50)
.width('100%')
.height('100%')
.backgroundColor('#eee')
}
}2.2堆叠的对齐方式
参数: alignContent
取值: 枚举 Alignment.
3.Badge-角标组件
3.1.Badge-角标组件的基本用法
注意: Badge 角标组件的效果 , 可以由绝对定位 position 实现 , 但不省力
@Entry
@Component
struct Index {
build() {
Column() {
//Badge角标组件,Badge({这里写角标参数}){这里写要显示角标的组件}
Badge({
//角标数字
count:1,
//角标显示位置
position:BadgePosition.RightTop,
//角标样式
style:{
fontSize:14,
badgeSize:20,
badgeColor:'#fa2a2d'
}
}){
//拥有这个角标的组件
Image($r('app.media.img_04'))
.width('100%')
}
}
}
}4.通用属性
4.1组件的多态样式-stateStyles()
属性：stateStyles()
组件的多态(多态: 就是多种状态)支持宽,高,背景色, 字体大小和颜色不支持
参数 | 描述 |
normal (默认状态) | 组件无状态时的样式（默认状态） |
pressed | 组件按下状态的样式 |
disabled | 组件禁用状态的样式 |
focused | 组件获焦状态的样式 |
clicked | 组件点击状态的样式 |
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
}
.width(200)
.height(200)
.backgroundColor(Color.Pink)
.margin(20)
.borderRadius({ topLeft: 8, topRight: 8 })
//come here
.stateStyles({
//按压改变组件大小
pressed: {
.width(300)
},
//点击改变组件大小
clicked: {
.width(300)
}
})
}
}4.2动画animation
组件的某些通用属性变化时, 可以通过属性动画实现渐变
属性: animation({ })
参数 | 描述 |
duration | 设置动画时长。 默认值：1000 单位：毫秒 |
curve | 设置动画曲线 默认值： |
delay | 设置动画延迟执行的时长。 默认值：0，不延迟播放。 单位：毫秒 |
iterations | 设置播放次数。 默认值：1 设置为-1时表示无限次播放。设置为0时表示无动画效果。 |
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
}
.width(200)
.height(200)
.backgroundColor(Color.Pink)
.margin(20)
.borderRadius({ topLeft: 8, topRight: 8 })
.stateStyles({
//按压改变组件大小
pressed: {
.width(300)
},
})
//添加动画属性, 参数是一个对象
.animation({
duration:1500, //动画时长
curve:Curve.FastOutSlowIn, //设置动画曲线
delay :500, //动画延迟时间
iterations:2 //动画重复次数
})
//添加了animation后有没有动画还要确认,初始值或默认值有没有变化
}
}4.3图形变换
用于对组件惊醒平移, 旋转, 缩放, 矩阵变换等操作
4.3.1平移
作用: 使组件在以组件左上角为坐标原点的进行移动, translate的百分数参照自身移动
属性: translate()
参数: {x?: X轴移动距离, y?: Y轴移动距离, z?: Z轴移动距离}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Row() {
Column() {
Image($r('app.media.img_4'))
.width(200)
.stateStyles({
normal: {
.translate({x: 0,y:50})
},
pressed: {
.translate({x: 120})
}
})
.animation({
curve: Curve.EaseInOut
})
}
.padding(20)
}
.width('100%')
}
}4.3.2缩放
作用：分别设置X轴、Y轴、Z轴的缩放比例，默认值为1
属性：<font style="color:rgba(0, 0, 0, 0.9);">scale()</font>,
参数： {x?: X轴缩放比例, y?: Y轴缩放比例, z?: Z轴缩放比例, centerX?: X轴中心点坐标, centerY? Y轴中心点坐标}
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Row() {
Column() {
Image($r('app.media.img_4'))
.width(20)
.stateStyles({
normal: {
.scale({x:1,y:1})
},
pressed: {
// .scale({x: 10,y:10})
.scale({x: 1.1,y:1.1,centerX:100})
}
})
.animation({
curve: Curve.EaseInOut
})
}
.padding(20)
.justifyContent(FlexAlign.End)
.backgroundColor(Color.Pink)
}
.width('100%')
}
}4.3.3旋转
作用：可使组件在以组件左上角为坐标原点的坐标系中进行旋转
属性：rotate()
参数：{angle: 旋转角度, centerX?: Y轴中心点坐标, centerY? Y轴中心点坐标}
import curves from '@ohos.curves'
@Entry
@Component
struct Index {
build() {
Column() {
Image($r('app.media.cat'))
.width(200)
.aspectRatio(1)
.stateStyles({
normal: {
.rotate({angle: 0})
},
pressed: {
.rotate({angle: 60})
}
})
.animation({
curve: curves.springMotion()
})
}
.padding(20)
}
}©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
标签
已于2024-12-12 22:48:59修改
赞
收藏
回复
相关推荐
