1.ArkUI组件
a.Image组件(图片组件)：用于展示图片
(1)声明Image组件并设置图片源：
Image(src: string|PixelMap|Resource)//有三种声明方式string|PixelMap|Resource
//下面有介绍
string格式，通常用于加载网络图片,需要申请网络访问权限：ohos.permission.INTERENT
Image('https://xxx.png')
PixelMap格式，可以加载像素图，常用在图片编辑中
Image(pixelMapObject)
Resource格式，加载本地图片
//使用$r是指的图片是在resources目录下的media目录的资源
Image($r('app.media.mate60'))
//使用$rawfile是指的图片是在resources目录下的rawfile目录下的资源
//图片的后缀名不能省略
Image($rawfile('mate60.png'))
(2)添加图片属性
Image($r('app.media.mate60'))
//前面三个为组件的通用属性
.width(100) //宽度
在指定宽度和高度时，有三种方式，直接数字100，后面默认加vp单位，还可以用字符串的百分比显示
.height(120) //高度
.borderRadius(10) //边框圆角
//这是Image的特有熟悉，可以改变图片的清晰度
.interpolation(ImageInterpolation.High) //图片插值
b.Text组件(文本组件)
(1)声明Text组件并设置文本内容
Text(content?: string|Resource)
string格式
Text('图片宽度')
Resource格式
//也是读取本地资源，在resources目录下的en_US和zh_CN(叫限定词目录)下，
//也就是设备信息，在不同的目录下是准备给不同国家的限定词，
//可以设置很多公用的字符串资源
Text($r('app.string.width_label'))
(2)添加文本属性
Text('文字')
.lineHeight(32) //行高
.fontSize(20) //字体大小
.fontColor('#ff1245325') //字体颜色
.fontWeight(FontWeight.Medium) //字体粗细
c.TextInput组件(文本输入框组件)
(1)声明TextInput组件：
TextInput( {placeholder?: ResourceStr,text?: ResourceStr})
placeholder：输入框无输入时的提示文本
TextInput({placeholder: '请输入账号或手机号'})
text：输入框当前的文本内容,相当于文本框的默认值
TextInput({text: 'itast'})
(2)添加属性和事件
TextInput({text: '当前输入文本'})
.width(150) //宽
.height(30) //g高
.backgroudColor('#fff') //背景色
.type(InputType.Password) //输入框类型，可以换邮箱输入或者纯数字
//事件方法 当输入内容发生变化之后就会触发，可以获取文本内容
.onChange(value => {
//value是用户输入的文本内容
Number有个内置的函数.toFixed(0)表示把Number的值变成一个0个小数的字符串
parseInt--->内置方法
在获取值的时候，可以用parseInt把value字符串类型变为int类型
})
d.Button组件(按钮组件)
(1)声明Button组件，label是按钮文字：可以传，可以不传
Button(label?: ResourceStr)
文字型按钮
Button('XXX')
自定义按钮，在按钮内部嵌套其他组件
Button(){
Image($r('app.media.search')).width(20).margin(10)
}
(2)添加属性和事件
Button('XXX')
.width(100) //宽
.height(30) //g高
.type(ButtonType.Normal) //按钮类型，有三种，Capsule：胶囊型，Circle：圆形，Normal：默认
.onClick(() =>{
//处理点击事件
})
e.Slider组件(滑动条组件)
(1)声明Slider组件
Slider(option?: SilderOptions)
//都有默认值
Silder({
min: 0, //最小值
max: 400, //最大值
value: 200,//当前值，默认值
step: 20, //滑动步长
style: SilderStyle.OutSet, //InSet，滑块的类型
direction: Axis.Horizontal, //Vertical，滑块的水平方向和垂直方向
recerse: false //是否反向移动
})
.width('90%')
.showTips(true) //是否展示百分比显示
.blockColor('#36D')
.onChange(value => {
//value 就是当前滑块值
})
f.Row和Column组件(容器组件，行列排序组件)可以通过合理排序，让我们的页面变得更加好看
想要更直观的理解，看黑马的P11节：https://www.bilibili.com/video/BV1Sa4y1Z7B1?p=11&vd_source=c1ee5c12af6da97c0816e1376601ac97
容器方向上的一根轴线叫做主轴，比如Column就是垂直的方向叫做主轴，垂直与主轴的叫做交叉轴。在容器中每一部分都有一个间距Space默认为0
容器通过两个属性方法来调整对齐方式
justifyContent和alignItems
justifyContent是设置子元素在主轴方向上的对其格式，参数是FlexAlign枚举类型
alignItems是设置子元素在交叉轴上的对齐方式，Row容器是用VerticalAlign枚举类型，Column是使用HorizontalAlign枚举类型
在调整Column和Row容器的时候，可以设置内边距(也就是边框到组件的距离)，用padding设置
(1)Column是从上向下的垂直排列
justifyContent的FlexAlign每一个枚举项的含义
FlexAlign.start--会从最顶端开始排列
FlexAlign.Center--会从最中间开始排列
FlexAlign.End--会从最最底端开始排列
FlexAlign.SpaceBetween--会从上至下顺序排列，并且每一个子组件都有相同的间隔
FlexAlign.SpaceAround--会从上至下排列，但是首尾子组件会留有每一个子组件的间隔的一半留出来到最顶端和最底端
FlexAlign.SpaceEvenly--把空间均匀的分配到边框和子组件之间
alignItems的HorizontalAlign每一个枚举型的含义
HorizontalAlign.start--从左上角开始排列
HorizontalAlign.Center--从中间开始排列
HorizontalAlign.end--从右上角开始排列
(2)Row是水平排列的，从左到右
justifyContent的FlexAlign每一个枚举项的含义
FlexAlign.start--会从最左边开始排列
FlexAlign.Center--会从最中间开始排列
FlexAlign.End--会从最最右边开始排列
FlexAlign.SpaceBetween--会从左到右顺序排列，并且每一个子组件都有相同的间隔
FlexAlign.SpaceAround--会从左到右排列，但是首尾子组件会留有每一个子组件的间隔的一半留出来到最左边和最右边
FlexAlign.SpaceEvenly--把空间均匀的分配到边框和子组件之间
alignItems的VerticalAlign每一个枚举型的含义
VerticalAlign.start--从左上角开始排列
VerticalAlign.Center--从中间开始排列
VerticalAlign.end--从左下角开始排列 (3)属性方法，padding()--控制内边距，有上(top)下(bottom)左(left)右(right)四个方向
padding(20) 直接给值，调整四个方向
padding({left : 20,right : 20}) 在{}中加想要的边距方向，再加值
margin()--控制外边距，有上(top)下(bottom)左(left)右(right)四个方向
margin(20) 直接给值，调整四个方向
margin({left : 20,right : 20}) 在{}中加想要的边距方向，再加值
g.循环控制
(1)ForEach,一个函数，函数内部有三大参数，如下,前两个是必须的，第三个不是必须
```ArkTS
ForEach(
arr: Array, //1.需要遍历的数据数组(item: any,index?: number) => { //2.页面组件生成函数
//放所需要生成的界面代码；item是自己创建的一个数据，可以是数组
Row(){
Image(item.image)
Column(){
Text(item.name)
Text(item.price)
}
}
},
keyGenerator?: (item: any,index?: number): string => {
//3.健生成函数，为数组每一项生成一个唯一标示，组件是否出现渲染的判断标准
}
)
```
(2)if else
h.list组件(列表布局)
特点：
(1)在列表项（ListItem）数量过多超出屏幕后，会自动提供滚动的功能
(2)列表项（ListItem）既可以纵向排列，也可以横向排列
I.自定义组件
直接写在Entry前面，不用加export
@Component
struct Header{
private title: ResourceStr//ResourceStr类型的变量title，可以用作修改文字
build(){
//中间加自己想要的效果
}
}写在另一个界面，用export导出，在想要使用的界面导入就行
@Component
export struct Header{
private title: ResourceStr//ResourceStr类型的变量title，可以用作修改文字
build(){
//中间加自己想要的效果
}
}全局自定义构建函数
@Builder function ItemCard(可以加形参){
}
@Builder ItemCard(可以加形参){//不用function就可以放在entry内，但是只能在内部调用
}
全局自定义公共样式
@Styles function fillScreen(){
//里面直接放样式就行，名字随便取调用和函数一样
.width('100%')
.height('100%')
.padding(20)
.backgroundColor('#ffdddddd')
}
@Styles fillScreen(){//没有function就是局部的
//里面直接放样式就行，名字随便取调用和函数一样
.width('100%')
.height('100%')
.padding(20)
.backgroundColor('#ffdddddd')
}
如果在定义自定义样式的使用，里面写的不是公共属性就不能用@Styles，要用@Extend
@Extend(Text) function priceText(){
//里面加的是Text的样式，，也可以换成其他的
.fontColor('#F36')
.fontSize(18)
}
397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
