完全0储备小白快速上手学会鸿蒙应用开发-第三天：ArkUI布局基础

如果要设置四个方向的内间距，且值一样，可以就写数字.padding(数字。如果四个方向都要设置，且间距一样，可以就简写为数字，例。可以设置四个方向，要哪个方向就写哪个。特点：会让他的子组件，从上往下依次排列（垂直方向排列），除了直接给数字，还可以给百分比，代表它要占父盒子宽度、高度的百分比。如果一个组件是正方形的也即宽高一样，这时候如果四个角的圆角设置。设置交叉轴的属性是：.alignItems(

百思鸿状教育

796人浏览 · 2025-06-18 15:38:11

百思鸿状教育 · 2025-06-18 15:38:11 发布

通用属性-外间距

用法

.margin({top:上距离,bottom:下距离,left:左距离,right:右距离})

可以设置四个方向，要哪个方向就写哪个

如果四个方向都要设置，且间距一样，可以就简写为数字，例.margin(10)，这代表上下左右外间距都为10

宽高尺寸之百分比

父组件

包含别的组件的叫父

子组件

被包含的叫子

width和height，除了直接给数字，还可以给百分比，代表它要占父盒子宽度、高度的百分比

注意：百分比是字符串

例：

        .width('100%')

练习案例-小鸿音乐歌曲信息展示

通用属性-圆角

语法

.borderRadius({topLeft:左上角圆角半径,topRight:右上角圆角半径,bottomLeft:左下角圆角半

径,bottomRight:右下角圆角半径})

如果四个角都要给，且每个角一样的半径，可以直接写数字，例：borderRadius(20)

也可以设置百分比，这时候圆角半径就是宽度的百分比

如果一个组件是正方形的也即宽高一样，这时候如果四个角的圆角设置50%就是切成圆形

例：

Column(){
}
.width(100)
.height(100)
.backgroundColor('#f00')
//.borderRadius({topRight:'50%',bottomLeft:'50%'})//可以设置百分比，那这时半径就是宽度的百分比
.borderRadius('50%')  //所以技巧：如果要画圆就是让圆角四个角都切50%

通用属性-内间距

影响的是组件内的内容

用法

.padding({top:值,bottom:值,left:值,right:值})

如果要设置四个方向的内间距，且值一样，可以就写数字.padding(数字)

通用属性-边框

用法：

.border({width:边框粗细,color:边框的颜色,style:边框的样式})

style给的是borderStyle的枚举

这个枚举有三个值

solid：实心直线，默认值

dashed：虚线

dotted：点状线

练习：携程提示登录页

案例

线性布局-Column

排列示意图

特点：会让他的子组件，从上往下依次排列（垂直方向排列）

间距示意图

Column({space:间距值})

屏幕坐标轴说明

屏幕左上角作为坐标轴的原点，从左至右的是x轴，从上至下的是y轴

因为Column是从上往下排列子组件，也叫沿着y轴排列，所以对于Column而言，y轴叫主轴，x

轴叫交叉轴

在主轴方向上的排列方式

在交叉轴上的排列方式

设置交叉轴的属性是：.alignItems()

通用属性-背景图片

实际场景

案例：

基础用法

backgroundImage('图片')

平铺用法

backgroundImage(图片,ImageRepeat枚举)

ImageRepeat枚举取值

noRepeat：默认值，不平铺

X：沿着x轴平铺

Y：沿着y轴平铺

XY：X和Y轴都平铺

背景图片尺寸

backgroundImageSize(尺寸对象|ImageSize枚举)

例：

.backgroundSize({width:300,height:500})
.backgroundSize({width:'100%',height:'100%'})
.backgroundSize(ImageSize.Fill)//铺满组件，等同于上面的百分百，可能图片会变形
.backgroundSize(ImageSize.Cover)//按比例缩放图片，直到铺满组件，可能有内容显示不全.backgroundSize(ImageSize.Contain)//按比例缩放图片，直到铺满组件的某一边就停止，内容一定能显示全，但是有空白

背景图片位置

backgroundImagePosition({x,y}|Alignment枚举)

线性布局-Row

排列示意图

间距示意图

主轴上的对齐方式

交叉轴上的对齐方式

也是alignItems

自适应缩放

.layoutWeight

设置在主轴方向剩余空间的比重

有多少个，就代表一共多少份，然后分成多少分里面的几分之几


组件1(){
}
.layoutWeight(1)
组件2(){
}
.layoutWeight(2)
组件3(){
}
.layoutWeight(3)
//代表总共分6份，分别占1/6、2/6、3/6

小技巧

如果只有一个组件写layoutWeight，就代表它占用主轴方向的剩余空间

Column里用layoutWeight代表设置高度

Row里用layoutWeight代表设置宽度

综合案例：网易云音乐

@Entry
@Component
structIndex{
    build(){
    Row(){
//左侧显示歌名和歌手
        Column(){
            Text('拼图爱')
                .fontSize(20)
                .fontWeight(700)
            Text('蒋孜怡/岳燃- 拼图爱')
                .fontColor(Color.Gray)
        .layoutWeight(1)
        .alignItems(HorizontalAlign.Start)
    Image($r('app.media.play'))
        .width(40)
    .padding({left:20,right:20})
    .height('100%')
    .width('100%')
    }
}

不用layoutWeight，直接给Row加设置主轴方向为SpaceBetween也可以

作业：外卖商品