程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java相关开发、嵌入式、鸿蒙开发、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴！君志所向,一往无前！
1.布局综合实践
区域划分：
● 图片区域（层叠布局）
○ 图片组件
○ 文字内容：播放 + 评论 + 时长（Flex 布局）
● 文字区域
○ 标题文字
○ 点赞量 + 更多
@Entry
@Component
struct Index6{
build() {
Column(){
Column() {
// 图片区域 -- 层叠布局
Stack({ alignContent: Alignment.BottomStart}) {
// 图片组件
Image($r('app.media.ty'))
.width("98%")
.height(125)
.objectFit(ImageFit.Cover)
.borderRadius({
topLeft: 10,
topRight: 10
})
// 文字内容
Row() {
// 播放量
Row({ space: 5}) {
Image($r('app.media.bf'))
.width(16)
.fillColor('#fff')
Text('282万')
.fontColor('#fff')
.fontSize(12)
}
.margin({right: 5})
// 评论数
Row({ space: 5}) {
Image($r('app.media.pl'))
.fillColor('#fff')
.width(14)
Text('8655')
.fontColor('#fff')
.fontSize(12)
}
// 空白填充组件
Blank()
// 右侧时长
Text('4:33')
.fontColor('#fff')
.fontSize(12)
}
.width('100%')
.height(24)
.padding({left: 5, right: 5})
}
// 文字区域
Column() {
// 标题文字
Text('【凤凰传奇新歌】欢迎来到国风统治区：唢呐一响神曲《铁衣流派推广曲》')
.fontSize(13)
.textOverflow({overflow: TextOverflow.Ellipsis})
.maxLines(2)
.lineHeight(16)
// 点赞更多
Row(){
Text('19万点赞')
.padding(3)
.backgroundColor('#fef0ef')
.fontSize(10)
.fontColor('#e66c43')
Image($r('app.media.gd'))
.width(14)
.fillColor('#bfbfbf')
}
.width('100%')
.margin({top: 10})
.justifyContent(FlexAlign.SpaceBetween)
}
.padding(5)
}
.width("80%")
.height(200)
.padding(4)
.backgroundColor('#fff')
.borderRadius(10)
.borderColor(Color.Red)
.borderWidth(1)
}
.width('100%')
.height('100%')
.backgroundColor('#f5f6f7')
.padding(10)
}
}
2 定位
2.1 定位概述
作用：改变组件位置
分类：
● 绝对定位：position，相对父组件左上角进行偏移
● 相对定位：offset，相对自身左上角进行偏移
2.2 绝对定位
属性：position()
参数：{x: 水平偏移量, y: 垂直偏移量}
偏移量取值
● 数字，单位是vp
● 百分比，参照父组件尺寸计算结果
Column() {
Text('绝对定位')
.width(80)
.height(40)
.backgroundColor(Color.Pink)
.position({
x: 0,
y: 0
})
}
.width('100%')
.height(200)
.backgroundColor('#ccc')
亲，谨记：绝对定位特点：
- 参照父组件左上角进行偏移
- 绝对定位后的组件不再占用自身原有位置
2.3 相对定位
属性：offset()
参数：{x: 水平偏移量, y: 垂直偏移量}
偏移量取值
● 数字，单位是vp
● 百分比，参照父组件尺寸计算结果
Column() {
Text("相对定位")
.width(80)
.height(40)
.backgroundColor(Color.Pink)
Text('程序员Feri')
.width(80)
.height(40)
.backgroundColor(Color.Orange)
// 占位
.offset({
x: 100,
y: -30
})
Text('求关注')
.width(80)
.height(40)
.backgroundColor(Color.Brown)
}
.width('100%')
.height(200)
.backgroundColor('#ccc')
相对定位特点：
- 相对自身左上角进行偏移
- 相对定位后的组件仍然占用自身原有位置
3 通用属性
3.1 多态样式
属性：stateStyles()
/*
.stateStyles({
状态: {
属性
}
})
*/
@Entry
@Component
struct Index {
build() {
Column() {
Text('多态样式')
.width(100)
.height(50)
.backgroundColor(Color.Pink)
.stateStyles({
clicked: {
.width(200)
.height(100)
}
})
}
.padding(20)
}
}
3.2 动画 animation
组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。
支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
属性：animation
参数： {}
import curves from '@ohos.curves'
@Entry
@Component
struct Index {
build() {
Column() {
Text('文本')
.width(50)
.height(50)
.backgroundColor(Color.Pink)
.stateStyles({
pressed: {
.width(300)
}
})
.animation({
duration: 3000,
// 速度曲线
curve: curves.springMotion(),
delay: 1000,
iterations: -1
})
}
.padding(20)
}
}
亲，记得长按哈，你就会发现真的很有趣
4.图形变换
用于对组件进行平移、旋转、缩放、矩阵变换等操作。
4.1 平移
作用：可使组件在以组件左上角为坐标原点的坐标系中进行移动
属性：translate()
参数：{x?: X轴移动距离, y?: Y轴移动距离, z?: Z轴移动距离}
import curves from '@ohos.curves'
@Entry
@Component
struct Index {
build() {
Column() {
Image($r('app.media.startIcon'))
.width(200)
.aspectRatio(1)
.stateStyles({
normal: {
.translate({x: 0})
},
pressed: {
.translate({x: 100})
}
})
.animation({
curve: curves.springMotion()
})
}
.padding(20)
}
}
按一下就会有惊喜出现哈
4.2 缩放
作用：分别设置X轴、Y轴、Z轴的缩放比例，默认值为1
属性：scale(),
参数： {
x?: X轴缩放比例,
y?: Y轴缩放比例,
z?: Z轴缩放比例,
centerX?: Y轴中心点坐标,
centerY? Y轴中心点坐标
}
import curves from '@ohos.curves'
@Entry
@Component
struct Index {
build() {
Column() {
Image($r('app.media.background'))
.width(200)
.aspectRatio(1)
.stateStyles({
normal: {
.scale({x:1, y: 1})
},
pressed: {
.scale({x: 0.8, y: 0.8})
}
})
.animation({
curve: curves.springMotion()
})
}
.padding(20)
}
}
按一下，好运连连
4.3 旋转
作用：可使组件在以组件左上角为坐标原点的坐标系中进行旋转
属性：rotate()
参数：{
angle: 旋转角度,
centerX?: Y轴中心点坐标,
centerY? Y轴中心点坐标
}
import curves from '@ohos.curves'
@Entry
@Component
struct Index {
build() {
Column() {
Image($r('app.media.startIcon'))
.width(200)
.aspectRatio(1)
.stateStyles({
normal: {
.rotate({angle: 0})
},
pressed: {
.rotate({angle: 60})
}
})
.animation({
curve: curves.springMotion()
})
}
.padding(20)
}
}
好了，就到这吧，今天结束，美满的一天！
