HarmonyOS开发实操笔记（未整理版）
一、鸿蒙APP开发
1.开发者工具：DevEco Studio 解压-双击-安装。
下载地址：DevEco Studio-HarmonyOS Next Beta版-华为开发者联盟
2.ArkTS基础语法
https://i-blog.csdnimg.cn/direct/d9d189f3237d4c428f3ece8d6aa5330c.png
1.日记打印：
console.log('',''); 检察方式：最下侧日记选项。最右侧预览器选项。//注解
https://i-blog.csdnimg.cn/direct/02d6a2bab6d2415d87e6b5846c8e20d1.png
2.数据范例：
命名规则：包含数字，字母，下划线，￥，不能数字开头，区分大小写，不能使用内置关键字。
1).变量：
字符串-string， 数字：number ，布尔：boolean
格式： let 名称：范例 = 值，例如 let title:string=‘飒飒’
修改：title='施耐德'
2).常量：不能修改
const 名称 ：范例=值
let s:string='string'
let n:number=12
let b:boolean=false
console.log('字符串:'+s+'数字:'+n+'布尔:'+b)
s='sting1'
n=13
b=true
let n1:number=12
console.log('${}拼接'+`字符串:${s}数字:${n}布尔:${b}`)
console.log("数字拼接",`${n}${n1}`)
const a:string='1111'
console.log("常量",a).
https://i-blog.csdnimg.cn/direct/fdf7e8cdc2fc4426abf724c794a8e7e9.png
3).字符串:
拼接： 加号 +，或者${变量} 使用 ${} 必要反引号包裹 `文字${变量}文字`
let name:string = '小明'
let age:number = 19
console.log('简介','名字aa是'+name)
console.log('简介是',`名字是${name}年龄${age}`) 范例转换：
1.字符串转数字
Number();字符串直接转数字，转换失败返回NaN(字符串包含非数字)
parseInt();去掉小数部分转为数字，转换失败返回NaN
parseFloat();保留小数部分转数字，转换失败返回NaN
2.数字转字符串
toString():数字之间转字符串
toFixed():四舍五入转字符串，可设置暴力几位小数。
4).数组：
let 数组名 ： 范例[] =[数据1,数据2] 索引：从0开始
let arr:string[]=['1','2','3']
console.log('数组',arr) https://i-blog.csdnimg.cn/direct/038108378e034227b5c3b92019712f3a.png
5).联合范例：
let 变量：范例1|范例2|范例3=值；
let judge:number | string =100
judge='A+'
judge='优秀'
//联合类型可以将变量值约定在一组数据范围内进行选择
let gender : 'man' | 'women' ='man' 6).罗列范例：
enum ThemeColor{
Red='#ff0f29',
Orange='#ff7100',
Green ='#30b30e'
}
let color:ThemeColor=ThemeColor.Red
7).函数：
function fn (){....}
定义函数：function 函数名（）{函数体}
调用函数：函数名()
传参：
function 函数名（形参1：类型）{
代码块
return 结果；
}
let 变量名：类型 = 函数名（实参1）
function fu(a:number,b:string){
return a+b;
}
let s1:string=fu(1,'a')
console.log("a+b=",s1) https://i-blog.csdnimg.cn/direct/a0470839eb484a7dada98e9db5b3ef37.png
8).箭头函数：
let 函数名称 =（形参）=>{函数体 return 结果}
9).对象：
let 对象名称：对象结构 = 值
对象打印使用：JSON.stringify()
interface Person{
name:string
sex:string
age:number
fu:(a:number)=>number
}
let zs:Person={
name:'张三',
sex:'男',
age:18,
fu:(a:number)=>{
return a*2
}
}
console.log("张三"+zs.sex)
console.log("张三"+JSON.stringify(zs))
console.log('方法返回值',zs.fu(2)) https://i-blog.csdnimg.cn/direct/a1f14867eac44b5e9820f6c64709f5e7.png 对象-方法
interface 接口名称{
方法名：（参数：类型）=>返回值类型
}
运算符优先级
https://i-blog.csdnimg.cn/direct/02439ae21aa543ddbac33a0a9db62ff9.png
10).数组：Array
查找：数组名[下标]
修改： 数组名[下标] =新值
长度：数组名.length
开头新增元素：数组名.unshift() 返回操纵后的数组长度
结尾新增元素：数组名.push()返回操纵后的数组长度
从开头删：.shift()
从结尾删：.pop()
任意位置添加、删除素组元素：数组名.splice(起始位置，删除个数，新增元素1，新增元素2，......)
语句：if while switch
对象数组：包罗对象的复杂数据，假如想要在日记中打印必要JSON.stringify(对象)；转为字符串格式。
3.ArkUI(方舟开发框架）搭建鸿蒙应用界面的框架。（组件）
build 决定界面的出现 思绪：1排版2内容3美化
1.组件
最小结构单位是 组件
组件分类：容器组件 Column，Row.(column space属性 间隔）
1).基础组件:Text
build 有且只有一个根元素且是容器组件
组件属性方法：https://i-blog.csdnimg.cn/direct/7526bcf2003a4fa096a552bfd7d91f51.png
文字颜色
.fontColor()
https://i-blog.csdnimg.cn/direct/1220552371bc490e8edd24785e2daa71.png
文字溢出显示为...：
Text('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
.textOverflow({
overflow:TextOverflow.Ellipsis
})
.maxLines(2)
或者 .lineHeight() 2).Image 图片组件
Text组件中使用ImageSpan()组件，小图
加载本地图片：Image($r('app.media.product'))
https://i-blog.csdnimg.cn/direct/ef0c8d7f1f4349638a8856c40e785835.png
设计资源-svg图标（任意放大缩小不失真，可以改变颜色）图片格式推荐svg
图标：通过image使用
HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟
3).输入框与按钮
TextInput(参数对象).属性方法
TextInput({placeholer:'占位符'}).type(InputType.Password)
Button('登录').width(200)
4).结构元素的组成https://i-blog.csdnimg.cn/direct/ec548a10dd2143fe892ff743a66b0aae.png
内边距：padding 组件内添加间距，拉开内容与组件边缘之间的间隔。
外边距：margin 组件外添加间距，拉开组件间间隔。
TextInput('123').padding(20)
TextInput('123').padding({
top:20,
right:20,
bottom:40,
left:80
})
TextInput('456').margin(30）
TextInput('456').margin({
left:30,
right:50
}) 边框 border 可以对 left right botton top 四个方向配置样式
Text('边框').border({
width:1,
color:Color.Red,
style:BorderStyle.Dashed
}) 5).组件圆角
topLeft:左上角
topRight：右上角
bottomLetf：左下角
bottomRight：右下角
Text('圆角').borderRadius({
topLeft:5,
topRight：10,
bottomLetf：15,
bottomRight：20
)} 6).特殊圆角：
1.正圆
2.胶囊按钮
Text('正圆')
.width(100)
.heght(100)
.borderRadius(50)
Text('胶囊')
.width(150)
.heght(50)
.borderRadius(25) 7).背景属性：
https://i-blog.csdnimg.cn/direct/65186c67ce0f45ddae4267e294d565ad.png
Text('内容文本‘）
.fontColor(Color.white)
.width(300)
.heigth(200)
.backgroundImage($r('app.media.flower'),ImageRepeat.XY) 背景图位置
名称：backgroundImagePosition
作用：调解背景图在组件内的显示位置，默认左上角
属性: .backgroundImagePosition(坐标对象或罗列）
backgroundImagePosition({x:100,y:200})
backgroundImagePosition(Alignment.Top)
单位问题：背景定位默认单位->px：现实的物理像素点。不同设备不同的分辨率，像素点大小不一.
宽高默认单位： vp:假造像素，对于不同设备会自动转换。
函数：vp2px(数值)
https://i-blog.csdnimg.cn/direct/5afb12b905d84b7981142a224b651202.png
背景图尺寸
名称：backgroundImageSize
作用：背景图缩放
属性：.backgroundImageSize(宽高对象或罗列)
contain：等比例缩放，留白。
cover：等比例缩放，内容现实不全
auto:默认尺寸
8).复选框：
CheckBox
text-span 对text中的文本，举行单独举行设置。
Checkbox()
Text(){
Span('.....').fontColor('#32674f6')
Span('.....')
} 填充组件：Blank() 填充剩余空缺区域
2.结构
1).线性结构：
Column Row
结构子元素在主轴上的排列方式
在结构容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴竣事位置开始排布，或者均匀分割主轴的空间。
1.主轴起始位置对齐 2.主轴居中对齐 3.主轴竣事位置对齐 4.贴边显示 5.间隙围绕
6.间隙均匀围绕
https://i-blog.csdnimg.cn/direct/76587590e5e345019c8cda739852cb9e.png
交叉轴：
属性：aIignItems
参数：罗列范例
水平方向：HorizontalAlign
垂直方向：VerticalAlignhttps://i-blog.csdnimg.cn/direct/c1444603bcca4b96a5a04c82e8b94dea.png
row
https://i-blog.csdnimg.cn/direct/cafefd38383f4a57a293e7c4ad85eea5.png
column
https://i-blog.csdnimg.cn/direct/e7897337c97d4239874013987e9f919d.png
自适应伸缩
设置 layoutWeight 的属性的子元素与兄弟元素，会按照权重分配主轴空间。
语法:.layoutWeight(数字）
https://i-blog.csdnimg.cn/direct/d3821601656543639df259f15c79e5ac.png
2)弹性结构（Flex)：
弹性结构（Flex）提供更加有效的方式对容器中的子元素举行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。
主轴为水平方向的Flex容器表示图
https://i-blog.csdnimg.cn/blog_migrate/1950d9b66bfeaec47581adb97de98fc8.png
Flex({参数对象}）{
子组件1
子组件2
}
参数：
1.主轴方向：direction FlexDirection.Row
2.主轴对齐方式：justifyContent FlexAlign.Start
3.交叉轴对齐方式：alignItems ItemAlign.Auto
4.布局换行：wrap 单行布局 NoWarp 多行布局 Wrap 3)层叠结果：
绝对定位： 参照父组件的左上角举行偏移，绝对定位后的组件不在占用自身原有位置。
语法：position(位置对象)
参数：{x:水平偏移,y:垂直偏移}
权重：zIndex(数值顺序)
Text('文字内容')
.position({x:50,y:50}) 层叠结构：Stack({ }){},省去定位的测量间隔的时间。
Stack({
alignContent:Alignment.Center
}){
Item1()
Item2()
} https://i-blog.csdnimg.cn/direct/bc5ff9292dff474ea03f9b22c734be39.png
滚动区域：Scroll（）{}
4).交互 点击事件：
组件.onClick(()=>{
AlertDialog.show({
message:'弹框'
})
}) 5).状态管理：@State 装饰变量
普通变量：只在初始化时渲染，后续不在刷新
状态变量：必要装饰器装饰，改变会引起UI渲染刷新（必须设置范例和初始值）
定义在组件内的 变量必要this访问
https://i-blog.csdnimg.cn/direct/c187ebb092a94dac9cb002b86441ca2b.png
运算符：同Java相同
渲染控制：ForEach() 基于数组格式，渲染组件个数。
语法：ForEach(arr,(item,index)=>{})
https://i-blog.csdnimg.cn/direct/7aaa01d4f0454b688e73093c9beddfc1.pnghttps://i-blog.csdnimg.cn/direct/624ca868784e4f94b626d76749ec65e0.png
案例：生肖抽卡
组件：Badge 角标
Badge({
count:1,
position:BadgePosition.RightTop,//位置
style:{
fontSize:14,
badgeSize:50,
badgeColor:'#fa2a2d'
}
}){
Image('图片地址')
} 6).结构：Grid 网格
Grid(){
GridItem(){
Column(){
}
}.width(80)
.heigth(80)
}.columnsTemplate('1fr 1fr 1fr') //列份数
.rowsTemplate('1fr 1fr 1fr ifr') //行份数
.rowGap(5)//行间距
.columnsTemplate(5)//列间距 https://i-blog.csdnimg.cn/direct/fbd9e43ed75943b784ee41a9538184ff.png
组件透明度：opacity 0->1
元素的缩放：scale({x:1,y：1}) -1=>99 animation({duration:500})
7).轮播组件：Swiper
根本用法：Swiper（）{}
属性：https://i-blog.csdnimg.cn/direct/e280ac5b9e7e475eaae88fbfac5d1627.png
自定义：indicator必要传入一个indicator对象参数
宽高比：设定宽后，aspectRatio(数值) 适配更多设备 使图片保持比例
.indicator(
Indicator.dot()//小圆点
.itemWidth(20)//默认的宽
.itemHeight(20)//默认的高
.color(Color.Black)//默认颜色
.selectedItemWidth(30)//选中的宽
.selectedItemHeight(30)//选中的高
.selectedColor(Color.White)//选中的颜色
) 8).样式和结构的重用：
@Extend 扩展组件（样式，事件）同组件情况
图中两个Text组件样式根本一致，部分参数不一致的情况下使用组件扩展https://i-blog.csdnimg.cn/direct/b55f7d874a7a442cac4c57298f1988f9.png
https://i-blog.csdnimg.cn/direct/b711e3243de94fd4a43043326a703ce0.png
操纵如下：声明方法，添加注解@Extend注解内填写组件名称，调用方法。
// @Extend(组件名称)
// function 函数名称(参数1，参数2)
//
@Extend(Text)
function tFun(c: ResourceColor, m: string) {
.textAlign(TextAlign.Center)
.backgroundColor(c)
.fontColor(Color.White)
.fontSize(30)
.onClick(() => {
AlertDialog.show({
message: '轮播图 ' + m
})
})
}
@Entry
@Component
struct Index {
build() {
Column() {
Swiper() {
Text('1').tFun(Color.Red, '1')
Text('2').tFun(Color.Black, '2')
}
.width('100%')
.backgroundColor(Color.Black)
.aspectRatio(2.4)
.loop(true)
.autoPlay(true)
.interval(2000)
}.padding(20)
}
} @Styles 抽取通用属性，事件 不同组件，相同属性和事件情况,不支持传参
操纵方法: 声明方法,添加注解@Style，构建方法体，调用方法
@Styles
function fuStyle(){
.width(100)
.height(100)
.backgroundColor(Color.Blue)
.onClick(()=>{
AlertDialog.show({
message:"弹框弹框"
})
})
}
Text('111').fuStyle()
Button('按钮').fuStyle() https://i-blog.csdnimg.cn/direct/8d50ad2c3fbf46239db1d97b5a07da8e.png
9).@Builder 自定义构建函数（结构，样式，事件）
假设要实现下面结果，代码重复性高，可使用@Builder,定义在全局不能访问组件内变量（删除function）。
https://i-blog.csdnimg.cn/direct/4ef05272577d40d4bcbdc24ce2f64e2b.png
Row({space:10}){
Column({space:10}) {
Image($r('app.media.img')).width('100%').aspectRatio(2.4)
Text('图1')
}.width('25%')
.onClick(()=>{
AlertDialog.show({
message:'点击事件1'
})
})
Column({space:10}) {
Image($r('app.media.img_2')).width('100%').aspectRatio(2.4)
Text('图2')
}.width('25%')
.onClick(()=>{
AlertDialog.show({
message:'点击事件2'
})
})
Column({space:10}) {
Image($r('app.media.img_1')).width('100%').aspectRatio(2.4)
Text('图3')
}.width('25%')
.onClick(()=>{
AlertDialog.show({
message:'点击事件3'
})
}) @Builder
function itemBuilder(txt:string,icon: ResourceStr){
Column({space:10}) {
Image(icon).width('100%').aspectRatio(2.4)
Text(txt)
}.width('25%')
.onClick(()=>{
AlertDialog.show({
message:'点击'+txt
})
})
}
Row({space:10}){
itemBuilder('图1',$r('app.media.img'))
itemBuilder('图2',$r('app.media.img_1'))
itemBuilder('图2',$r('app.media.img_2'))
} 10).滚动容器Scroll
当子组件的结构凌驾Scroll时内容滚动
用法： 内部支持一个子组件（Column，Row）
Scroll(){
Column(){
}
}.width('100%')
.height('400')
.scrollable(ScrollDirection.Vertical) 属性：
https://i-blog.csdnimg.cn/direct/dbcc9eda934c4b50bc00d0a69b22a4e3.png
控制器：
实例化控制器-》绑定Scorll组件-》控制器方法 控制滚动，控制器属性，获取滚动间隔
@Entry
@Component
struct Index {
myScroll:Scroller=new Scroller();//1.实例化控制器
build() {
Column({space:10}) {
Scroll(this.myScroll) {//2.绑定组件
Column({space:10}) {
ForEach(Array.from({ length: 10 }), (item: string, index: number) => {
Text("文字"+index).width('100%').height(50).backgroundColor(Color.Orange).borderRadius(10)
.textAlign(TextAlign.Center)
})
}
}.width('100%')
.height('400')
Button('控制滚动条位置').onClick(()=>{
this.myScroll.scrollEdge(Edge.Top)//调用控制方法
})
Button('获取已经滚动的距离').onClick(()=>{
lety=this.myScroll.currentOffset().yOffset
let x=this.myScroll.currentOffset().xOffset
console.log("x",x)
console.log("y",y)
})
}.padding(20)
}
} https://i-blog.csdnimg.cn/direct/85014c1a5985460894859b0ee101efd1.png
11).事件
onScroll(x,y)=>{} 滚动时触发事件 x,y为滚动的间隔不完整。
12).容器组件：Tabs导航栏
Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航范例，结构会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。
https://i-blog.csdnimg.cn/direct/a24255e45e8642faae2c9e5172f19c9a.png
TabContent组件内只支持一个子组件
https://i-blog.csdnimg.cn/direct/c33fa24bbdd94f5e98948ab29f038ecc.png
滚动导航栏：barMode()
BarMode.Scrollable 默认BarMode.Fixed
@Entry
@Component
struct Index {
build() {
Tabs(){
TabContent(){
Text("首页内容")
}.tabBar("首页")
TabContent(){
Text("推荐内容")
}.tabBar("推荐")
TabContent(){
Text("发现内容")
}.tabBar("发现")
TabContent(){
Text("我的内容")
}.tabBar("我的")
TabContent(){
Text("新闻内容")
}.tabBar("新闻")
TabContent(){
Text("科学内容")
}.tabBar("科学")
TabContent(){
Text("心理内容")
}.tabBar("心理")
TabContent(){
Text("服装内容")
}.tabBar("服装")
}.vertical(false)
.scrollable(false)
.barMode(BarMode.Scrollable)
}
} https://i-blog.csdnimg.cn/direct/0bf855139a784ea4b820bd7749b39283.png
自定义组件：使用@Builder注解举行更换TabBar内容。
高亮：https://i-blog.csdnimg.cn/direct/b98fcd3263284994a56615554e46d4aa.png
https://i-blog.csdnimg.cn/direct/3349576d806c4d9e868c86530170646a.png
2).class类
类是用于创建对象模板，同时类声明也会引入一个新范例，可定义着实例属性，方法和构造函数。
https://i-blog.csdnimg.cn/direct/95b8b14dfe154e52b485bdcd4e588a99.png
语法：属性需给初始值，无初始值必要在属性加 ？（问号），或者构造函数，可选操纵值.在访问可选操纵值的属性时，必要为属性赋值或者 类.属性？访问属性（工具会自动填充）
class 类名{
//1.实例属性
//2.构造函数
//3.方法
}
class Preson{
name:string='jack'
food?:string
}
class Cat{
name:string='Tom'
foods?:string
}
letp:Cat=new Cat();
console.log('aaaaa',p.name);
console.log('aaaaa',p.foods?.length);
class Cat{
name:string
foods:string
constructor(name:string,foods:string) {
this.name=name;
this.foods=foods;
}
}
letp:Cat=new Cat('aaa','ccc'); 方法：
方法名（参数）：返回值范例{}
class Cat{
name:string
foods:string
constructor(name:string,foods:string) {
this.name=name;
this.foods=foods;
}
say(name:string){
console.log("说",name+'想要吃'+this.foods)
}
}
letp:Cat=new Cat('小喵咪','小罐头');
p.say("小猫咪") 静态属性和静态方法：static修饰 类名.调用
class Robot {
static version: string = 'v2.0'
static getRandom(): number {
return Math.random()
}
}
console.log('版本：',Robot.version)
console.log('随机数：',Robot.getRandom()) 继续extends和super关键字 ：
类可以通过 继续 快速获取别的一个类的 属性 和 方法
子类通过super访问父类的实例字段，实例方法和构造函数
classPerson{
name:string
age:number
constructor(name:string,age:number) {
this.name=name
this.age=age
}
say(name:string,age:number){
console.log("说点什么",name+`年龄：${age}`)
}
}
class Student extends Person{
grade:string
constructor(name: string,age:number,grade:string) {
super(name,age)
this.grade=grade
}
say(): void {
console.log("说点什么",this.name+`年龄：${this.age}`+'岁,年级'+this.grade)
}
}
let s:Student=new Student("小张",18,'小学生')
s.say() instanceof
判定某个对象是否为某个类的实例
typeof 获取对象的范例
console.log('s是否为Person实例',s instanceof Person)
console.log('s的类型是',typeof s) 修饰符：
readonly 无法修改，
private 不能在声明该成员的类之外访问，
protected 派生子类举行访问，
public 公开的，任何位置可访问
https://i-blog.csdnimg.cn/direct/481000bf4c9d4826a70e9cfb06b8e090.png
剩余参数和展开运算符 ...数组名
剩余参数： 将函数或方法中的一个不定数量的参数表现为一个数组
展开运算： 将数组展开拼接。
function sum(a:number,b:number,...arr:number[]){
let total=a+b;
for (let a of arr){
total+=a
}
console.log("剩余运算符结果：",total)
return total;
}
sum(1,2,3,4,5,6)
let arr1:number[]=
let arr2:number[]=
letarr3:number[]=[...arr1,...arr2]
console.log("展开运算符结果",arr3);
3).泛型：
泛型函数：
function fn<T> (param:T):T{
return param;
}
fn<string>('字符串字符串'); 泛型束缚：
之前的泛型没有限定范例，使用泛型束缚限定泛型范例
interface length{
length:number
}
functionfun<T extends length>(param:T){
console.log("泛型约束")
}
fun<string>('string') 多个泛型参数
function fun1<T1,T2>(param1:T1,param2:T2){
console.log("参数1",param1)
console.log("参数2",param2)
}
fun1<string,string>('001','002')
泛型接口
interface inf<T>{
id:(value:T)=>T
ids:()=>T[]
}
let obj:inf<number>={
id(value:number){
return value;
},
ids(){
return
}
} 泛型类
class Person<T>{
id:T
constructor(id:T) {
this.id=id
}
getId():T{
return this.id
}
}
let p=new Person<Number>(10);
console.log('泛型类',JSON.stringify(p))
4).模块化语法：
把一个大的步伐，拆分成若干小的模块，通过特定语法举行任意组合。
1.默认导出导入：
一个模块，只能默认导出一个值或对象。使用时 自定义导入名称。
export default 导出内容。import xxx from '模块路径'
//新建文件中，导出语法
let num:number=10
export default num;
//导入语法
import num from '../tools/module1'
console.log("展开运算符结果",num); 2.按需导入：
exportlet num:number=10
export let name:string='小张'
import {name} from '../tools/module1'
console.log("导入结果",name);
let num:number=10
let name:string='小张'
export {
num,name
}
import {num,name} from '../tools/module1'
console.log("导入结果",name); 3.全部导入
import * as module1 from '../tools/module1'
console.log("导入结果",module1.num); 5).自定义组件：
通用的样式事件
@Component
struct module {
build() {
Row() {
Text("组件一").width('100%').backgroundColor(Color.Orange)
.onClick(()=>{
AlertDialog.show({
message:'弹窗'
})
})
}
}
}
@Entry
@Component
struct Index {
build() {
Column(){
module()
}
}
} 成员变量和成员函数：
自定义其他成员函数，以及成员变量。
成员变量的值->外部可传参覆盖
@Component
struct module {
title: string = '标题'
extra: string = '小标题'
getMol = () => {
AlertDialog.show({
message: '弹框'
})
}
sayHi() {
AlertDialog.show({
message: '你好'
})
}
build() {
Column() {
Row() {
Text(this.title).onClick(() => {
this.sayHi()
})
Text(this.extra).onClick(() => {
this.getMol()
}
)
}.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row() {
Text('内容部分')
}
}.width('100%')
.height(200)
.backgroundColor(Color.White)
}
}
@Entry
@Component
struct Index {
build() {
Column() {
module({
title: '我的订单',
extra: '查看全部',
getMol() {
AlertDialog.show({
message: '查看全部弹框'
})
}
}).margin(5)
module().margin(5)
}
.padding(10)
.width('100%')
.backgroundColor(Color.Orange)
.height('100%')
}
} https://i-blog.csdnimg.cn/direct/045b52e2f1a04428bba843b3577a7d0b.png
@BuilderParam 传递UI
使用@BuilderParam构建函数，一让自定义组件允许外部传递UI
定义@BuilderParam 担当外部传入的ui,并设置默认值
@Component
struct module {
//1.声明BuilderParam
@BuilderParam ContentBuilder: () => void = this.defaultBuilder
title: string = '标题'
extra: string = '小标题'
getMol = () => {
AlertDialog.show({
message: '弹框'
})
}
//2.默认值赋值
@Builder
defaultBuilder() {
Text('默认内容')
}
build() {
Column() {
Row() {
Text(this.title)
Text(this.extra)
}.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row() {
//3.使用
this.ContentBuilder()
}
}.width('100%')
.height(200)
.backgroundColor(Color.White)
}
}
@Entry
@Component
struct Index {
build() {
Column() {
module({
title: '我的订单',
extra: '查看全部',
getMol() {
AlertDialog.show({
message: '查看全部弹框'
})
},
}) {
//4.传入内容
Button("按钮按钮")
}
}
.padding(10)
.width('100%')
.backgroundColor(Color.Orange)
.height('100%')
}
} 多个@BuilderParam
@Component
struct module {
//1.声明BuilderParam
@BuilderParam contentBuilder: () => void = this.defaultBuilder
@BuilderParam builder1: () => void = this.defaultBuilder1
title: string = '标题'
extra: string = '小标题'
//2.默认值赋值
@Builder
defaultBuilder() {
Text('默认内容')
}
@Builder
defaultBuilder1() {
Text('默认内容')
}
build() {
Column() {
Row() {
Text(this.title)
Text(this.extra)
this.builder1()
}.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
Row() {
//3.使用
this.contentBuilder()
}
}.width('100%')
.height(200)
.backgroundColor(Color.White)
}
}
@Entry
@Component
struct Index {
//设置内容
@Builder builder1(){
Button('替换按钮')
}
@Builder builder2(){
Text('替换表头')
}
build() {
Column() {
module({
title: '我的订单',
extra: '查看全部',
contentBuilder:this.builder1,//使用内容
builder1:this.builder2//使用内容
})
}
.padding(10)
.width('100%')
.backgroundColor(Color.Orange)
.height('100%')
}
} 状态管理:
当运行时的状态变量变化，带来UI的重新渲染，在ArkUI 中统称未 状态管理机制。变量必须被装饰器装饰可以成为状态变量。
https://i-blog.csdnimg.cn/direct/eb8b2b0c562a462dae34f972ef5186a6.png
Components :组件干系的装饰器。
数据传递：父组件@State 传递给子组件 @Prop,单项传递
@Link可以双向传递数据
@Provid可以直接个孙子组件传递
@State 自己状态
留意:不是状态变量的全部更改都会引起刷新。只有可以被框架观察到的修改才会引起U刷新。1.boolean、string、number范例时，可以观察到数值的变化
2.class或者Object时，可观察 自身的赋值 的变化，第一层属性赋值的变化，即Object.keys(observedObject)返回的属性。
interface Car{
name:string
}
interface Person{
name:string,
age:number,
car:Car
}
@Entry
@Component
struct Index {
@State Person:Person ={
name:'杰克',
age:18,
car:{
name:'宝马车'
}
}
build() {
Column() {
Text(this.Person.name+'拥有一辆'+this.Person.car.name).width('50%').textAlign(TextAlign.Center)
Button('换').onClick(()=>{
this.Person.car.name='劳斯莱斯'//无法触发渲染
this.Person.car={//标准写法
name:'劳斯莱斯'
}
console.log("----",JSON.stringify(this.Person))
})
}.width('100%')
}
} @Prop 父子组件传递数据
@Prop 装饰的变量可以和父组件创建单向的同步关系。
@Prop 装饰的变量是可变的，但是变化不会同步回其父组件
https://i-blog.csdnimg.cn/direct/d1a7638a9e6c473e84bb3663e1e8bbc1.png
@Component
struct SonCom{
@Prop sCar:string=''
changCar=()=>{}
build(){
Column(){
Text('子组件'+this.sCar)
Button('换车').onClick(
()=>{
this.changCar()
}
)
}.backgroundColor(Color.Grey)
.height(50)
.width(100)
.justifyContent(FlexAlign.Center)
}
}
@Entry
@Component
struct Index {
@State fCar:string='劳斯莱斯'
build() {
Column() {
Text('父组件'+this.fCar)
Button('换车').onClick(()=>{
this.fCar='迈巴赫'//父传子
})
SonCom({
sCar:this.fCar,
changCar:()=>{//使用箭头函数进行传递
this.fCar='布加迪'
}
})
}.width('100%').backgroundColor(Color.Orange)
.height(200)
.justifyContent(FlexAlign.Center)
}
} List 组件：
https://i-blog.csdnimg.cn/direct/42190bd88dbb45558874e9a0e692829d.pnghttps://i-blog.csdnimg.cn/direct/5ddeaa3ec1234809b2ebd55fa8342903.pnghttps://i-blog.csdnimg.cn/direct/bcedaa92b6964080b86cdd0860438dad.png
@Link 实现父组件和子组件的双向同步
1.将父组件的状态属性传递给子组件
2.子组件通过@Link修饰即可
3.分别测试基础和复杂范例
@Procide @Consume后代组件 @都是装饰器
https://i-blog.csdnimg.cn/direct/c9d25abf98e14256aa6d70cff06b6ffe.png
6)路由配置跳转
1.创建页面 2.配置路由
https://i-blog.csdnimg.cn/direct/f2a4e4384f444ea0a8268b13bd3a01d3.pnghttps://i-blog.csdnimg.cn/direct/69ebe3f3da0d4191a4b0788c40d02339.png
//1.导包
import { router } from '@kit.ArkUI'
//2.事件调用 传参
Button('跳转').onClick(() => {
router.pushUrl({
url:'pages/EduiPage',
params:{
name:'华山论剑'
}
})
})
//3.获取参数
router.getParams()as 类型
//4.返回
router.back()
页面栈：
https://i-blog.csdnimg.cn/direct/54fc2d39473944cd9935a3cac021ba42.png
https://i-blog.csdnimg.cn/direct/3f5556404206484bad6133e8df17689a.png
7).生命周期
组件和页面在创建，显示，销毁的一整个过程，会自动执行一系列的 生命周期钩子（函数），在特定的阶段执行自己的代码。
区分页面和组件 @Entry
https://i-blog.csdnimg.cn/direct/6aa9ef7c5af64e4daae4e393ea27b64c.pnghttps://i-blog.csdnimg.cn/direct/00a98ccba3664964a39a9a5d79664369.png
Stage模子
应用模子是体系为开发者提供的应用步伐所需能力的抽象提炼，它提供了应用步伐必备的组件和运行机制。
1.实现某个功能必要编写哪个文件
2.怎样感知应用的状态变化（启动，关闭，切后台）
3.怎样调解项目配置
https://i-blog.csdnimg.cn/direct/6165591e49724d86bd5edade25511524.pngapp.json5
https://i-blog.csdnimg.cn/direct/c3be912cd0d048089349560d76bba28d.png
修改桌面图标
https://i-blog.csdnimg.cn/direct/ca66feacf7184ca8b43f85e7a8f6af02.png
UIAbility组件
每一个UIAbility实例，都对应一会近来使命列表的使命。
UIAbility是包含用户界面的应用组件，重要用于和用户举行交互。
一个应用可以有单个或多个UIAbility
UIAbility 配置启动页面
UIAbility生命周期
UIAbility组件间交互
https://i-blog.csdnimg.cn/direct/5f5dc32969be45beb81d36c1384385d5.png
https://i-blog.csdnimg.cn/direct/96491261a9e048ebb7c6c8327d2d5030.png配置Ability加载页面
https://i-blog.csdnimg.cn/direct/148adc4c867543669570596538959090.png
生命周期
https://i-blog.csdnimg.cn/direct/0316969aa4f9430892584452ee297d44.png
https://i-blog.csdnimg.cn/direct/d05f4ab5e03442f69130d1308fd85eb9.png
同模块-拉起另一个Ability
https://i-blog.csdnimg.cn/direct/77cb73b9f06a44e9852a4885f12c1623.png
跨模块-UIAbility
修改包名，修改编译内容
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]