【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记（十）

news2024/11/19 5:43:38

课程地址： 黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发

（本篇笔记对应课程第 17 节）

P17《16.Ark-状态管理@Prop @Link @Provide @Consume》

将上一节写出的代码进行功能模块封装：1、任务进度卡片为一个组件；2、新增任务按钮与任务列表展示为一个组件

1、任务进度卡片抽取为一个组件
在这里插入图片描述

2、使用这个组件并传递参数，此时 struct PropPage为父组件， TaskStatistics 为子组件。传递参数这里报错了：因为父组件和子组件里同时都用 @State 装饰器声明了同样的变量。

在这里插入图片描述

将子组件中声明变量前的 @State 去掉，发现不报错了：

在这里插入图片描述

此时发现父组件中数据变化了，但子组件并不知道这些数据变化了：

在这里插入图片描述

如需要父组件与子组件中的数据进行联动，就需要使用 @Prop 或者 @Link 装饰器。两者之间的区别是：@Prop 是数据的单向同步，即只会在父组件中修改数据影响子组件，反之不会；实现原理是将数据copy了一份传递给了子组件；而 @Link是数据的双向同步，父组件修改数据会影响子组件，子组件中修改数据也会影响父组件，实现原理是将数据的引用传递给了子组件，父组件与子组件修改的是同一份数据。

在这里插入图片描述

在子组件中的变量前加上@Prop 装饰，此时发现提示：**@Prop 修饰的变量不能再初始化。因为@Prop是期望父组件传递过来数据，所以不需要再自己初始化了。**删去初始化赋值。

在这里插入图片描述

此时发现任务管理子组件中的数据可以更新了。这样就实现了父组件到子组件的单向数据联动。

在这里插入图片描述

将新增任务与任务列表部分抽取为子组件：将其需要的state数据、操作数据的方法以及自定义的构建函数 deleteBtn 全部放到这个子组件中去，因为它使用到了这些功能：

在这里插入图片描述

在这里插入图片描述

使用这个子组件并且父组件中向其传递参数：

在这里插入图片描述

子组件中相应的数据改为 @Prop 声明：

在这里插入图片描述

由于需要在子组件中也改变 总任务数量与已完成任务数量的值，所以需要用 @Link 传递这两个数据：

在这里插入图片描述

此时发现父组件中传递数据报错了：

在这里插入图片描述

因为 @Link 需要传递一个引用给子组件，用变量前面加上 $ 的方式代表传递这个变量的引用，这样子组件对数据的修改父组件也可以感知到了：

在这里插入图片描述

如果子组件不需要对数据进行修改，只用数据做渲染展示，那么使用 @Prop 传递；如果子组件需要对数据进行修改，那么使用 @Link 传递。

官方文档中写 @Prop可以初始化，还写 @Prop 允许父组件是 数组，儿子是元素，但实际上是不行的！
在这里插入图片描述

验证一下对象类型：

在这里插入图片描述

用 @Prop 装饰一个对象类型数据，会发现有提示：@Prop 装饰的数据必须是 string、number、boolean类型。

在这里插入图片描述

在这里插入图片描述

@Link 是允许传递对象的：

在这里插入图片描述

在这里插入图片描述

@Link 支持传递对象类型，而@Prop不支持传递对象类型，但可以传递对象的属性。

@Provide 与 @Consume ：
在这里插入图片描述

父组件中改为 @Provide，子组件中改为 @Consume，此时发现报错了：

在这里插入图片描述

因为@Provide不需要显示传递参数，将传参去掉：

在这里插入图片描述

同时子组件中使用 @Consume 来接收：

在这里插入图片描述

@Prop 与 @Link 的选择：如果子组件不需要修改数据，只用数据来渲染展示，则使用 @Prop ；如果子组件需要修改数据，则使用 @Link。

@Provide @Consume 与 @Prop @Link 的选择：如果是父子组件传递，没必要使用@Provide @Consume ，因为它不需要显示传递参数，内部做了维护，肯定会造成一些性能的损耗；所以父子组件间传递尽量使用 @Prop @Link ；跨级组件传递可以使用 @Provide @Consume 。

注意：@Provide @Consume 祖组件与后代组件中传递的数据是双向同步的。

在这里插入图片描述

实践：

1、拆分子组件并使用 @Prop @Link 传递数据：


class Task {
  static id:number = 1

  // 任务名称
  name:string = `任务${Task.id++}`
  // 任务状态：是否完成
  finished:boolean = false
}

@Styles function cardStyle(){
  .width('100%')
  .height(120)
  .padding(10)
  .backgroundColor('#fff')
  .borderRadius(8)
}


@Entry
@Component
struct Index {
  // 总任务数量
  @State totalTask:number = 0
  // 已完成任务数量
  @State finishTask:number = 0
  // 任务列表
  @State tasks:Task[] = []

  build() {
    Row() {
      Column() {
        // 1、任务进度卡片
        TaskStatistics({ totalTask:this.totalTask, finishTask:this.finishTask })

        // 2、使用任务列表子组件
        TaskList({ totalTask:$totalTask, finishTask:$finishTask })

      }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Start)

    }
    .height('100%')
    .width('100%')
    .padding({top:20,bottom :20, left:10,right:10})
    .backgroundColor('#efefef')
  }


}

// 任务进度卡片子组件
@Component
struct TaskStatistics{
  @Prop finishTask:number
  @Prop totalTask:number

  build(){
    Row(){
      Text('任务进度：')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)

      Stack(){
        Progress({
          value : this.finishTask,
          total : this.totalTask,
          type : ProgressType.Ring
        })

        Row(){
          Text(this.finishTask.toString())
          Text(`/${this.totalTask.toString()}`)
        }
      }
    }
    .cardStyle()
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

// 新增任务与任务列表子组件
@Component
struct TaskList{
  // 总任务数量
  @Link totalTask:number
  // 已完成任务数量
  @Link finishTask:number
  // 任务列表
  @State tasks:Task[] = []

  handleTaskChange(){
    // 更新任务总数量
    this.totalTask = this.tasks.length
    // 更新已完成任务数量
    this.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column(){
      // 2、新增任务按钮
      Button('新增任务')
        .width(200)
        .margin({top:20, bottom:20})
        .onClick(()=>{
          // 新增任务
          this.tasks.push(new Task())
          // 更新任务总数量
          // this.totalTask = this.tasks.length
          this.handleTaskChange()
        })

      // 3、任务列表展示
      List(){
        ForEach(this.tasks,(item:Task,index)=>{
          ListItem(){
            Row(){
              Text(item.name)
              Checkbox()
                .select(item.finished)
                .onChange(val => {
                  // 更新任务状态
                  item.finished = val
                  // 更新已完成任务数量
                  // this.finishTask = this.tasks.filter(item => item.finished).length
                  this.handleTaskChange()
                })
            }
            .cardStyle()
            .height(60)
            .margin({bottom:10})
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .swipeAction({ end: this.deleteBtn(index)})
        })
      }
      .layoutWeight(1)
    }
  }

  @Builder deleteBtn(index){
    Button(){
      Image($r('app.media.icon_delete'))
        .width(30)
        .fillColor(Color.Red)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(6)
    .onClick(() => {
      this.tasks.splice(index,1)
      this.handleTaskChange()
    })
  }
}

2、验证 @Prop 不支持对象类型，仅支持对象属性的传递；而 @Link 支持传递对象类型：


class Task {
  static id:number = 1

  // 任务名称
  name:string = `任务${Task.id++}`
  // 任务状态：是否完成
  finished:boolean = false
}

class Stat {
  // 总任务数量
  totalTask:number = 0
  // 已完成任务数量
  finishTask:number = 0
}

@Styles function cardStyle(){
  .width('100%')
  .height(120)
  .padding(10)
  .backgroundColor('#fff')
  .borderRadius(8)
}


@Entry
@Component
struct Index {
  // 总任务数量
  // @State totalTask:number = 0
  // 已完成任务数量
  // @State finishTask:number = 0

  @State stat:Stat = new Stat()

  // 任务列表
  @State tasks:Task[] = []

  build() {
    Row() {
      Column() {
        // 1、任务进度卡片
        TaskStatistics({ totalTask:this.stat.totalTask, finishTask:this.stat.finishTask })

        // 2、使用任务列表子组件
        // TaskList({ totalTask:$totalTask, finishTask:$finishTask })
        TaskList({ stat:$stat })

      }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Start)

    }
    .height('100%')
    .width('100%')
    .padding({top:20,bottom :20, left:10,right:10})
    .backgroundColor('#efefef')
  }


}

// 任务进度卡片子组件
@Component
struct TaskStatistics{
  @Prop finishTask:number
  @Prop totalTask:number

  build(){
    Row(){
      Text('任务进度：')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)

      Stack(){
        Progress({
          value : this.finishTask,
          total : this.totalTask,
          type : ProgressType.Ring
        })

        Row(){
          Text(this.finishTask.toString())
          Text(`/${this.totalTask.toString()}`)
        }
      }
    }
    .cardStyle()
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

// 新增任务与任务列表子组件
@Component
struct TaskList{
  // 总任务数量
  // @Link totalTask:number
  // 已完成任务数量
  // @Link finishTask:number

  @Link stat:Stat
  // 任务列表
  @State tasks:Task[] = []

  handleTaskChange(){
    // 更新任务总数量
    // this.totalTask = this.tasks.length
    this.stat.totalTask = this.tasks.length
    // 更新已完成任务数量
    // this.finishTask = this.tasks.filter(item => item.finished).length
    this.stat.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column(){
      // 2、新增任务按钮
      Button('新增任务')
        .width(200)
        .margin({top:20, bottom:20})
        .onClick(()=>{
          // 新增任务
          this.tasks.push(new Task())
          // 更新任务总数量
          // this.totalTask = this.tasks.length
          this.handleTaskChange()
        })

      // 3、任务列表展示
      List(){
        ForEach(this.tasks,(item:Task,index)=>{
          ListItem(){
            Row(){
              Text(item.name)
              Checkbox()
                .select(item.finished)
                .onChange(val => {
                  // 更新任务状态
                  item.finished = val
                  // 更新已完成任务数量
                  // this.finishTask = this.tasks.filter(item => item.finished).length
                  this.handleTaskChange()
                })
            }
            .cardStyle()
            .height(60)
            .margin({bottom:10})
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .swipeAction({ end: this.deleteBtn(index)})
        })
      }
      .layoutWeight(1)
    }
  }

  @Builder deleteBtn(index){
    Button(){
      Image($r('app.media.icon_delete'))
        .width(30)
        .fillColor(Color.Red)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(6)
    .onClick(() => {
      this.tasks.splice(index,1)
      this.handleTaskChange()
    })
  }
}

3、使用 @Provide 和 @Consume：


class Task {
  static id:number = 1

  // 任务名称
  name:string = `任务${Task.id++}`
  // 任务状态：是否完成
  finished:boolean = false
}

class Stat {
  // 总任务数量
  totalTask:number = 0
  // 已完成任务数量
  finishTask:number = 0
}

@Styles function cardStyle(){
  .width('100%')
  .height(120)
  .padding(10)
  .backgroundColor('#fff')
  .borderRadius(8)
}


@Entry
@Component
struct Index {
  // 总任务数量
  // @State totalTask:number = 0
  // 已完成任务数量
  // @State finishTask:number = 0

  // @State stat:Stat = new Stat()
  @Provide stat:Stat = new Stat()

  // 任务列表
  @State tasks:Task[] = []

  build() {
    Row() {
      Column() {
        // 1、任务进度卡片
        TaskStatistics()

        // 2、使用任务列表子组件
        // TaskList({ totalTask:$totalTask, finishTask:$finishTask })
        TaskList()

      }
        .width('100%')
        .height('100%')
        .justifyContent(FlexAlign.Start)

    }
    .height('100%')
    .width('100%')
    .padding({top:20,bottom :20, left:10,right:10})
    .backgroundColor('#efefef')
  }


}

// 任务进度卡片子组件
@Component
struct TaskStatistics{
  /*@Prop finishTask:number
  @Prop totalTask:number*/

  @Consume stat:Stat

  build(){
    Row(){
      Text('任务进度：')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)

      Stack(){
        Progress({
          /*value : this.finishTask,
          total : this.totalTask,*/
          value : this.stat.finishTask,
          total : this.stat.totalTask,
          type : ProgressType.Ring
        })

        Row(){
          /*Text(this.finishTask.toString())
          Text(`/${this.totalTask.toString()}`)*/
          Text(this.stat.finishTask.toString())
          Text(`/${this.stat.totalTask.toString()}`)
        }
      }
    }
    .cardStyle()
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

// 新增任务与任务列表子组件
@Component
struct TaskList{
  // 总任务数量
  // @Link totalTask:number
  // 已完成任务数量
  // @Link finishTask:number

  // @Link stat:Stat
  @Consume stat:Stat

  // 任务列表
  @State tasks:Task[] = []

  handleTaskChange(){
    // 更新任务总数量
    // this.totalTask = this.tasks.length
    this.stat.totalTask = this.tasks.length
    // 更新已完成任务数量
    // this.finishTask = this.tasks.filter(item => item.finished).length
    this.stat.finishTask = this.tasks.filter(item => item.finished).length
  }

  build() {
    Column(){
      // 2、新增任务按钮
      Button('新增任务')
        .width(200)
        .margin({top:20, bottom:20})
        .onClick(()=>{
          // 新增任务
          this.tasks.push(new Task())
          // 更新任务总数量
          // this.totalTask = this.tasks.length
          this.handleTaskChange()
        })

      // 3、任务列表展示
      List(){
        ForEach(this.tasks,(item:Task,index)=>{
          ListItem(){
            Row(){
              Text(item.name)
              Checkbox()
                .select(item.finished)
                .onChange(val => {
                  // 更新任务状态
                  item.finished = val
                  // 更新已完成任务数量
                  // this.finishTask = this.tasks.filter(item => item.finished).length
                  this.handleTaskChange()
                })
            }
            .cardStyle()
            .height(60)
            .margin({bottom:10})
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .swipeAction({ end: this.deleteBtn(index)})
        })
      }
      .layoutWeight(1)
    }
  }

  @Builder deleteBtn(index){
    Button(){
      Image($r('app.media.icon_delete'))
        .width(30)
        .fillColor(Color.Red)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(6)
    .onClick(() => {
      this.tasks.splice(index,1)
      this.handleTaskChange()
    })
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1683517.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机毕业设计 | node.js(Express)+vue影院售票商城 电影放映购物系统(附源码+论文)

计算机毕业设计 | node.js(Express)+vue影院售票商城 电影放映购物系统(附源码+论文)

1，绪论 1.1 项目背景 最近几年，我国影院企业发展迅猛，各大电影院不断建设新的院线，每年新投入使用的荧幕数目逐年显著上升。这离不开人们的观影需求及对观影的过程要求的不断进步。广大观影消费者需要知道自己的空闲时间&#x…
阅读更多...
STM32自己从零开始实操02:输入部分原理图

STM32自己从零开始实操02:输入部分原理图

一、触摸按键 1.1指路 项目需求： 4个触摸按键，主控芯片 TTP224N-BSBN（嘉立创，封装 TSSOP-16），接入到 STM32 的 PE0，PE1，PE2，PE3。 1.2走路 1.2.1数据手册重要信息提…
阅读更多...
SpringCloud Alibaba的相关组件的简介及其使用

SpringCloud Alibaba的相关组件的简介及其使用

Spring Cloud Alibaba是阿里巴巴为开发者提供的一套微服务解决方案，它基于Spring Cloud项目，提供了一系列功能强大的组件，包括服务注册与发现、配置中心、熔断与限流、消息队列等。 本文将对Spring Cloud Alibaba的相关组件进行简介&#xff…
阅读更多...
操作系统实验1：Linux常用命令及简单C语言程序调试

操作系统实验1：Linux常用命令及简单C语言程序调试

1.1实验目的 了解Linux系统的组织和行为，包括 Linux的用户界面、目录结构组织、运行程序的基本方式。通过使用终端(terminal)熟悉Linux Shell 、常见命令(cd、ls、ps、chmod等)和 redirect、pipe机制。学习使用vi或者gedit等编辑器编辑一个c语言源程序，…
阅读更多...
高中数学：平面向量-数量积（向量与向量的乘积）与投影

高中数学：平面向量-数量积（向量与向量的乘积）与投影

一、引题 物理上的力做功 二、数量积与投影 1、数量积 θ的范围是[0,π] 2、投影 向量的投影，依然是一个向量！ 3、运算法则 易错点： 4、重要性质 这里对性质(2)要注意一下：如果 a → \mathop{a}\limits ^{\rightarrow…
阅读更多...
数据结构和算法｜堆排序系列问题（一）｜堆、建堆和Top-K问题

数据结构和算法｜堆排序系列问题（一）｜堆、建堆和Top-K问题

在这里不再描述大顶堆和小顶堆的含义，只剖析原理层面。 主要内容来自：Hello算法 文章目录 1.堆的实现1.1 堆的存储与表示过程1.2 访问堆顶元素1.4元素出堆 2.⭐️建堆2.1 方法一：借助入堆操作实现2.2 ⭐️方法二：通过遍历堆化实现…
阅读更多...
JS 实战 贪吃蛇游戏

JS 实战 贪吃蛇游戏

一、css 部分 1. 居中 想要开始和暂停两个按钮居中，可以将盒子设置为弹性盒 也可以使用其他方法 【代码】 2. 将父元素设置为相对定位，偏于之后贪吃蛇长长的身子，是以父元素为基点的绝对定位，通过 left 和 top 来控制位置 二、…
阅读更多...
vue表格中上传按钮样式

vue表格中上传按钮样式

问题：写了样式但是遇到问题如下图： 解决方法： ::v-deep .el-upload {display: flex;justify-content: center;align-items: center; } 因为上传的图标被包含在el-upload中，而删除按钮并没有被包含在el-upload中。 所以整体的样式…
阅读更多...
存储+调优：存储-IP-SAN

存储+调优：存储-IP-SAN

存储调优：存储-IP-SAN 数据一致性问题 硬盘（本地，远程同步rsync） 存储设备（网络） 网络存储 不同接口的磁盘 1.速率 2.支持连接更多设备 3.支持热拔插 存储设备什么互联 千…
阅读更多...
ACM实训

ACM实训

【碎碎念】继续搞习题学习，今天完成第四套的ABCD，为下一周挤出时间复习，加油 Digit Counting 问题 法希姆喜欢解决数学问题。但有时解决所有的数学问题对他来说是一个挑战。所以有时候他会为了解决数学难题而生气。他拿起一支粉笔&#xff…
阅读更多...
岛屿问题刷题

岛屿问题刷题

200. 岛屿数量 - 力扣&#xff08;LeetCode&#xff09; class Solution {public int numIslands(char[][] grid) {int n grid.length;//grid行数int m grid[0].length;//grid列数int res 0;for(int r 0;r<n;r){for(int c0;c<m;c){if(grid[r][c]1){dfs(grid,r,c);res…
阅读更多...
HCIP-VLAN综合实验

HCIP-VLAN综合实验

一、实验拓扑 二、实验要求 1、pc1和pc3所在接口为access;属于vlan 2; PC2/PC4/PC5/PC6处于同一网段’其中PC2可以访问PC4/PC5/PC6; PC4可以访问PC6&#xff1b;PC5不能访问PC6&#xff1b; 2、PC1/PC3与PC2/PC4/PC5/PC6不在同一个网段&#xff1b; 3、所有PC通过DHCP获取IP…
阅读更多...
Multi-Attention Transformer for Naturalistic Driving Action Recognition

Multi-Attention Transformer for Naturalistic Driving Action Recognition

标题&#xff1a;用于自然驾驶行为识别的多注意力Transformer 源文链接&#xff1a;https://openaccess.thecvf.com/content/CVPR2023W/AICity/papers/Dong_Multi-Attention_Transformer_for_Naturalistic_Driving_Action_Recognition_CVPRW_2023_paper.pdfhttps://openaccess…
阅读更多...
安装ollama并部署大模型并测试

安装ollama并部署大模型并测试

Ollama介绍 项目地址&#xff1a;ollama 官网地址&#xff1a; https://ollama.com 模型仓库&#xff1a;https://ollama.com/library API接口&#xff1a;api接口 Ollama 是一个基于 Go 语言开发的简单易用的本地大语言模型运行框架。可以将其类比为 docker&#xff08;同基…
阅读更多...
鸿蒙ArkUI-X跨平台技术：【SDK结构介绍】

鸿蒙ArkUI-X跨平台技术：【SDK结构介绍】

ArkUI-X SDK目录结构介绍 简介 本文档配套ArkUI-X&#xff0c;将OpenHarmony ArkUI开发框架扩展到不同的OS平台&#xff0c;比如Android和iOS平台&#xff0c;让开发者基于ArkUI&#xff0c;可复用大部分的应用代码&#xff08;UI以及主要应用逻辑&#xff09;并可以部署到相…
阅读更多...
深度学习之人脸性别年龄检测系统

深度学习之人脸性别年龄检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 随着计算机视觉和深度学习技术的飞速发展&#xff0c;人脸性别年龄检测系统在多个领域展现出广…
阅读更多...
简易Docker磁盘使用面板Doku

简易Docker磁盘使用面板Doku

这个项目似乎有 1 年多没更新了&#xff0c;最后发布版本的问题也没人修复&#xff0c;所以看看就行&#xff0c;不建议安装 什么是 Doku &#xff1f; Doku 是一个简单、轻量级的基于 Web 的应用程序&#xff0c;允许您以用户友好的方式监控 Docker 磁盘使用情况。Doku 显示 D…
阅读更多...
【30天精通Prometheus：一站式监控实战指南】第6天：mysqld_exporter从入门到实战：安装、配置详解与生产环境搭建指南，超详细

【30天精通Prometheus：一站式监控实战指南】第6天：mysqld_exporter从入门到实战：安装、配置详解与生产环境搭建指南，超详细

亲爱的读者们&#x1f44b;   欢迎加入【30天精通Prometheus】专栏&#xff01;&#x1f4da; 在这里&#xff0c;我们将探索Prometheus的强大功能&#xff0c;并将其应用于实际监控中。这个专栏都将为你提供宝贵的实战经验。&#x1f680;   Prometheus是云原生和DevOps的…
阅读更多...
JavaEE-网络初识

JavaEE-网络初识

文章目录 一、网络背景1.1 起源1.2 国内网络的发展 二、关键概念2.1 网络2.2 设备2.3 ip地址与端口号 三、协议3.1 协议分层3.2 OSI七层模型3.3 TCP/IP五层模型3.4 数据传输过程的简单叙述 一、网络背景 1.1 起源 在国外大概时上世纪70年代左右&#xff0c;网络就出现了&…
阅读更多...
鸿蒙OS开发：【一次开发，多端部署】（典型布局场景）

鸿蒙OS开发：【一次开发，多端部署】（典型布局场景）

典型布局场景 虽然不同应用的页面千变万化&#xff0c;但对其进行拆分和分析&#xff0c;页面中的很多布局场景是相似的。本小节将介绍如何借助自适应布局、响应式布局以及常见的容器类组件&#xff0c;实现应用中的典型布局场景。 布局场景实现方案 开发前请熟悉鸿蒙开发指导…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023