一、鸿蒙APP开发
1.开发者工具:DevEco Studio 解压-双击-安装。
下载地址:DevEco Studio-HarmonyOS Next Beta版-华为开发者联盟
2.ArkTS基础语法
1.日志打印:
console.log('',''); 查看方式:最下侧日志选项。最右侧预览器选项。//注解
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).
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[0])
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)
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))
对象-方法
interface 接口名称{
方法名:(参数:类型)=>返回值类型
}
运算符优先级
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 有且只有一个根元素且是容器组件
组件属性方法:
文字颜色
.fontColor()
文字溢出显示为...:
Text('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
.textOverflow({
overflow:TextOverflow.Ellipsis
})
.maxLines(2)
或者 .lineHeight()
2).Image 图片组件
Text组件中使用ImageSpan()组件,小图
加载本地图片:Image($r('app.media.product'))
设计资源-svg图标(任意放大缩小不失真,可以改变颜色)图片格式推荐svg
图标:通过image使用
HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟
3).输入框与按钮
TextInput(参数对象).属性方法
TextInput({placeholer:'占位符'}).type(InputType.Password)
Button('登录').width(200)
4).布局元素的组成
内边距: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).背景属性:
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(数值)
背景图尺寸
名称: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.间隙均匀环绕
交叉轴:
属性:aIignItems
参数:枚举类型
水平方向:HorizontalAlign
垂直方向:VerticalAlign
row
column
自适应伸缩
设置 layoutWeight 的属性的子元素与兄弟元素,会按照权重分配主轴空间。
语法:.layoutWeight(数字)
2)弹性布局(Flex):
弹性布局(Flex)提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。
容器默认存在主轴与交叉轴,子元素默认沿主轴排列,子元素在主轴方向的尺寸称为主轴尺寸,在交叉轴方向的尺寸称为交叉轴尺寸。
主轴为水平方向的Flex容器示意图
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()
}
滚动区域:Scroll(){}
4).交互 点击事件:
组件.onClick(()=>{
AlertDialog.show({
message:'弹框'
})
})
5).状态管理:@State 装饰变量
普通变量:只在初始化时渲染,后续不在刷新
状态变量:需要装饰器装饰,改变会引起UI渲染刷新(必须设置类型和初始值)
定义在组件内的 变量需要this访问
运算符:同Java相同
渲染控制:ForEach() 基于数组格式,渲染组件个数。
语法:ForEach(arr,(item,index)=>{})
案例:生肖抽卡
组件: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)//列间距
组件透明度:opacity 0->1
元素的缩放:scale({x:1,y:1}) -1=>99 animation({duration:500})
7).轮播组件:Swiper
基本用法:Swiper(){}
属性:
自定义:indicator需要传入一个indicator对象参数
宽高比:设定宽后,aspectRatio(数值) 适配更多设备 使图片保持比例
.indicator(
Indicator.dot()//小圆点
.itemWidth(20)//默认的宽
.itemHeight(20)//默认的高
.color(Color.Black)//默认颜色
.selectedItemWidth(30)//选中的宽
.selectedItemHeight(30)//选中的高
.selectedColor(Color.White)//选中的颜色
)
8).样式和结构的重用:
@Extend 扩展组件(样式,事件)同组件情况
图中两个Text组件样式基本一致,部分参数不一致的情况下使用组件扩展
操作如下:声明方法,添加注解@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()
9).@Builder 自定义构建函数(结构,样式,事件)
假设要实现下面效果,代码重复性高,可使用@Builder,定义在全局不能访问组件内变量(删除function)。
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)
属性:
控制器:
实例化控制器-》绑定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(()=>{
let y=this.myScroll.currentOffset().yOffset
let x=this.myScroll.currentOffset().xOffset
console.log("x",x)
console.log("y",y)
})
}.padding(20)
}
}
11).事件
onScroll(x,y)=>{} 滚动时触发事件 x,y为滚动的距离不完整。
12).容器组件:Tabs导航栏
Tabs组件的页面组成包含两个部分,分别是TabContent和TabBar。TabContent是内容页,TabBar是导航页签栏,页面结构如下图所示,根据不同的导航类型,布局会有区别,可以分为底部导航、顶部导航、侧边导航,其导航栏分别位于底部、顶部和侧边。
TabContent组件内只支持一个子组件
滚动导航栏: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)
}
}
自定义组件:使用@Builder注解进行替换TabBar内容。
高亮:
2).class类
类是用于创建对象模板,同时类声明也会引入一个新类型,可定义其实例属性,方法和构造函数。
语法:属性需给初始值,无初始值需要在属性加 ?(问号),或者构造函数,可选操作值.在访问可选操作值的属性时,需要为属性赋值或者 类.属性?访问属性(工具会自动填充)
class 类名{
//1.实例属性
//2.构造函数
//3.方法
}
class Preson{
name:string='jack'
food?:string
}
class Cat{
name:string='Tom'
foods?:string
}
let p: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;
}
}
let p: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)
}
}
let p: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访问父类的实例字段,实例方法和构造函数
class Person{
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 公开的,任何位置可访问
剩余参数和展开运算符 ...数组名
剩余参数: 将函数或方法中的一个不定数量的参数表示为一个数组
展开运算: 将数组展开拼接。
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[]=[1,2,3]
let arr2:number[]=[4,5,6]
let arr3:number[]=[...arr1,...arr2]
console.log("展开运算符结果",arr3);
3).泛型:
泛型函数:
function fn<T> (param:T):T{
return param;
}
fn<string>('字符串字符串');
泛型约束:
之前的泛型没有限制类型,使用泛型约束限制泛型类型
interface length{
length:number
}
function fun<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 [1,2,3]
}
}
泛型类
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.按需导入:
export let 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%')
}
}
@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 中统称未 状态管理机制。变量必须被装饰器装饰可以成为状态变量。
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 装饰的变量是可变的,但是变化不会同步回其父组件
@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 组件:
@Link 实现父组件和子组件的双向同步
1.将父组件的状态属性传递给子组件
2.子组件通过@Link修饰即可
3.分别测试基础和复杂类型
@Procide @Consume后代组件 @都是装饰器
6)路由配置跳转
1.创建页面 2.配置路由
//1.导包
import { router } from '@kit.ArkUI'
//2.事件调用 传参
Button('跳转').onClick(() => {
router.pushUrl({
url:'pages/EduiPage',
params:{
name:'华山论剑'
}
})
})
//3.获取参数
router.getParams() as 类型
//4.返回
router.back()
页面栈:
7).生命周期
组件和页面在创建,显示,销毁的一整个过程,会自动执行一系列的 生命周期钩子(函数),在特定的阶段执行自己的代码。
区分页面和组件 @Entry
Stage模型
应用模型是系统为开发者提供的应用程序所需能力的抽象提炼,它提供了应用程序必备的组件和运行机制。
1.实现某个功能需要编写哪个文件
2.如何感知应用的状态变化(启动,关闭,切后台)
3.如何调整项目配置
app.json5
修改桌面图标
UIAbility组件
每一个UIAbility实例,都对应一会最近任务列表的任务。
UIAbility是包含用户界面的应用组件,主要用于和用户进行交互。
一个应用可以有单个或多个UIAbility
UIAbility 配置启动页面
UIAbility生命周期
UIAbility组件间交互
配置Ability加载页面
生命周期
同模块-拉起另一个Ability
跨模块-UIAbility
修改包名,修改编译内容