ArkUI 界面构建

本章节主要学习了arkui组件及属性的内容，了解了常见的布局

万事顺心

984人浏览 · 2025-03-15 22:39:39

万事顺心 · 2025-03-15 22:39:39 发布

组件

组件分类：容器组件、基础组件

常见容器组件：

build
Column
Row
Flex（弹性布局）
Grid（格栅布局）
Tabs（选项卡）
Scroll
Stack（层叠布局）
List （列表布局）
RelativeContainer（相对布局）
Swiper（轮播）

常见基础组件：

Text
Button
Image
Badge（角标组件，常配合image组件使用，只可放图片的左、右和右上的位置）
TextInput
checkBox
Blank (填充组件）
Span (常用于Text组件，拼接不同样式的字符串）

属性

通用属性

如：宽高、背景色、padding、margin、layoutWeight、border、borderradius......

border({width: 1, color: xxx, style: Borderstyle.Solid})

对象形式，默认是Solid实线，可选Dashed虚线和Dotted点线
也可通过left、right、bottom、top 配置四个方向的边框

borderradius

borderRadius（数值）四个角圆角相同
borderRadius（{方位词：值}）单独给某个角设置圆角
设置正圆需要数值设置成宽高的一半，宽高需要相同。
胶囊形状需要设置成容器高度的一半

backgroundImage(路径,是否平铺:ImageRepeat枚举) X表示横向平铺，Y表示纵向平铺，XY表示横纵都平铺

backgroundImagePosition

传入对象，设置位置坐标，以背景图片的左顶点为基准
{x:坐标值，y：坐标值}
注意：坐标值单位目前版本已经和宽高单位改成一致了，但是可了解一下不同单位的区别（见下一讲vp和px）
Alignment枚举，设置一些特殊的位置（中央、左顶点...）
Center TopStart左顶点 TopEnd右顶点 BottomEnd右下

backgroundImageSize

直接写宽高尺寸对象 (用width: xx, height: xx)
设置背景尺寸的枚举 ImageSize
Auto：默认，原图尺寸
Contain：等比例缩放背景图，当宽或高与组件尺寸相同停止缩放
Cover：等比例缩放背景图至图片完全覆盖组件范围（常用）
FILL：不等比缩放背景图至图片完全覆盖组件范围，但会拉伸图片，使图片变形。

layoutWeight

设置layoutWeight 属性的子元素与兄弟元素，会按照权重进行分配主轴的空间
自适应伸缩：按照[份数（权重）]分配 [剩余空间]
使用layoutWeight时不可再使用width或height，因为其组件需要按照份数占一定比例。

position 定位

position绝对定位：可以控制组件位置，可以实现层叠效果

语法：position({x: ,y: })

特点：
1.相对于父组件左顶点进行偏移（调整位置）
2.原本的位置不占了，且可以任意调整位置，不影响其他元素
默认后面的组件层级更高，会盖住前面的组件
需求：不动结构的情况下，调整组件的层级用：.zIndex(数字)
注意：zIndex(数字) 数字越大，显示层级越高

opacity 透明度

0表示全透明，1表示不透明

scale 缩放

scale({x: 1,y: 1}) 1表示原尺寸，0表示最小

animatioin 动画

对象形式duration: 数值（动画持续的时间）

aspectRatio

设置和图片一致的宽高比，保证图片正常适配
aspectRatio(2.4) （宽/高得出）

特殊属性

见下组件中详细介绍

Text：

fontSize(16) 默认大小16
fontWeight(FontWeight.Bold) 括号内也可用100-900数值表示，加粗通常用700，默认400
fontColor(Color.Red) 括号内也可以直接输入16进制代码如：'#00df3c20' （前两位为透明度，0全透明，1不透明）
textOverflow({}) 设置文字溢出（必须配合maxlines使用才有效果）

textOverflow({ //设置文字溢出 （注意，传的是对象，要加大括号！属性名是overflow）
  overflow: TextOverflow.Ellipsis //文字溢出显示省略号（重要！！！）
  //overflow: TextOverflow.MARQUEE // 显示单行滚动效果
})

maxlines(2) 主要作用于上面的Ellipsis和clip/none属性，若是MARQUEE属性，则不需要添加最大行数。
textAlign(TextAlign.Center) 设置文字对齐方式

TextInput(参数对象).属性方法

type(InputType.xxx) 设置输入框type类型，xxx可以是Normal或Password，表示基本输入模式和密码输入模式
参数对象：placeholder: 提示文本

容器组件中的特殊属性见下布局中详细解释

布局

注：容器组件放在build下，build下同级只能有一个容器组件！

1. 线性布局（Column+Row）

控制容器内组件的间距，可以用“space”给容器组件设置。

justifyContent(FlexAlign.xxx) 设置排布主方向的对齐方式（主轴）

Start （排布主方向）主轴起始位置对齐
Center 主轴居中对齐
End 主轴结束位置对齐（居底）
SpaceBetween 子元素两边元素贴边显示，中间的元素均匀分布间隙（常用）
SpaceAround 间隙环绕（0.5 1 1 1 0.5的间隙分布）靠边只有一半的间隙
SpaceEvenly 间隙均匀环绕，靠边也是一份间隙（1 1 1 1 1）

alignItems() 交叉轴对齐方式

alignItems(HorizontalAlign.Start) Center End —— Column的交叉轴对齐方式（水平往右）
alignItems(VerticalAlign.Top) Center Bottom —— Row的交叉轴的对齐方式（垂直往下）

2. 弹性布局（Flex）

主轴方向：direction 默认row（主轴水平往右，交叉轴往下）
主轴对齐方式：justifyContent FlexAlign.SpaceAround / ......
交叉轴对齐方式：alignItems alignItems: ItemAlign.Stretch / Start / Center / End（Stretch表示交叉轴拉伸（交叉轴拉伸铺满屏幕））
布局换行：wrap

wrap属性：Flex 是单行布局还是多行布局

FlexWrap.noWrap 单行布局
FlexWrap.Wrap 多行布局

注：

FlexWrap.noWrap 不换行（若不换行，则会撑开盒子）
flex布局主要用于不规则组件需要换行的场景，线性布局是不支持换行的。

3. 层叠布局（Stack）

层叠布局具有较强的组件层叠能力。场景：卡片层叠效果等

特点：层叠操作更简洁，编码效率高。（绝对定位的优势是更灵活）

语法：
Stack({alignContent: Alignment.Center}){ //可以方便调整层叠元素的位置
   Item1()
   Item2()
}

alignContent有九个位置可以选（类似于九宫格）

4. 格栅布局（Grid）

在规则的行列布局中非常常见，如3行4列

本质是用Grid包裹多个GridItem
每个GridItem底下只能有一个Column或Row（子容器）

Grid(){
  ForEach([1,2,3,4,5,6,7,8,9,10,11,12], () => {
    GridItem(){  //本质是用Grid包裹多个GridItem
      Column(){   //每个GridItem底下只能有一个Column或Row（子容器）
      }
    }
  })
}

.columnsTemplate('1fr 1fr 1fr 1fr') 用来控制有多少列和每列的所占份数
.columnsGap(5) 控制每列之间的间隙
.rowsTemplate('1fr 1fr 1fr') 用来控制有多少行和每行的所占份数
.rowsGap(5) 控制每行之间的间隙

注：通常使用Foreach来循环遍历GridItem，用于重复样式不同内容的组件