小桥流水78

这个屌丝很懒，什么也没留下！

热门标签

HarmonyOS开发实操笔记（未整理版）_harmony 填充剩余空间

作者：小桥流水78 | 2024-08-12 12:59:49

踩

harmony 填充剩余空间

声明：学习来自黑马程序员

一、鸿蒙APP开发

1.开发者工具：DevEco Studio 解压-双击-安装。

下载地址：DevEco Studio-HarmonyOS Next Beta版-华为开发者联盟

2.ArkTS基础语法

1.注解：//

日志打印：console.log('',''); 查看方式：最下侧日志选项。最右侧预览器选项。

2.数据类型：

命名规则：包含数字，字母，下划线，￥，不能数字开头，区分大小写，不能使用内置关键字。

变量：

字符串-String，数字：number ，布尔：boolean

格式： let 名称：类型 = 值，例如 let title:string=‘飒飒’

修改：title='施耐德'

常量：不能修改

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).

字符串拼接：加号 +，或者${变量} 使用 ${} 需要反引号包裹 `文字${变量}文字`


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():四舍五入转字符串，可设置暴力几位小数。

数组：let 数组名：类型[] =[数据1,数据2] 索引：从0开始


let arr:string[]=['1','2','3']
console.log('数组',arr[0])

联合类型：let 变量：类型1|类型2|类型3=值；


let judge:number | string =100
judge='A+'
judge='优秀'
 
//联合类型可以将变量值约定在一组数据范围内进行选择
let gender : 'man' | 'women' ='man'

枚举类型：


enum ThemeColor{
    Red='#ff0f29',
    Orange='#ff7100',
    Green ='#30b30e'
}
let color:ThemeColor=ThemeColor.Red

函数：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)

箭头函数：let 函数名称 =（形参）=>{函数体 return 结果}

对象：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 接口名称{
 
    方法名：（参数：类型）=>返回值类型
}

数组：Array

查找：数组名[下标]

修改：数组名[下标] =新值

长度：数组名.length

开头新增元素：数组名.unshift() 返回操作后的数组长度

结尾新增元素：数组名.push()返回操作后的数组长度

从开头删：.shift()

从结尾删：.pop()

任意位置添加、删除素组元素：数组名.splice(起始位置，删除个数，新增元素1，新增元素2，......)

语句：if while switch

对象数组：包括对象的复杂数据，如果想要在日志中打印需要JSON.stringify(对象)；转为字符串格式。

1.build 决定界面的呈现

思路：1排版2内容3美化

2.ArkUI(方舟开发框架）搭建鸿蒙应用界面的框架。（组件）

最小布局单元是组件

组件分类：容器组件 Column，Row.(column space属性间隔）

基础组件:Text

build 有且只有一个根元素且是容器组件

组件属性方法：

文字颜色

.fontColor()

文字溢出显示为...：


Text('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
.textOverflow({
    overflow:TextOverflow.Ellipsis
})
.maxLines(2)
或者 .lineHeight()

Image 图片组件

Text组件中使用ImageSpan()组件，小图

加载本地图片：Image($r('app.media.product'))

输入框与按钮


TextInput(参数对象).属性方法
 
TextInput({placeholer:'占位符'}).type(InputType.Password)
 
Button('登录').width(200)

设计资源-svg图标（任意放大缩小不失真，可以改变颜色）图片格式推荐svg

1.图标：通过image使用

HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟

布局元素的组成

内边距：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
})

组件圆角


topLeft:左上角
topRight：右上角
bottomLetf：左下角
bottomRight：右下角
Text('圆角').borderRadius({
    topLeft:5,
    topRight：10,
    bottomLetf：15,
    bottomRight：20
)}

特殊圆角：

1.正圆

2.胶囊按钮


Text('正圆')
    .width(100)
    .heght(100)
    .borderRadius(50)
 
Text('胶囊')
    .width(150)
    .heght(50)
    .borderRadius(25)

背景属性：


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:默认尺寸

线性布局：

Column Row

布局子元素在主轴上的排列方式

在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴结束位置开始排布，或者均匀分割主轴的空间。

1.主轴起始位置对齐 2.主轴居中对齐 3.主轴结束位置对齐 4.贴边显示 5.间隙环绕

6.间隙均匀环绕

交叉轴：

属性：aIignItems

参数：枚举类型

水平方向：HorizontalAlign

垂直方向：VerticalAlign

row

column

自适应伸缩

设置 layoutWeight 的属性的子元素与兄弟元素，会按照权重分配主轴空间。

语法:.layoutWeight(数字）

复选框：CheckBox

text-span 对text中的文本，进行单独进行设置。


Checkbox()
Text(){
    Span('.....').fontColor('#32674f6')
    Span('.....')
}

填充组件：Blank() 填充剩余空白区域

弹性布局（Flex)：

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。

容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。

主轴为水平方向的Flex容器示意图


Flex({参数对象}）{
    子组件1
    子组件2
}
参数：
1.主轴方向：direction FlexDirection.Row
2.主轴对齐方式：justifyContent FlexAlign.Start
3.交叉轴对齐方式：alignItems ItemAlign.Auto
4.布局换行：wrap 单行布局 NoWarp 多行布局 Wrap

层叠效果：

绝对定位：参照父组件的左上角进行偏移，绝对定位后的组件不在占用自身原有位置。

语法：position(位置对象)

参数：{x:水平偏移,y:垂直偏移}

权重：zIndex(数值顺序)


Text('文字内容')
    .position({x:50,y:50})

层叠布局：Stack({ }){},省去定位的测量距离的时间。


Stack({
 alignContent:Alignment.Center    
}){
    Item1()
    Item2()
  }

滚动区域：Scroll（）{}

交互
点击事件：


组件.onClick(()=>{
    AlertDialog.show({
        message:'弹框'
    })
})

状态管理：@State 装饰变量

普通变量：只在初始化时渲染，后续不在刷新

状态变量：需要装饰器装饰，改变会引起UI渲染刷新（必须设置类型和初始值）

定义在组件内的变量需要this访问

运算符：同Java相同

渲染控制：ForEach() 基于数组格式，渲染组件个数。

语法：ForEach(arr,(item,index)=>{})

案例：生肖抽卡

组件：Badge 角标


Badge({
    count:1,
    position:BadgePosition.RightTop,//位置
    style:{
        fontSize:14,
        badgeSize:50,
        badgeColor:'#fa2a2d'
    }
}){
    Image('图片地址')
}

布局：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})

轮播组件：Swiper

基本用法：Swiper（）{}

属性：

自定义：indicator需要传入一个indicator对象参数

宽高比：设定宽后，aspectRatio(数值) 适配更多设备使图片保持比例


.indicator(
        Indicator.dot()//小圆点
        .itemWidth(20)//默认的宽
          .itemHeight(20)//默认的高
          .color(Color.Black)//默认颜色
          .selectedItemWidth(30)//选中的宽
          .selectedItemHeight(30)//选中的高
          .selectedColor(Color.White)//选中的颜色
      )

样式和结构的重用：

@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()

@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'))
      }

滚动容器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)
  }
}

事件

onScroll(x,y)=>{} 滚动时触发事件 x,y为滚动的距离不完整。

容器组件：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内容。

高亮：

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);

泛型：

模块化语法：

把一个大的程序，拆分成若干小的模块，通过特定语法进行任意组合。

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);

自定义组件：

通用的样式事件


@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后代组件 @都是装饰器

二、能力套件开发

三、全场景开发

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/969917