三. 基础布局
1.设计资源-图标库
1.1 下载图标
1.2 使用图标
使用 Image 组件显示图标，添加 fillColor() 属性修改图标颜色
Image($r('app.media.ic_public_car'))
.width(50)
.fillColor(Color.Red)2.布局属性
| 属性 | 描述 |
|---|---|
| padding | 内边距 |
| margin | 外边距 |
| border | 边框 |
| borderRadius | 边框圆角 |
2.1 内边距padding
作用：在组件内添加间距，拉开内容与组件边缘之间的距离
属性：数字 或 对象{}
-
数字：上下左右内边距相同 -
对象{}：配合 left、right、top、bottom 单独设置某个方向内边距
Text('内容')
.backgroundColor(Color.Blue)
.padding(60)
.margin({
top:100
})
//第二个内容
Text('内容2')
.backgroundColor(Color.Green)
.padding({
top:20,
bottom:30,
left:40,
right:50
})2.2 外边距margin
作用：在组件外面添加间距，拉开两个组件之间的距离
属性：margin
属性：数字 或 对象{}
-
数字：上下左右内边距相同
-
对象{}：配合 left、right、top、bottom 单独设置某个方向内边距
Column() {
//内容1
Text('内容')
.width(100)
.height(100)
.backgroundColor(Color.Blue)
.margin(40)
//内容2
Text('内容2')
.width(50)
.height(50)
.backgroundColor(Color.Green)
.margin({
top:20,
bottom:30,
left:40,
right:50
})
}2.3 边框属性
2.3.1 四个方向边框相同
属性：border()
参数：{width?: 数字, color?: '', style?: BorderStyle}，
-
width：边框宽度，边框宽度默认值为0，即不显示边框
-
color：边框颜色
-
style：边框样式，
BorderStyle为枚举类型 -
-
Solid：实线（默认）
-
Dashed：虚线
-
Dotted：点线
-
Text('这是边框')
.width(200)
.height(100)
.border({
width:3,
color:Color.Black,
style:BorderStyle.Dashed
})2.3.2 四个方向边框不同
书写方法
.border({
width: {},
color: {},
style: {}
})
width、color、style 均可以通过top、right、bottom、left设置各个方向边框外观
Text('这是第二个边框')
.width(200)
.height(100)
.border({
style:{left:BorderStyle.Dashed,top:BorderStyle.Dashed,bottom:BorderStyle.Dashed,right:BorderStyle.Dashed},
color:{left:Color.Blue},
width:3
})2.4 边框圆角
属性：borderRadius(圆角半径)
特殊的圆角：
正圆：.borderRadius(正方形高度的一半)
胶囊：.borderRadius(长方形高度的一半)
参数：数值 或 { }
-
topLeft：左上角
-
topRight：右上角
-
bottomLeft：左下角
-
bottomRight：右下角
Column() {
// 这是第一个边框
Text('这是边框')
.width(200)
.height(100)
.border({
width:3,
color:Color.Black,
style:BorderStyle.Dashed
})
.borderRadius({
topLeft:25,
topRight:15,
bottomLeft:10,
bottomRight:5
})
Text('这是第二个边框')
.width(200)
.height(100)
.border({
style:{left:BorderStyle.Dashed,top:BorderStyle.Dashed,bottom:BorderStyle.Dashed,right:BorderStyle.Dashed},
color:{left:Color.Blue},
width:3
})
.margin({
top:30
})
.borderRadius(50)
}3.背景属性
| 属性 | 描述 |
|---|---|
| backgroundColor | 背景颜色 |
| backgroundImage | 背景图片 |
| backgroundColorSize | 背景图尺寸 |
| backgrouColorPosition | 背景图位置 |
3.1 backgroundColor
设置背景颜色
Text('组件')
.width(300)
.height(100)
.backgroundColor(Color.Pink)3.2 backgroundImage
属性：backgroundImage(背景图地址, 背景图平铺方式 ImageRepeat)
背景图平铺方式：（可省略）
-
NoRepeat：不平铺，默认值
-
X：水平平铺
-
Y：垂直平铺
-
XY：水平垂直均平铺
Text('组件')
.width(300)
.height(100)
.backgroundColor(Color.Pink)
.backgroundImage($r('app.media.flower'))
.backgroundImage($r('app.media.flower'), ImageRepeat.X)
}3.3 backgroundImage
作用：背景图缩放
属性：backgroundImageSize
参数：
-
设置背景图宽高尺寸：
{width: 数值, height: 数值}（只设置宽或高，另一个尺寸等比例缩放） -
枚举
ImageSize： -
-
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)
}
}3.3 backgroundImageSize
作用：背景图缩放
属性：backgroundImageSize
参数：
-
设置背景图宽高尺寸：
{width: 数值, height: 数值}（只设置宽或高，另一个尺寸等比例缩放） -
枚举
ImageSize： -
-
Cover：等比例缩放背景图至图片完全覆盖组件范围
-
Contain：等比例缩放背景图，当宽或高与组件尺寸相同则停止缩放
-
Auto：默认，原图尺寸
-
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)3.4 backgroundImagePostion
作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角
属性：backgroundImagePosition()
参数：
-
位置坐标：
{x: 位置, y: 位置} -
枚举
Alignment
Column() {
Text('')
.width(267)
.height(315)
.backgroundColor(Color.Pink)
.backgroundImage($r('app.media.flower'))
// Alignment
.backgroundImagePosition(Alignment.Center)
//x,y坐标
.backgroundImagePosition({x:vp2px(130),y:vp2px(150)})
}
.padding(20)px转换vp：vp2px( )
4.线性布局
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器 Row 和 Column 构建。Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。
4.1基本概念
-
布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。 -
布局子元素：布局容器内部的元素。 -
主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为横向，Column容器主轴为纵向。 -
交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为纵向，Column容器交叉轴为横向。 -
间距：布局子元素的间距。
4.2 主轴方向的间距
在布局容器内，可以通过 space 属性设置主轴方向上子元素的间距，使各子元素在主轴方向上有等间距效果。
// column
Column({space:50}) {
Text('')
.width(150)
.height(50)
.backgroundColor(Color.Pink)
Text('')
.width(150)
.height(50)
.backgroundColor(Color.Pink)
Text('')
.width(150)
.height(50)
.backgroundColor(Color.Pink)
// row
Row({space:50}) {
Text('')
.width(50)
.height(150)
.backgroundColor(Color.Pink)
Text('')
.width(50)
.height(150)
.backgroundColor(Color.Pink)
Text('')
.width(50)
.height(150)
.backgroundColor(Color.Pink)
}
}4.3 主轴对齐方式
属性：justifyContent()
参数：枚举FlexAlign
| 属性 | 描述 |
|---|---|
| Start | 首端对齐 |
| Center | 居中对齐 |
| End | 尾部对齐 |
| Spacebetween | 两端对齐，子元素之间间距相等 |
| SpaceAround | 子元素两侧间距相等，第一个元素到行首的距离和最后一个元素到行位的距离是相邻元素之间距离的一半 |
| SpaceEvenly | 各个地方间距都相等 |
Column() {t
Column({space:50}) {
Text('')
.width(220)
.height(50)
.backgroundColor(Color.White)
Text('')
.width(220)
.height(50)
.backgroundColor(Color.White)
Text('')
.width(220)
.height(50)
.backgroundColor(Color.White)
Text('')
.width(220)
.height(50)
.backgroundColor(Color.White)
}
.width(300)
.height(740)
.backgroundColor(Color.Gray)
// 子元素之间的间距相等 起始和末尾没有
.justifyContent(FlexAlign.SpaceBetween)
// 子元素之间的间距是起始和末尾的一半
.justifyContent(FlexAlign.SpaceAround)
// 各个元素间距都相等
.justifyContent(FlexAlign.SpaceEvenly)
}
.padding(20)4,4 交叉轴对齐方式
属性：alignItems()
参数：枚举类型
-
交叉轴在水平方向：
HorizontalAlign→ Column -
交叉轴在垂直方向：
VerticalAlign→ Row
!注意：布局容器在交叉轴要有足够空间，否则无法生效
// row的交叉轴对齐方式
.alignItems(VerticalAlign.Top)
//column的交叉轴对齐方式
.alignItems(HorizontalAlign.End)4.5 单个子元素交叉轴对齐方式
属性：alignSelf()
参数：枚举ItemAlign(Stretch拉伸，交叉轴拉伸效果)
Row({ space: 20}) {
Text('子元素1')
.width(100)
.height(40)
.backgroundColor(Color.Pink)
Text('子元素2')
.width(100)
.height(40)
.backgroundColor(Color.Orange)
Text('子元素3')
.width(100)
.height(40)
.backgroundColor(Color.Brown)
// ******* 交叉轴拉伸
.alignSelf(ItemAlign.Stretch)
}
.width('100%')
.height(100)
.backgroundColor('#ccc')
// 居中
.alignItems(VerticalAlign.Center)
}4.6 自适应缩放
父容器尺寸确定时，设置了 layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配。
-
主轴：布局方向的轴线，子元素默认沿着主轴排列
-
交叉轴：垂直于主轴方向的轴线
属性：layoutWeight()
参数：数字
Column() {
// 主轴方向：水平方向
Row() {
Text('左侧')
.width(60)
.height(30)
.backgroundColor('#ccc')
Text('右侧 layoutWeight')
.height(30)
.backgroundColor('#fc0')
.layoutWeight(1)
}
.margin({bottom: 20})
// 主轴方向：垂直方向
Column() {
Text('第一行-固定高度')
.width('100%')
.height(30)
.backgroundColor(Color.Pink)
Text('第二行-layoutWeight')
.width('100%')
.backgroundColor(Color.Green)
.layoutWeight(1)
}
.width('100%')
.height(100)
.backgroundColor('#f5f5f5')小伙伴们今天的课程到这里就要结束了，喜欢的小伙伴收藏＋点赞，持续更新~~~~
7571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
