鸿蒙学习-

鸿蒙数据传值

//* 传值
//* @State
/*
 *@State创建一个响应式的数据，但不是所有的更改都会引起刷新，只有被框架观察到的修改才会被刷新UI
 * 1. 基本数据类型如 number string boolean等值的变化修改
 * 2. Object类型，只会观察到第一层的数据变化或者自身数据的赋值变化.原因是，监听多层会消耗巨大的性能
 * */

//* @Prop
/*
 * @Prop 父子单项传值
 * 在父组件中通过参数的方式传递，在子组件中通过@prop接收，如果没有通过@prop接收，那么他就无法得到响应式，
 * 即无法随着父组件的数据修改而被修改
 * 在子组件中可以修改@prop传值，但是当父组件修改之后，子组件的依旧会被覆盖
 * 也可以给子组件传递一个函数，通过接收该函数来修改数据，来实现数据的同步
 * 在给子组件传递的函数时，应该是一个箭头函数，原因就是this指向问题
 * */

//* @Link 可以实现双向同步绑定 -- 不需要提供默认值

//* @Provide @Consume 跨组件传值

//* @Observed @ObjectLink 嵌套对象数组
/*
 * 可以直接监听到对象的内层嵌套
 * 需要通过class类来创建对象
 * @ObjectLink 不可以使用在Entry入口文件中
 * UI的更新,不根据数据的更新而更新，而是依附于@ObjectLink
 * */

interface ClPerson {
  name:string
  age:number
}

@Observed
class Person {
  name:string
  age:number
  constructor(infoObj:ClPerson) {
    this.name = infoObj.name
    this.age = infoObj.age
  }
}

@Component
struct Son {
  @Prop sonMessage :string = ""
  @Link sonName:string



  sonChange=()=>{}
  build() {
    Column(){
      Text(`这是子组件的数据${this.sonMessage}-${this.sonName}`)
      Button('修改').onClick(()=>{
        this.sonChange();
        this.sonName = '本'
      })
    }

  }
}

@Component
struct Son2 {
  @ObjectLink info:Person
  build() {
    Text(`学生的信息：${this.info.name}-${this.info.age}`)
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'nihao';
  @State name:string = "Ben"

  @State personArr:ClPerson[] = [new Person({name:'ben',age:18}),new Person({name:'ben',age:18})]

  build() {
    Column(){
      Text(`这是父组件的数据${this.message}} - ${this.name}}`)
      Son({
        sonMessage:this.message,
        sonName:this.name,
        sonChange:()=>{this.message="您好"}
      })

      List(){
        ForEach(this.personArr,(item:ClPerson,index:number)=>{
        ListItem(){

            Son2({
              info:item
            })

        }
        })
      }
    }


  }
}

成员变量和成员函数

//* 成员变量和成员函数
/*
 * 定义在strcu中的变量或者函数
 *成员变量通过外部传参可以被修改
 * 成员函数只有箭头函数可以被修改
 * */

//* BuilderParam 传递UI
/*
 * 通过BuilderParam可以允许用户在自定义组件中传递UI
 * 多个BuilderParam传递通过参数的形式而不是尾随闭包
 * -->
 *  Son({
 *    oneBuilderParam:结构1
 *    twoBuilderParam:结构二
 *  })
 * */
@Component
struct Son {
  @BuilderParam contentBuilderParam:()=> void = this.builderParam
  @State title:string = '默认文本'

  @Builder
  builderParam() {
    Text('默认builderParam')
  }

  build() {
    Column() {
      Row() {
        Text(this.title)
      }
      this.contentBuilderParam()
    }
  }
}

@Component
struct Son2 {
  @BuilderParam Bp1:() => void =this.builderContent1
  @BuilderParam Bp2:() => void =this.builderContent2

  @Builder
  builderContent1() {
    Text('son2默认文本1')
  }

  @Builder
  builderContent2() {
    Text('son2默认文本2')
  }

  build() {
    Column() {
      this.Bp1()
      this.Bp2()
    }
  }
}



@Entry
@Component
struct Index {
  @State message: string = 'nihao';
  clickFun = () => {
    console.log('112233')
  }

  @Builder
  Son21() {
    Text('这是修改的son2中的1')
  }


  @Builder
  Son22() {
    Text('这是被修改的Son2中的2')
  }

  build() {
      Column() {
        Son({title:'这是标题'}){
          Button('这是按钮').onClick(()=>{
            this.clickFun()
          })
        }

        Son2({
          Bp1:this.Son21,
          Bp2:this.Son22
        })
      }

  }

@Styles @Builder @Extend

// * swiper组件
/*
 * loop 是否循环
 * autoplay 是否自动播放
 * interval 间隔时长
 * vertical 纵/横
 * */

// * 指示器的样式修改 indicator - false 则不展示
/*
 *  Indicator.dot()
          .itemWidth(20) 默认指示器
          .itemHeight(20)
          .color(Color.Black)
          .selectedItemWidth(40) 选中指示器
          .selectedItemHeight(20)
          .selectedColor(Color.Red)
 * */

// * aspectRatio(1) 宽高比

//* @Extend 扩展组件的样式 事件实现复用
/*
 * @Extend(组件名)
 * function funName(参1，参2,...) {}
 * */
@Extend(Text)
function  swiperTextExtend(bgc: ResourceColor,msg: string) {
  .fontSize(20)
  .fontWeight(700)
  .textAlign(TextAlign.Center)
  .backgroundColor(bgc)
  .onClick(()=>{
    AlertDialog.show({
      message:msg
    })
  })
}

// * @Styles 抽取通用属性和方法  不支持传参 局部的或者外部的调用方法一致
@Styles function  commitStyle() {
  .width(100)
  .height(100)
}
// * @Builder 自定义的构建函数 结构 样式 事件 调用内部方法需要使用 this.funName
interface ImgInter {
  imgUrl:string
  number:number
  getImg:string
}

@Builder
function commitBuilder(number:number,getImg:string,imgUrl:string) {
  Badge({
    count:number,
    position:BadgePosition.RightTop,
    style:{
      fontSize:12,
      badgeSize:16,
      badgeColor:"#d7000f"
    }
  }){
    Image($r(getImg ? getImg: imgUrl)).width(60)
  }
}


@Entry
@Component
struct Index {
  @State message: string = 'nihao';


  @Styles commitFun() {
    .onClick(()=>{
      this.message = '你好'
    })

  }

  @State imgArr: ImgInter[] = [
    {
      imgUrl:'app.media.cj_01',
      number:0,
      getImg:''
    },
    {
      imgUrl:'app.media.cj_02',
      number:0,
      getImg:''
    },
    {
      imgUrl:'app.media.cj_03',
      number:0,
      getImg:''
    },
    {
      imgUrl:'app.media.cj_04',
      number:0,
      getImg:''
    },
    {
      imgUrl:'app.media.cj_05',
      number:0,
      getImg:''
    },
    {
      imgUrl:'app.media.cj_06',
      number:0,
      getImg:''
    },

  ]


  build() {
    Column(){
      Swiper(){
        Text("1").swiperTextExtend(Color.Orange,'弹窗1')
        Text("2").swiperTextExtend(Color.Pink,'弹窗2')
        Text("3").swiperTextExtend(Color.Green,'弹窗3')
      }.width("100%")
      .height(250)
      .loop(true)
      .autoPlay(true)
      .interval(4000)
      .vertical(false)
      .indicator(
        Indicator.dot()
          .itemWidth(20)
          .itemHeight(20)
          .color(Color.Black)
          .selectedItemWidth(40)
          .selectedItemHeight(20)
          .selectedColor(Color.Red)
      )


      Text('这是文本:'+this.message).commitStyle().commitFun()

      Grid(){
        ForEach(this.imgArr,(item:ImgInter,index:number)=> {
          GridItem(){
            commitBuilder(item.number,item.getImg,item.imgUrl)
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr 1fr')
      .width('100%')
      .height(200)
    }
  }
}

scroll

// * scroll
/*
 * scroll 中只允许拥有一个子组件
 *
 * 属性
 * scrollable:
 *  ScrollDirection.Horizontal 横向
 *  ScrollDirection.Vertical 纵向
 * scrollBar: 控制滚动条显示隐藏
 *  BarState.On 打开
 *  BarState.Off 关闭
 * edgeEffect: 滑动的动态效果
 *  Spring Fade
 *
 * 控制器
 * 1. 创建scroller实例
 * 2. 绑定scroll组件
 * 3. 调用方法 scrollEdge()
 * */

@Entry
@Component
struct Index {
  @State message: string = 'nihao';
  scroll: Scroller = new Scroller();
  build() {
   Column(){
     Scroll(this.scroll){
       Column({space:20}){
         ForEach(Array.from({length:20}),(item:number,index:number)=> {
           Text('这是文本'+index)
             .width('100%')
             .height(120)
             .borderRadius(8)
             .fontSize(20)
             .fontWeight(800)
             .backgroundColor(Color.Orange)
             .fontColor(Color.White)
         })

       }
     }.width("100%")
     .padding(10)
     .height(400)
     .scrollable(ScrollDirection.Vertical)
     .scrollBar(BarState.Off)
     .scrollBarColor(Color.Pink)
     .scrollBarWidth(30)
     .edgeEffect(EdgeEffect.Spring)
     .onScroll((x,y)=>{
       console.log('滚动到',this.scroll.currentOffset().yOffset)
     })

     Button('回到顶部').margin(20).onClick(()=>{
       this.scroll.scrollEdge(Edge.Top)
     })

     Button('获取已经滚动的距离').onClick(()=>{
       const y = this.scroll.currentOffset().yOffset
       console.log('这是y',y)
     })

   }

  }

tabs

//* tabs
/*
 * 属性
 * barposition 调整位置
 * vertical 垂直 / 水平
 * scrollable 是否手势滑动切换
 * animationDuration 滑动时间
 * barMode 是否滑动
 * */
@Entry
@Component
struct Index {
  @State message: string = 'nihao';
  @State selectIndex: number = 0
  @Builder
  myTabs(tabIndex:number,img:ResourceStr,selectImg:ResourceStr,title:string) {
    Column({space:4}){
      Image(tabIndex == this.selectIndex ? selectImg : img).width(20)
      Text(title).fontColor(tabIndex == this.selectIndex ? Color.Red : Color.Black)
    }
  }
  build() {
    // Tabs({barPosition:BarPosition.Start}){
    //   TabContent(){
    //     Text('首页内容')
    //   }.tabBar('首页')
    //   TabContent(){
    //     Text('推荐内容')
    //   }.tabBar('推荐')
    //   TabContent(){
    //     Text('列表内容')
    //   }.tabBar('列表')
    //   TabContent(){
    //     Text('我的内容')
    //   }.tabBar('我的')
    // }
    // .vertical(true)
    // .scrollable(false)
    // .animationDuration(1000)
    // .barMode(BarMode.Scrollable)




    Tabs({barPosition:BarPosition.End}){
      TabContent(){
        Text('淘宝页面')
      }.tabBar(this.myTabs(0,$r('app.media.cj_01'),$r('app.media.cj_d01'),'淘宝'))

      TabContent(){
        Text('QQ页面')
      }.tabBar(this.myTabs(1,$r('app.media.cj_02'),$r('app.media.cj_d02'),'QQ'))
    }.onChange((index:number)=> {
      this.selectIndex = index
    })

  }
}

数据格式和state状态管理

// 数据的格式转换
// * 数字转字符串
/*
 * Number() let a = '1.1' Number(a) => 1.1 转失败则为NaN
 * parseInt() 去掉小数点部分
 * parseFloat() 保留小数点部分 let a = '1.1a' parseFloat(a) => 1.1 自动去掉字符部分
 * */
// * 字符串转数字
/*
 * toString() let a = 1 a.toString()
 * toFixed 四舍五入转文本
 * */

// * 状态管理 state
/*
 * 核心 state会直接决定UI的初始化渲染，UI一旦发生交互，就会修改state变量，state变量发生变化自动触发UI渲染
 * 普通变量：只会在初始化的时候渲染UI,后续变化无法直接渲染
 * 状态变量：只要发生变化就可以渲染UI
 * */
let myName: string = 'Ben'

@Entry
@Component
struct Index {
  @State message: string = 'nihao';

  myAge:number = 18
  build() {
    Column(){
      Text(myName)
      Text(this.myAge.toString())
      Text(this.message)
      Button('修改Message').onClick(()=> {
        this.message = '你好，你会找到一个满意的工作';
        console.log('1122')
      })
    }

  }
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Grok 3.0 Beta 版大语言模型评测

Grok 3.0 Beta 版大语言模型评测

2025年2月17日至18日，全球首富埃隆马斯克（Elon Musk）携手其人工智能公司xAI，在美国重磅发布了Grok 3.0 Beta版。这款被誉为“迄今为止世界上最智能的语言模型”的AI，不仅集成了先进的“DeepSearch”搜索功能&#xff0…
阅读更多...
【R语言】绘图

【R语言】绘图

一、散点图 散点图也叫X-Y图，它将所有的数据以点的形式展现在坐标系上，用来显示变量之间的相互影响程度。 ggplot2包中用来绘制散点图的函数是geom_point()，但在绘制前需要先用ggplot()函数指定数据集和变量。 下面用mtcars数据集做演示&a…
阅读更多...
php session数据存储位置选择

php session数据存储位置选择

PHP session 数据的存储位置可以通过配置文件或者代码来进行设置。默认情况下，session 数据是存储在服务器的文件系统中的。你可以将 session 数据存储在其他地方，例如数据库、缓存等。 基础概念 PHP session默认情况下将数据存储在服务器端的临时文件中…
阅读更多...
保姆级！ 本地部署DeepSeek-R1大模型 安装Ollama Api 后，Postman本地调用 deepseek

保姆级！ 本地部署DeepSeek-R1大模型 安装Ollama Api 后，Postman本地调用 deepseek

要在Postman中访问Ollama API并调用DeepSeek模型，你需要遵循以下步骤。首先，确保你有一个有效的Ollama服务器实例运行中，并且DeepSeek模型已经被加载。 可以参考我的这篇博客 保姆级！使用Ollama本地部署DeepSeek-R1大模型 并java…
阅读更多...
Windows桌面系统管理5：Windows 10操作系统注册表

Windows桌面系统管理5：Windows 10操作系统注册表

Windows桌面系统管理0：总目录-CSDN博客 Windows桌面系统管理1：计算机硬件组成及组装-CSDN博客 Windows桌面系统管理2：VMware Workstation使用和管理-CSDN博客 Windows桌面系统管理3：Windows 10操作系统部署与使用-CSDN博客 Wi…
阅读更多...
臻识相机，华夏相机，芊熠车牌识别相机加密解密

臻识相机，华夏相机，芊熠车牌识别相机加密解密

臻识，华夏，芊熠这三种车牌识别相机解密我都试过了，可以正常解密成功，其它品牌我暂时没有测试。超级简单，免费的，白嫖无敌！ 流程： ①：先导出配置文件，例如我以…
阅读更多...
RK Android11 WiFi模组 AIC8800 驱动移植流程

RK Android11 WiFi模组 AIC8800 驱动移植流程

RK Android WiFi模组 AIC8800 驱动移植流程 作者：Witheart更新时间：20250220 概要：本文介绍了基于 AIC8800D40 芯片的 WiFi6 模组 BL-M8800DS2-40 在 RK3568 平台上的驱动移植流程。主要涉及环境搭建、驱动代码分析、设备树修改、驱动编译配…
阅读更多...
Unity Shader Graph 2D - Procedural程序化图形循环加载进度效果

Unity Shader Graph 2D - Procedural程序化图形循环加载进度效果

前言 在游戏中进度加载的效果是一种常见的效果，可以告诉玩家当前游戏处于一个资源加载的状态，这样玩家就能理解游戏不是卡住了或者是出现Bug了，而是正在进行一些数据的处理准备进入下一个场景。 创建一个LineLoading的Shader Graph文件，对应创建一个材质球，然后在…
阅读更多...
蓝桥杯备考：贪心算法之矩阵消除游戏

蓝桥杯备考：贪心算法之矩阵消除游戏

这道题是牛客上的一道题，它呢和我们之前的排座位游戏非常之相似，但是，排座位问题选择行和列是不会改变元素的值的，这道题呢每每选一行都会把这行或者这列清零，所以我们的策略就是先用二进制把选择所有行的情况全部枚举…
阅读更多...
Java网络编程封装

Java网络编程封装

系列文章目录 Java知识点 文章目录 系列文章目录👉前言👉一、封装的目标👉二、套接字层封装👉壁纸分享👉总结 👉前言 Java 网络编程封装原理主要围绕着将底层的网络通信细节隐藏起来，提供简洁…
阅读更多...
百度首页上线 DeepSeek 入口，免费使用

百度首页上线 DeepSeek 入口，免费使用

大家好，我是小悟。 百度首页正式上线了 DeepSeek 入口，这一重磅消息瞬间在技术圈掀起了惊涛骇浪，各大平台都被刷爆了屏。 百度这次可太给力了，PC 端开放仅 1 小时，就有超千万人涌入体验。这速度，简直比火…
阅读更多...
边缘安全加速（Edge Security Acceleration）

边缘安全加速（Edge Security Acceleration）

边缘安全加速（Edge Security Acceleration，简称ESA）是一种通过将安全功能与网络边缘紧密结合来提升安全性和加速网络流量的技术。ESA的目标是将安全措施部署到接近用户或设备的地方，通常是在网络的边缘，而不是将所有流…
阅读更多...
SpringBoot+Mybatis-Plus实现动态数据源

SpringBoot+Mybatis-Plus实现动态数据源

目录 一、前言二、代码实现1）工程结构2）相关依赖3）数据源拦截切面4）动态数据源切换5）核心配置类6）使用 三、原理分析1）mapper接口注入流程2）动态数据源切换执行流程 四、声明式事务导…
阅读更多...
进程概念、PCB及进程查看

进程概念、PCB及进程查看

文章目录 一.进程的概念进程控制块（PCB） 二.进程查看通过指令查看进程通过proc目录查看进程的cwd和exe获取进程pid和ppid通过fork()创建子进程 一.进程的概念 进程是一个运行起来的程序，而程序是存放在磁盘的，cpu要想执行程序的指…
阅读更多...
字节火山引擎 DeepSeek 接入本地使用

字节火山引擎 DeepSeek 接入本地使用

文章目录 1. 火山引擎 DeepSeek 初体验2. 本地接入 火山引擎 DeepSeek API3. 新建 API KEY4. 直接使用 1. 火山引擎 DeepSeek 初体验 火山引擎官网 : https://www.volcengine.com/product/ark 火山云默认给每个模型赠送 50 万 tokens 推理免费额度 进来就会看到模型广场&#…
阅读更多...
基于javaweb的SpringBoot个人博客系统设计和实现(源码+文档+部署讲解）

基于javaweb的SpringBoot个人博客系统设计和实现(源码+文档+部署讲解）

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…
阅读更多...
《操作系统 - 清华大学》8 -4：进程管理：进程控制结构

《操作系统 - 清华大学》8 -4：进程管理：进程控制结构

深度剖析进程控制块：操作系统进程管理的核心关键 在操作系统的复杂体系中，进程控制块（PCB）是实现高效进程管理的关键所在。接下来，将从多个维度深入剖析进程控制块，帮助更好地理解其在操作系统中的重要作用…
阅读更多...
Jupyter里面的manim编程学习

Jupyter里面的manim编程学习

1.Jupyterlab的使用 因为我之前一直都是使用的vscode进行manim编程的，但是今天看的这个教程使用的是Jupyter，我也很是好奇这个manim在Jupyter这样的交互式下面会生成怎么样的效果，所以今天尝试了jupyter，并且对于两个进行比较和说…
阅读更多...
孜然单授权系统V2.0PHP授权系统

孜然单授权系统V2.0PHP授权系统

孜然单授权V1.0系统，延续了2022年开发的孜然多应用授权系统V2.0 变更：多应用变单系统，去除没用的垃圾代码，从0开发，去除了一些没用的功能 完善了开发文档，之前那套是我写着玩的屎山代码，V1.0将展…
阅读更多...
输入菜单关键字，遍历匹配到 menuIds，展开 匹配节点 的所有父节点以及 匹配节点 本身，高亮 匹配节点

输入菜单关键字，遍历匹配到 menuIds，展开 匹配节点 的所有父节点以及 匹配节点 本身，高亮 匹配节点

菜单检索，名称、地址、权限标志 等 关键字匹配、展开、高亮(全程借助 DeepSeek ) 便捷简洁的企业官网 的后台菜单管理，图示： 改造点： （1）修改 bootstrapTreeTable 的节点class命名方式为：treeg…
阅读更多...
最新文章

Copyright @ 2022~2023