12.ArkUI-界面
1.组件
1.定义
容器组件()｛
//内容
｝
基础组件(参数)
ps：UI界面构建的最小元素是组件
ps：最外层只能有一个容器组件(距离build最近的)
2.组件属性方法
组件()｛｝
.属性方法1(参数)
.属性方法2(参数)
.属性方法3(参数)
……
ps：若是基本组件可将大括号删掉
常用的组件方法
- 宽度 .width()
- 高度 .height()
- 背景色 .backgroundColor()
- 字体大小 .fontSize()
- 字体粗细 .fontWeight()
2.文本
Text()
Text(){
imageSpan($r('')) //图片
Span('文本')
Span('文本')
Span('文本')
...
}
.textAlign(TextAlign.XXX)
3.字体颜色
- 枚举颜色 Color.颜色名
- #开头的16进制 eg：‘#df3c50’
4.文字溢出省略号、行高
.textOverflow(｛
overflow:TextOverflow.XXX
｝ 相当于名称↑ 相当于枚举出的类型↑
)
ps:需配合.maxLines(行数)使用
** eg: .textOverflow(｛**
** overflow:TextOverflow.Ellipsis**
** ｝ )**
** .maxLines(2)**
** 即为从第二个开始实现溢文字出省略号**
.lineHight()
5.图片组件
image('网图地址')
image($r('app.media.文件名'))
6.输入框
TextInput(参数对象)
.属性方法()
eg:
实现一个有提示文本的登录输入框
column({ space: 10 }){
TextInput({
placeholder:'请输入用户名'
})
.type(InputType.nomal)
//相当于枚举↑
TextInput({
placeholder:'请输入密码'
})
.type(InputType.password)
//相当于枚举↑
}
.placeholderColor()
ps:
- ** 控制组件间隙: space:值**
- ** 参数对象: placeholder: ‘提示的文本’**
- ** 属性方法: .type(InputType.XXX)**
** type中’XXX’的值: normal,password等**
7.按钮
button('文本内容')
8.复选框
Checkbox()
9.svg图标(随意改变大小仍不失真且能改变颜色)
image($r('app.media.文件名'))
.fillColor(Color.颜色)
10.布局元素的组成
1.内边距padding
1.四个方向内边距相同
组件(){
}.padding(值)
2.各个方向上的内边距不同
组件(){
}.padding({
方向:值
left
right
top
bottom
})
2.外边距margin
1.四个方向内边距相同
组件(){
}.margin(值)
2.各个方向上的内边距不同
组件(){
}.margin({
方向:值
left
right
top
bottom
})
ps:
margin 与 space 的区别在于space使不同组件间的外边距都相同
3.边框border
1.各边相同
组件(){
}.border({
width:值, //宽度，必须设置
color:值, //颜色
style:值 //样式
...
})
eg:
Column(){
Image($r('app.media.2'))
.width('40%')
.height('20%')
.padding({
bottom:5
})
.border({
width:10,
color:'#ff0f29',
style:BorderStyle.Solid
})
2.各边不相同
组件(){
}.border({
width:{
方向:值
},
color:{
方向:值
},
style:{
方向:值
}
...
})
eg:
Column(){
Image($r('app.media.2'))
.width('40%')
.height('20%')
.padding({
bottom:5
})
.border({
width:{
top:3,left:3,right:3,bottom:10
},
color:{
top:'#ff0f29',left:'#30b30e',right:'#30b30e',bottom:'#ff0f29'
},
style:{
top:BorderStyle.Dashed,
left:BorderStyle.Dashed,
right:BorderStyle.Dashed,
bottom:BorderStyle.Solid
}
})
11.设置圆角组件
1.四角相同
组件(){
}.borderRadius(参数)
2.四角不相同
组件(){
}.borderRadius({
topLeft:参数,
topRight:参数,
bottomLeft:参数,
bottomRight:参数
})
12.特殊形状的圆角设计
1.正圆
组件(){
}
.width(值1) //要求必须是正方形，宽高一样
.height(值1)
.borderRadius(值1 /2) //圆角是宽高的一半
2.胶囊
组件(){
}
.width(值1)
.height(值2)
.borderRadius(值1 /2) //圆角是高的一半
13.背景属性
背景色 backgroundColor
背景图 backgroundimage
背景图位置 backgroundimageposition
背景图尺寸 backgroundimagesize
1.添加背景图
1.
组件(){
}.backgroundimage(路径)
2.
组件(){
}.backgroundimage('app.media.文件名')
是否平铺
组件(){
}.backgroundimage(背景图地址,背景图平铺方式-枚举ImageRepeat)
ps:
ImageRepeat.NoRepeat:不平铺
ImageRepeat.x:水平平铺
ImageRepeat.y:垂直平铺
ImageRepeat.xy:水平垂直均平铺
eg:
组件(){
}.backgroundimage($r('app.media.3'),ImageRepeat.xy)
2.背景图位置
1.
组件(){
}.backgroundimagePosition({x:位置坐标,y:位置坐标}) //左上角坐标
2.
组件(){
}.backgroundimagePosition(Alignment.位置)
3.背景定位-单位问题vp2px
.backgroundimagePosition({x:位置坐标,y:位置坐标}) 中坐标的单位与 .width(值) 或 .height(值) 的单位不同
- 背景定位默认单位：px,实际的物理像素点，设备出厂就定好了，与分辨率有关
- 宽高默认单位：vp,虚拟像素，相对于不同的设备会自动更换
函数:vp2px()
4.背景尺寸大小
1.
组件(){
}.backgroundimageSize({width:尺寸,height:尺寸})
2.
组件(){
}.backgroundimageSize(ImageSize.XXX)
-
ImageSize.Contain：等比例缩放背景图，当宽高与组件尺寸相同停止缩放
-
ImageSize.Cover：等比例缩放背景图至图片完全覆盖组件范围
14.线性布局
1.主轴对齐方式
- Column容器(纵向排)
- Row容器(横向排)
排布主方向上的对齐方式
属性:
容器{
}.justifyContent(参数)
参数:枚举类型
ps:
FlexAlign.SpaceAround:每个"盒子"的空白间隙环绕宽度相同
2.交叉轴对齐方式
属性:
容器{
}.alignItem(参数)
参数:枚举类型
交叉轴在水平方向:HorizontalAlign.XXX
交叉轴在垂直方向:VerticalAlign.XXX
15.自适应伸缩
设置layoutWeight属性的子元素或兄弟元素，会按照权重进行分配主轴的空间
组件{
}.layoutWeight(数字)
Blank()
16.弹性布局-Flex
ps:涉及到换行时使用
1.定义
ps:Flex默认主轴水平往右，交叉轴垂直往下
主轴方向 direction
主轴对齐方式 justifycontent
交叉轴对齐方式 alignltems
布局换行 wrap
Flex(参数对象){
子组件1
子组件2
子组件3
...
}
2.修改主轴方向
Flex({
direction:FlexDirection.Column //默认垂直向下
}){ //.Row 默认水平往右
子组件1 //.ColumnReverse 默认垂直往上
子组件2 //.RowColumn 默认水平往左
子组件3
...
}
3.主轴对齐方式
Flex({
justifyContent:FlexAlign.XXX //同 8.14.1线性布局
}){
子组件1
子组件2
子组件3
...
}
4.交叉轴对齐方式
Flex({
alignItems:ItemAlign.XXX
}){
子组件1
子组件2
子组件3
...
}
5.换行
Flex({
wrap：FlexWrap.Wrap //多行布局
.NoWrap //单行布局
.WrapReverse //反转换行布局
})
17.绝对定位和层级zIndex
作用：控制组件位置，可以实现层叠效果
特点：
-
参照父组件左上角进行偏移
-
绝对定位后的组件不再占用自身原有位置
1.绝对定位
父组件(){
组件()
.position({
x:值,
y:值
});
}
2.层级
组件(){
}.zIndex(数值) 数值越大层级越靠上
18.层叠布局
层叠布局具有较强的组件层叠能力。场景：卡片层叠效果等
特点：层叠操作更简洁，编码效率高。(绝对定位的优势是更灵活）
stack 容器内的子元素的顺序为 item1 ->item2 -> item3
Stack({
alignContent：Alignment.XXX
}){
Item1()
Item2()
Item3()
}
ps：可用.zIndex()修改层级
19.滚动组件 Scroll
Scroll(){
}
ps:Scroll中的column组件不用设置height
20.Badge角标组件
Badge({
count:, //值为0则自动隐藏角标
position:BadgePosition.XXX, //图标角置
style: {
fontSize: //文字大小
badgeSize: //角标大小
badgeColor: //角标颜色
}
}){
Image($r('...'))
}
21.Grid布局
Grid(){
GridItem(){
}
}
.columnsTemplate()
.rowsTemplate()
.rowsGap() //间距
13.交互
1.语法
.onClick( (参数)=>{} )
2.弹框
AlertDialog.show()
3.状态管理
普通变量: 只能在初始化时渲染，后续将不会再刷新。
状态变量: 需要装饰器装饰，改变会引起 U的渲染刷新(必须设置 类型 和 初始值)
eg:
let msg1:string ='abc'
@Entry
@Component
struct Index{
msg2: string = 'efg'
build(){
Column(){
Text(msg1)
Text(this.msg2)
}
}
}
@Entry
@component
struct Index{
@state msg3:string ='Hello World'
build(){
Column(){
Text(this.msg3)
.onclick(()=>{
this.msg3='你好，世界'
})
}
}
}
4.ForEach 渲染控制
@state 数组名:string[] =['组件名1','组件名2','组件名3'...]
build(){
Column(){
ForEach( this.数组名,(item(代表数组成员):string,index(下标):number)=>{
组件('item')
})
}
}
5.动画效果
.animation({
duration: //动画持续时间(单位毫秒)
})
6.控制元素缩放
.scale({
x: ,//水平方向缩放
y: //垂直方向缩放
})