1.布局属性
微信顶部区域演示
组件布局
属性 | 描述 |
---|---|
padding | 内边距 |
margin | 外边距 |
border | 边框线 |
borderRadius | 边框圆角 |
1.1内边距
作用:在组件间添加内边距 ,拉开内容和组件边缘之间的距离
less
@Entry
@Component
struct Index {
build() {
Column() {
Text('文本')
.fontSize(50)
.backgroundColor(Color.Pink)
}
.width('100%')
.height('100%')
}
}
添加前后示例图片:
less
@Entry
@Component
struct Index {
build() {
Column() {
Text('文本')
.fontSize(50)
.backgroundColor(Color.Pink)
.padding(30) //添加内边距30
}
.width('100%')
.height('100%')
}
}
用法:
属性:数字 或 对象{}
数字:上下左右内边距都相同
对象{}:可以配合left、right、top、bottom单独设置某一个方向边距
示例演示:
1.2外边距
作用:在组件外面添加边距,拉开两个组件之间的距离 示例图片
用法: 属性:数字 或 对象{}
数字:上下左右内边距都相同
对象{}:可以配合left、right、top、bottom单独设置某一个方向边距
示例演示:
less
@Entry
@Component
struct Index {
build() {
Column() {
Text('文本')
.fontSize(50)
.backgroundColor(Color.Yellow)
Text('文本')
.fontSize(50)
.backgroundColor(Color.Green)
.margin({
left:10,
right:30,
top:60,
bottom:90
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
}
}
添加外边距前后演示图:
1.3边框属性
作用:给组件添加边界,进行装饰美化
1.3.1四个边框属性相同
示例图片:
属性:border()
参数:{width?: 数字, color?: '', style?: BorderStyle}
,
- width:边框宽度,边框宽度默认值为0,即不显示边框
- color:边框颜色
- style:边框样式,
BorderStyle
为枚举类型
-
- Solid:实线(默认)
- Dashed:虚线
- Dotted:点线
示例代码:
less
@Entry
@Component
struct Index {
build() {
Column() {
Text('边框线')
.width(100)
.height(40)
.textAlign(TextAlign.Center)
// 黑色 实线 边框
.border({width: 1})
// 红色 实线 边框
.border({width: 1, color: 'red'})
// 红色 虚线 边框
.border({width: 1, color: 'red', style: BorderStyle.Dashed})
}
.padding(20)
}
}
1.3.2四个边框属性不相同
写法:
css
.border({
width: {},
color: {},
style: {}
})
示例图片:
less
@Entry
@Component
struct Index {
build() {
Column() {
Text('边框线')
.width(100)
.height(40)
.textAlign(TextAlign.Center)
// 边框 - 四个方向效果不同
.border({
width: {left: 1, top: 3, right: 5, bottom: 7},
color: {left: 'red', top: '#ff0', right: '#f60', bottom: '#ccc'},
style: {top: BorderStyle.Dashed, right: BorderStyle.Dotted}
})
}
.padding(20)
}
}
1.3.3边框圆角
默认情况下是没有原圆框效果的,需要编码设置
属性:borderRadius(圆角半径)
参数:数值 或 { }
- topLeft:左上角
- topRight:右上角
- bottomLeft:左下角
- bottomRight:右下角
php
组件()
//语法1:给四个角设置相同值
.borderRadius(圆角半径数值)
//语法2:给四个角单独设值
.borderRadius({
topLeft: 左上角半径数值,
topRight: 右上角半径数值,
bottomLeft: 左下角半径数值,
bottomRight: 右下角半径数值
})
示例图片:
注意:如果不单独设置某个边框半径,直接设置数值,四个圆角半径相同
2.背景属性
属性 | 描述 |
---|---|
backgroundColor | 背景色 |
backgroundImage | 背景图 |
backgroundImageSize | 背景图尺寸 |
backgroundImagePosition | 背景图位置 |
2.1背景颜色
less
@Entry
@Component
struct Index {
build() {
Column() {
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
}
}
2.2背景图片
属性:backgroundImage(背景图地址, 背景图平铺方式 ImageRepeat)
背景图平铺方式:(可省略)
- NoRepeat:不平铺,默认值
- X:水平平铺
- Y:垂直平铺
- XY:水平垂直均平铺
less
@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) //沿着x平铺
}
.padding(20)
}
}
2.3背景缩放
作用:背景图缩放
属性:backgroundImageSize
参数:
- 设置背景图宽高尺寸:
{width: 数值, height: 数值}
(只设置宽或高,另一个尺寸等比例缩放) - 枚举
ImageSize
:
-
- Cover:等比例缩放背景图至图片完全覆盖组件范围
- Contain:等比例缩放背景图,当宽或高与组件尺寸相同则停止缩放
- Auto:默认,原图尺寸
less
@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.4背景位置
作用:调整背景图在组件内的显示位置,默认显示位置为组件左上角
属性:backgroundImagePosition()
参数:
- 位置坐标:
{x: 位置, y: 位置}
- 枚举
Alignment
名称 | 描述 |
---|---|
TopStart | 顶部起始端(默认位置) |
Top | 顶部横向居中 |
TopEnd | 顶部尾端 |
Start | 起始端纵向居中 |
Center | 居中 |
End | 尾端纵向居中 |
BottomStart | 底部起始端 |
Bottom | 底部横向居中 |
BottomEnd | 底部尾端 |
less
@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)
}
}
3.颜色渐变
3.1线性渐变
属性:linearGradient()
参数:
ini
{
angle?: 线性渐变的起始角度,
direction?: 线性渐变的方向,
colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
repeating?: 是否重复着色
}
angle
:线性渐变的起始角度。0点方向顺时针旋转为正向角度,默认值:180direction
: 线性渐变的方向,设置 angle 后不生效,值为 枚举类型GradientDirection
-
- Left:从右向左
- Top:从下向上
- Right:从左向右
- Bottom:从上向下
- LeftTop:从右下 到 左上
- LeftBottom:从右上 到 左下
- RightTop:从左下 到 右上
- RightBottom:从左上 到 右下
less
@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)
}
}
示例:
3.2径向渐变
属性:radialGradient()
参数:
{
center: 径向渐变的中心点坐标,
radius: 径向渐变的半径,
colors: [[颜色1, 颜色1所处位置], [颜色2, 颜色2所处位置], ......],
repeating?: 是否重复着色
}
center
:径向渐变的中心点,即相对于当前组件左上角的坐标,写法[x坐标, y坐标]
百分比写法
@Entry
@Component
struct Index {
build() {
Column() {
Text('径向')
.width(300)
.height(200)
.backgroundColor(Color.Orange)
.radialGradient({
center:['50%','50%'], // 百分比基于组件的宽高自动计算
radius:'50%', //百分比基于宽高自动计算
colors:[
['#ff0000',0],
['#00ff00',0.5],
['#0000ff',1]
]
})
}
.height('100%')
.width('100%')
}
}
基本数字写法
@Entry
@Component
struct Index {
build() {
Column() {
Text('径向')
.width(200)
.height(200)
.backgroundColor(Color.Orange)
.radialGradient({
center:[-50,-50], // 固定中心点位置
radius:150, //半径
colors:[
['#ff0000',0],
['#00ff00',0.5],
['#0000ff',1]
]
})
}
.height('100%')
.width('100%')
}
}
repeat重复写法
@Entry
@Component
struct Index {
build() {
Column() {
Text('径向')
.width(300)
.height(200)
.backgroundColor(Color.Orange)
.radialGradient({
center:['50%','50%'], // 百分比基于组件的宽高自动计算
radius:'50%', //百分比基于宽高自动计算
colors:[
['#ff0000',0],
['#00ff00',0.1],
['#0000ff',0.2]
],
repeating:true // 当colors中所有颜色比例相加小于1的时候,我们可以添加repeating:true让其重复执行
})
}
.height('100%')
.width('100%')
}
}
示例图:
4.阴影
作用:为组件添加阴影效果
属性:shadow()
参数:{}
arduino
{
radius: 模糊半径,
type?: 阴影类型,
color?: 阴影颜色,
offsetX?: X轴偏移,
offsetY?: Y轴偏移,
fill?: 是否内部填充
}
less
@Entry
@Component
struct Index {
build() {
Column() {
Row() {
Image($r('app.media.wph'))
}
.width(200)
.height(200)
.backgroundColor('#fff')
// 组合1:颜色阴影
// .shadow({
// radius:20, //表示阴影的半径
// color:Color.Red, // 设置阴影的颜色
// offsetX:20, // X轴的偏移,正数:右,负数:左
// offsetY:20 // Y轴的偏移,正数:下,负数:上
// })
// 组合2:图片阴影
// ✨✨注意点:① type:ShadowType.BLUR + ② 组件中有图片
// color属性在ShadowType.BLUR无效
// 场景:阴影随着组件中的图片的切换而切换
.shadow({
radius:20,
type:ShadowType.BLUR, //表示取得组件中的图片作为边框的阴影
offsetY:10,
offsetX:10
})
}
.height('100%')
.width('100%')
.backgroundColor(Color.Pink)
}
}