回复
三、单个组件的布局 原创
亚鲁鲁666
发布于 2024-12-10 21:35
浏览
0收藏
1.设计资源_图标库
1.1 下载图标
https://developer.huawei.com/consumer/cn/design/harmonyos-icon/
1.2 使用图标
后缀为.svg图标可以用fillColor()属性修改颜色并且放大不会失真
HarmonyOS 图标默认命名以** ic_** 开头
2.布局属性
微信个人中心部分区域
组件布局
属性**** | 描述 |
padding | 内边距 |
margin | 外边距 |
boerder | 边框线 |
borderRadius | 边框圆角 |
2.1 内边距 padding
作用：在组件内添加间距，拉开内容与组件边距之间的距离
属性：数字 或 对象
- 数字：上下左右内边距相同
- 对象{}：配合left、right、top、bottom单独设置某个方向内边距
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
Text('月落乌啼霜满天,江枫渔火对愁眠')
.backgroundColor(Color.Red)
.padding(30)
Text('姑苏城外寒山寺,夜半钟声到客船')
.backgroundColor(Color.Yellow)
.padding({
left:10,
right:10,
top:20,
bottom:20
})
}
}
}2.2 外边距 margin
作用：在组件外部添加边距，拉开组件与组件的距离
属性：数字 或 对象
- 数字：上下左右外边距相同
- 对象{}：配合left、right、top、bottom单独设置某个方向内边距
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
Text('月落乌啼霜满天,江枫渔火对愁眠')
.backgroundColor(Color.Red)
.margin(30)
Text('姑苏城外寒山寺,夜半钟声到客船')
.backgroundColor(Color.Yellow)
.margin({
left:10,
right:10,
top:20,
bottom:20
})
}
}
}2.3边框属性
2.3.1四个方向边框相同
属性：border
border有三个参数：{width?: 数字, color?: '', style?: BorderStyle}，
- width：边框宽度，边框宽度默认值为0，即不显示边框
- color：边框颜色
- style：边框样式，
BorderStyle为枚举类型
- Solid：实线（默认）
- Dashed：虚线
- Dotted：点线
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
Text('大王叫我来巡山')
.fontSize(20)
.width(260)
.height(60)
.backgroundColor(Color.Red)
.border({
width:2,
color:Color.Black,
style:BorderStyle.Solid
})
}
}
}2.3.2四个方向边框不同
书写方法：
border({
width:{
left:2,
right:5,
top:8,
bottom:10
},
color:{
},
style:{
}
})2.4 边框圆角 borderRadius
作用：把角变为圆角
属性：数值 或 对象
- 数字：四个角一样圆
- 对象{}：配合{topLeft：左上角、topRight：右上角、bottomLeft：左下、bottomRight：右下角单独设置某个方向内边距
@Entry
@Component
struct Index {
build() {
Column({space: 20}) {
Text('圆角1')
.width(100)
.height(40)
.backgroundColor('#f60')
.borderRadius(5)
// 胶囊状 圆角半径 = 高度 / 2
Text('圆角2')
.width(100)
.height(40)
.backgroundColor('#fc0')
.borderRadius(20)
// 正圆 圆角半径 = 正方形尺寸 / 2
Image($r('app.media.avatar'))
.width(100)
.aspectRatio(1)
.borderRadius(50)
// 四个角半径不同写法
Text('圆角3')
.width(100)
.height(40)
.backgroundColor('#fc0')
.borderRadius({
topLeft: 5,
topRight: 10,
bottomRight: 20,
bottomLeft: 40
})
}
.padding(20)
}
}2.5背景属性
属性 | 描述 |
backgroundColor | 背景色 |
backgroundImage | 背景图 |
backgroundImageSize | 背景图尺寸 |
backgroundImagePosition | 背景图位置 |
2.5.1背景色-backgroundColor
设置组件的背景色
@Entry
@Component
struct Index {
build() {
Column() {
Text('组件')
.width(300)
.height(100)
.backgroundColor(Color.Pink)
}
.padding(20)
}
}组件添加宽高属性或有内容才能观察到背景色
2.5.2背景图-backgroundImage
属性：backgroundImage(背景图地址, 背景图平铺方式 ImageRepeat)
背景图平铺方式:() 默认不平铺
NpRepeat 不平铺
X 横向平铺
Y 纵向平铺
XY 水平垂直均平铺
@Entry
@Component
struct Index {
build() {
Column() {
Text('组件')
.width(300)
.height(100)
.backgroundColor(Color.Pink)
.backgroundImage($r('app.media.flower'))
.backgroundImage($r('app.media.flower'), ImageRepeat.X)
}
.padding(20)
}
}2.5.3背景图尺寸-backgroundImageSize
作用：背景图缩放
属性：<font style="color:rgba(0, 0, 0, 0.9);">backgroundImageSize</font>
参数：
- 设置背景图宽高尺寸：
<font style="color:rgba(0, 0, 0, 0.9);">{width: 数值, height: 数值}</font>（只设置宽或高，另一个尺寸等比例缩放） - 枚举
<font style="color:rgba(0, 0, 0, 0.9);">ImageSize</font>：
- Cover： 等比例缩放背景图至图片完全覆盖组件范围
- Contain：等比例缩放背景图，当宽或高与组件尺寸相同则停止缩放
- Auto： 默认，原图尺寸
@Entry
@Component
struct Index {
build() {
Column() {
Text('组件')
.width(300)
.height(100)
.backgroundColor(Color.Pink)
.backgroundImage($r('app.media.flower'))
.backgroundImageSize({width: 100})
.backgroundImageSize(ImageSize.Cover)
.backgroundImageSize(ImageSize.Contain)
}
.padding(20)
}
}2.5.4背景图位置-backgroundImagePosition
作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角
属性：backgroundImagePosition()
参数：
- 位置坐标：
{x: 位置, y: 位置} - 枚举
Alignment
名称 | 描述 |
TopStart | 顶部起始端（默认位置） |
Top | 顶部横向居中 |
TopEnd | 顶部尾端 |
Start | 起始端纵向居中 |
Center | 居中 |
End | 尾端纵向居中 |
BottomStart | 底部起始端 |
Bottom | 底部横向居中 |
BottomEnd | 底部尾端 |
@Entry
@Component
struct Index {
build() {
Column() {
Text('组件')
.width(300)
.height(100)
.backgroundColor(Color.Pink)
.backgroundImage($r('app.media.flower'))
.backgroundImagePosition({x: 100, y: 50})
.backgroundImagePosition(Alignment.Center)
}
.padding(20)
}
}2.6颜色渐变
2.6.1线性渐变
作用: 设置组件颜色直线方向的渐变效果
属性: linearGradient({ 对象})
.linearGradient({
//direction与angle设置一个就行了
angle?: 线性渐变的起始角度取值范围为(0-360)。默认180°_垂直向下方向
direction?: 线性渐变的方向,
colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
repeating?: 是否重复着色
})-
<font style="color:rgba(0, 0, 0, 0.9);">angle</font>：线性渐变的起始角度取值范围为(0-360)。
0度垂直向上方向，顺时针旋转为正向角度，默认值：180
-
<font style="color:rgba(0, 0, 0, 0.9);">direction</font>: 线性渐变的方向，设置 angle 后direction不生效，值为 枚举类型<font style="color:rgba(0, 0, 0, 0.9);">GradientDirection</font>
- Left：从右向左
- Top：从下向上
- Right：从左向右
- Bottom：从上向下
- LeftTop：从右下 到 左上
- LeftBottom：从右上 到 左下
- RightTop：从左下 到 右上
- RightBottom：从左上 到 右下
@Entry
@Component
struct Index {
build() {
Column({ space: 10}) {
Text('线性')
.width(100).height(50).backgroundColor(Color.Pink)
.linearGradient({
direction: GradientDirection.Right,
colors: [['red', 0.1], ['#fc0', 0.8]]
})
}
.padding(20)
}
}2.6.2径向渐变
作用: 设置组件颜色圆形发散的渐变效果
属性: radialGradient（{}）
.radialGradient({
center: 径向渐变的中心点坐标,
radius: 径向渐变的半径,
colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
repeating?: 是否重复着色
}）-
center：径向渐变的中心点，即相对于当前组件左上角的坐标，写法<font style="color:rgba(0, 0, 0, 0.9);">[x坐标, y坐标]</font>
@Entry
@Component
struct Index {
build() {
Column({ space: 10}) {
Text('径向')
.width(100).height(50).backgroundColor(Color.Pink)
.radialGradient({
center: [40, 0],
radius: 40,
// colors: [['red', 0.1], ['#fc0', '0.8']],
colors: [
['rgba(255, 255, 255, 0.6)', 0],
['rgba(255, 255, 255, 0)', 1]
]
// repeating:true
})
}
.padding(20)
}
}2.7 阴影
作用: 为组件添阴影效果, 使组件视觉上更立体
属性: shadow()
参数: {}
shadow({
radius: 模糊半径,
type?: 阴影类型,
color?: 阴影颜色,
offsetX?: X轴偏移,
offsetY?: Y轴偏移,
fill?: 是否内部填充
})
import { colorSpaceManager } from '@kit.ArkGraphics2D';
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
Text('阴影')
.width(200)
.height(200)
.shadow({
radius:50,//阴影角度半径
color:'rgba(122.122.122.0.5)',//阴影颜色
offsetX:10,//阴影水平向右偏移
offsetY:10,//阴影垂直向下偏移
fill:false//填充效果
})
}
.height('100%')
.width('100%')
.backgroundColor('#eee')
.padding(50)
}
}2.9 案例 - 华为商品卡片
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column() {
Column(){
Image($r('app.media.all_x5'))
.width(150)
Text('HUAWEI Mate X5')
.width('100%')
.fontWeight(800)
.margin(15)
Text('¥12999起')
.fontSize(12)
.width('100%')
.margin(5)
Row(){
Row(){
Text('了解更多')
.fontSize(12)
Image($r('app.media.ic_public_arrow_right'))
.width(13)
}.margin({right:20})
Row(){
Text('购买')
.fontSize(12)
Image($r('app.media.ic_public_arrow_right'))
.width(13)
}
}.width('100%').margin({top:10,bottom:10})
}.width(200)
.shadow({radius:20,color:Color.Grey})
.borderRadius(8)
.margin(20)
.backgroundColor(Color.White)
.padding(10)
}
.height('100%')
.width('100%')
.backgroundColor('#eee')
}
}©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
标签
已于2024-12-12 22:39:33修改
赞
收藏
回复
相关推荐
