codes23457789-CSDN博客

原创鸿蒙开发五十一 Command Line Tools 之ohpm

ohpm的介绍是，这里介绍了支持windows、mac、Linux平台，以及ohpmrc、oh-package.json5等等。

2024-10-29 17:03:12 576

原创鸿蒙开发五十页面跳转之 NavPathStack 组件之间传递参数

NavPathStack能使鸿蒙页面跳转，Navigation是导航的组件，需要跳转的点击的组件需要Navigation容器包裹，目的界面的组件也要NavDestination容器包裹，NavPathStack的pushPathByName决定跳到那个界面。

2024-10-21 14:24:01 1082

原创鸿蒙开发四十八 Line 组件

strokeDashArray第一个是指实线的宽度或者是高度，第二个是指隔开那个缺口的宽度或者是高度。startPoint开始的xy坐标，endPoint结束的xy坐标，stroke指定线的颜色，strokeDashArray第一个参数是实线的长或者是宽，第二个参数是空格处的长或者是宽。Line是组件，提供了画虚线的方法,strokeWidth线的宽度，，如果将这条线画为水平的，这样改。

2024-10-19 09:27:29 500

鸿蒙sdk提供的ProPromise版本有点多，是泛型接口，用interface修饰，官网给出的解释是“Represents the completion of an asynchronous operation”，翻译大概意思是：异步操作的完成的处理，总共两回调方法then和catch，api如下：鸿蒙提供的sdk源码结构如有：interface修饰的PromiseConstructorreadonly修饰的属性prototype，类型是是：Promise<any>new 方法，创建一个新的Promise

2024-10-18 17:02:56 481

原创鸿蒙开发四十六鸿蒙状态管理@prop父子更新

父控件变量用@State修饰，那点击“父换车”直接改成“三轮车”，父组件的换车就完成，字组件接收父组件的参数用@Prop修饰，就完成了换车了，字组件换车，能改变父的值，但是界面不会更新，实现改值是自定义字组件的时候定义一个箭头函数，参数是车名字，点击子组件的换车按钮，传入箭头函数的的参数，用到子组件的时候实现定义的箭头函数获取子组件更改的值，将获取的值赋值给子组件。父组件更新子组件，父组件的变量需要用@State修饰，子组件的变量需要用。

2024-10-16 10:40:18 401

原创鸿蒙开发四十五鸿蒙状态管理(嵌套对象界面更新)

其中boolen、string、number类型，可观察到数据的变化，class或object，可观察本身赋值的变化，即Object.keys(observedObject)返回的属性。Object.keys(obj)认识的属性更新才能能更新界面，这时候单单修改嵌套的对象的属性是不会更新界面的，嵌套的对象整个修改UI才会更新。Car，Car对象定义了属性name，定义了一个人对象Person，Person对象定义了两属性name和Car，实例化后，通过。如果只修改car对象的值，

2024-10-16 08:05:42 526

原创鸿蒙开发四十四 ArkTs BuilderParam传递UI(二)

Builder修饰，构建方方法里面实现UI界面的代码，构建方法是在自定义组件中调用的，具体是Row(){this.构建方法}或者是Colum(){this.构建方法}，调用的时候是自定义组件(){界面参数：实现界面的方法}，实现界面的方法需要用。在使用时候调用是作为参数传递给自定义的组件，参数是界面，封装成方法，方法用@Buider修饰。方法实体就是具体的界面实现。@Builder修饰。

2024-10-14 20:29:45 495

原创鸿蒙开发四十三 ArkTs BuilderParam传递UI(一)

总结：鸿蒙自定义组件既可以传文字参数、也可传ui界面，复杂界面的构建既需要自定义组件传文字参数，也需要构建函数传UI，构建函数传的UI往往是没有规则的UI，在自定义中定义好了构建函数后，在调用自定义组件的时候只需要传递写没有规则UI即可，自定义的构建函数也是在自定义组件中调用的。调用，自定义组件名(){需要的界面}就可以了，如果我们想实现下面的界面，除了按照界面一个每个组件的堆叠，那就显示没水平。下图红框处是样式相同，文字不同而已。

2024-10-14 20:08:05 964

原创鸿蒙开发四十二 ArkTs 自定义组件

开发中，系统提供的组件叫做系统组件，由开发者提供自己封装的组件叫做自定义组件，为了复用，开发中自动以组件还是不少的，自定义组件的语法结构如下：@Component 是系统系统组件，export是别的文件可以调用，如果是在同一个文件里面，则不需要使用export，要使用别的文件下的组件,只需要输入comp便有提示，如下图：这时候只需要回车便有组件的架构，如下图：我们只需要命名就可以，省去大段代码的书写。通用的样式和事件都是可以自定义的，通过点语法来实现，在自定义的组件中添加点击事件，是加在看得见的组件或者容器

2024-10-14 18:36:05 460

原创鸿蒙开发四十一 ArkTs 模块化实战

import 后面跟变量名字然后跟 from 然后是变量所在文件的路劲最后文件名字，这个变量就可以当做当前文件的变量一样使用了，变量前面直接export是不行的，编译不通过。在tools目录下新建了一个module1.ets文件，定义了一个变量name1，定义好之后，另外起一行用。实际开发中，可能有些工具类或者一些公共代码，用的地方比较多，这时候就可以封装成一个模块。Module3的sayHi()方法就是Module3.sayHi(),不使用就不调用。Module3.name1,要使用。

2024-10-14 15:42:09 715

原创鸿蒙开发四十 ArkTs 范型

范型的目的就是为了代码的复用性更高、类型是可变的，类型是在使用的时候才定的，语法格式如下：function 函数名字<T> (范型函数的调用，函数名+字尖括号，尖括号里面是具体类型，简括号里面是什么类型，实参数就传什么，如下图：打印出abc。，如下图，我传字符串abc没问题，但是我们传Person不行，因为Person没有。，而这个参数的类型不用管，哪怕是string类型也行，上述泛型方法定义了参数必须是ILength的属性。这里的类型1和类型2是对应的关系，类型必须得相同。length属性，顺利通过。

2024-10-14 12:52:26 957

原创鸿蒙开发三十九 ArkTs类 class 静态属性和方法的定义

总结：鸿蒙提供了static关键字，用static修饰法方法可以类名.方法就能访问，用static修饰的属性可以用类名.属性名就可以访问。Robot.version就可以了，定义了方法，定义了方法getRandom()，调用的话直接Robot.getRandom()即可。这样的代码最大的风险是安全性成疑问。在Robot方法中定义了静态的属性version，调用的话直接。

2024-10-13 19:38:41 509

原创鸿蒙开发三十八 ArkTs类 class 方法的定义

console.log(`hello, ${yourName}, 我是${this.name}`)let p1:Person = new Person('我是华为', 18)// 通过this可以访问到创建出来的实例对象。方法名(参数...):返回类型{p1.sayHi('小怪兽')return '稻香'this可获取实例对象。

2024-10-13 19:25:35 556

原创鸿蒙开发三十七 ArkTs类 class 构造函数

每次new都要传参数，如果参数是一个一个的传，那如果增加字段了就需要增加相应的参数，如果这个方法有许多地方修改，那就得修改许多地方，怎么办呢？const 实例1 = new 类名(参数...）每new一次就去执行一次。console.log('大米饭:', c.name.length)// 字段名:类型 = 初始值。c.foods = '大米饭'name:"猫咪名字",// class 类名 {foods:"猫粮",// 基于类, 创建对象。name:"猫咪",foods:"肉",

2024-10-13 16:33:11 795

原创鸿蒙开发三十七 ArkTs类 class

总结：鸿蒙中类的关键字有interface和class，interface简单的类，class修饰的类更复杂，需要用new关键字来实例化，类封装有属性、方法，有构造方法。console.log('食物:', p.foods?console.log('大米饭:', c.name.length)console.log('姓名:', p.name.length)let p: 类名 = new 类名()或者是。const p:类名 = new 类名()const c:类名 = new 类名()class 类名 {

2024-10-13 15:38:09 405

原创鸿蒙开发之ArkUI 界面篇三十六抖音极速版底部tabs

tabBar(this.myBuilder(0, '首页', $r('app.media.ic_tabbar_icon_0'), $r('app.media.ic_tabbar_icon_0_selected'))).tabBar(this.myBuilder(1, '朋友', $r('app.media.ic_tabbar_icon_1'), $r('app.media.ic_tabbar_icon_1_selected')))// console.log('激活的索引', index)

2024-10-13 14:10:00 593

原创鸿蒙开发之ArkUI 界面篇三十五容器组件Tabs 切换高亮

tabBar的索引，而点击tab或者滑动的时候刚能够获得tab的索引值，两者等的时候显示背景图和字体的背景色，不一样就显示默认的字体颜色和默认的背景图。myBuilder多了两个参数，一个是下标索引值，一个是选中的时候的图片，当索引和切换到的下标值一样的时候，就加载高亮的图片和文字颜色也改成高亮。切换选项卡时调用，返回的是切换或者是选中叶的下标索引，对比索引和切换后的返回值一样，就是需要高亮的界面，否则就不需要高亮的界面。onChange方法，

2024-10-13 13:45:15 394

原创鸿蒙开发之ArkUI 界面篇三十四容器组件Tabs 自定义TabBar

bar，这个自定义的tabBar灵活，能够实现市面上主流app的tabs功能。来修饰，没有返回值，有两个参数一个是string，用于传递标题，一个是。tabBar参数是联合类型，除了传字符串、icon地址外还可以自定义。如果需要修改Tabs的图标和文字之间的距离我们该怎么办呢？这里定义了myBuilder的函数，用了。

2024-10-13 12:54:05 618

原创鸿蒙开发之ArkUI 界面篇三十四容器组件Tabs 三滚动

当导航内容过多的时候，可能会超出屏幕，这时候需要滚动效果，加上barMode(BarMode.Scrollable)这个属性就行。Text(`${item}内容`).fontColor(Color.Red)'首页','关注','热门','军事','体育','八卦','数码','财经','美食','旅行','直播','NBA'

2024-10-13 09:40:25 314

原创鸿蒙开发之ArkUI 界面篇三十四容器组件Tabs二常用属性

如果显示在左边，使用的是vertical属性,下图，只需要把加上.vertical(true).height(150)就可以实现。.scrollable(false) 只能点击.animationDuration(0) 禁止动画。

2024-10-13 09:07:43 250

原创鸿蒙开发之ArkUI 界面篇三十四容器组件Tabs一

Tabs页面需两个组件，分别是TabContent和TabBar。每个TabContent对应一个TabBar，也可以不配置，可以通过TabContent的tabBar属性进行配置。当页面较多时，可以通过Tabs组件进行展示，如下图，支持顶部、底部、侧边栏。

2024-10-13 08:27:05 259

原创鸿蒙开发之ArkUI 界面篇三十三 Builder(封装容器)

总结：鸿蒙组价的封封装提供了三种实现分别是Extend、Styles、Builder，Extend需要指定具体的组件类型，支持参数，Styles更通用，不需要具体类型，不支持参数，Builder是界面构建层面的封装，支持参数，通用的代码包括Row和Colum和组件都封装在函数里。this.navItem($r('app.media.ic_reuse_03'), '巴巴农场')this.navItem($r('app.media.ic_reuse_04'), '阿里药房')// 全局 Builder。

2024-10-12 17:30:09 450

原创鸿蒙开发之ArkUI 界面篇三十二 Styles(封装组件)

鸿蒙提供了Extend组件，作用是对组件的属性、点击事件的封装，简化代码、方便调用，但是这个组件的缺点是只能封装一种组件，例如只能封装Text或者是Button，不能跨组件使用，如果不同组件有相同的地方、需要使用咋办呢？通过对比Extend会发现，只需要在function之前添加。// 2. 组件内定义(才能通过this访问到自己的状态)Button('按钮')// 1. 全局定义。

2024-10-12 17:05:02 526

原创鸿蒙开发之ArkUI 界面篇三十一 Extend(封装)

开发中遇到重复使用次数多的代码，就是封装提取成一个方法，那么鸿蒙中的方法是怎么封装的呢？这句代码的意思是Text的文字指定为25，Text的字体粗细为7777，使用的时候只需要Text().例如：封装一个Text的字体代码如下。textStyleFn()就可以。

2024-10-12 16:40:01 176

原创鸿蒙开发之ArkUI 界面篇三十综合案列-生肖卡抽奖

6个生肖卡是6张图片，'立即抽卡'是Button，仔细观察，生肖卡列之间的距离是相等的，生肖卡和“立即抽卡的”的关系是垂直的关系，每一张生肖卡是图片，如果单纯的界面，不考虑扩展的话，Colum+两个Row，每个Row三张图片也能实现静态界面，但是这样的缺点是扩展不够好，比如要增加到12呢？界面改动会大很多，如果是ForEach遇到3的倍数就换行呢？记住：鸿蒙开发中，界面的更新只需要修改对应的值就行，前提是这个值需要使用@state修饰，别的任何都不用改。对于这样的成叠布局，需要的外层。

2024-10-11 17:12:27 932 10

原创鸿蒙开发之ArkUI 界面篇二十九新闻列表

一览如何数据闭环全流程',title: '在Redis中如何实现分布式事务的一致性？title: '在Redis中如何实现分布式事务的一致性？title: '在Redis中如何实现分布式事务的一致性？title: '在Redis中如何实现分布式事务的一致性？title: '在Redis中如何实现分布式事务的一致性？title: '在Redis中如何实现分布式事务的一致性？title: '在Redis中如何实现分布式事务的一致性？title: '在Redis中如何实现分布式事务的一致性？

2024-10-10 16:38:56 1070

原创鸿蒙开发之ArkUI 界面篇二十八 ForEach

鸿蒙遍历数组

2024-10-10 14:45:47 286

原创鸿蒙开发之ArkUI 界面篇二十七对象

let student1:Student = { stuId: 1, name: '小丽', gender: '女', age: 12 }对象数组,语法格式:let 数组名：数组类型[] = [{对象实例1}，对象实例2}，对象实例3}，]实例化对象语法格式是：let 对象名: 要实例化的对象 = {属性1，属性2....}JSON.stringify(实例化的对象)鸿蒙系统中对象的修饰关键字是。interface 对象名字{对象转化为Json，

2024-10-10 14:22:57 282

原创鸿蒙开发之ArkUI 界面篇二十六购物车商品添加逻辑

State count: number = 0// 无库存控制组件的显示，当大于0的时候显示立即购买那个界面，当小于零的时候显示查看类似商品界面，下面这一段代码一起使用，作用是使组件底部显示，总结：鸿蒙开发中界面显示与否、界面数据的更新变量都要需要使用State修饰变量，与之相对应的是Android 中的Gone属性，界面要底部显示原封不动的加。.translate({y: '-100%'}) //这两句配合使用能是界面适配到底部。Text('该商品暂时没有库存，看看相似商品吧')Text('店铺')

2024-10-10 10:40:22 1002

原创鸿蒙开发之ArkUI 界面篇二十五购物车

很明显区域1和区域2是垂直关系，用Colum容器，区域1又分为左右两部分，是水平关系，大容器使用的是Row，左边是Iamge，右边是垂直布局，使用Cloum容器，从上往下分别是Text+Text+Row+Text+Text，区域2也是整体是水平方向，Row+Text+Colum+Text+Text+Button，逻辑是：点击事件，添加或者是减少商品的个数，根据选择的商品件数和价格计算出总的钱。onClick，嵌套在Text的还会有span，用与指定特定文字的属性修改，Text('含1份折扣商品')

2024-10-09 15:52:13 727

原创鸿蒙开发之ArkUI 界面篇二十五点赞综合案例

我们首先分析布局结构，整体式垂直方向的布局，外层容器自然是Colum，上层是图片组件Image，接下来是Text组件，接下来是Row组件，Row+Text+Span+Image+Text，点击要变化的包括两部分，数字和图标和文字的颜色，这两个属性都需要用@State装饰器修饰，

2024-10-09 14:06:08 512

原创鸿蒙开发之ArkUI 界面篇二十四计数器案例

State，修饰的变量改变后界面就能自动更新，在Struct里面的变量使用的时候需要使用this.变量名字。计数器案例，点击’-‘按钮，数字减少1，点击啊‘+’按钮，数字加一。

2024-10-09 12:09:50 831

原创鸿蒙开发之ArkUI 界面篇二十四状态管理(State装饰器)

鸿蒙局部变量 this

2024-10-09 11:37:28 166

原创鸿蒙开发之ArkUI 界面篇二十三 B站视频卡片

最终结果如下：先整体分析，把效果图按区域划分为1、2、3三个区域，如下图:三个区域是垂直布局，大容器是Colum，区域1是有有多个组件，需要有个大容器包裹，这里Colum+Stack+Row+Image+Text+Image+Text+Text，第二部分是Text，第三部分是Row+Text+Image，需要特别主要的是：区域1，需要外层容器是Colum或者是Row构成一个整体，再在容器里面塞入组件，刚刚开始可能觉得不需要外层容器，只需要Image+Stack来实现，这样的话Stack无法确定位置，完整代码

2024-10-08 16:51:01 1310

原创鸿蒙开发之ArkUI 界面篇二十二层叠布局 Stack

Text('第三个组件').fontSize(18).backgroundColor(Color.Orange)Text('第四个组件').fontSize(18).backgroundColor(Color.Yellow)Text('第二个组件').fontSize(18).backgroundColor(Color.White)Text('第一个组件').fontSize(18).backgroundColor(Color.Red)

2024-10-08 14:56:57 431

原创鸿蒙开发之ArkUI 界面篇二十一人气卡片综合案例

position和zIndex实现层叠效果.fontStyle(FontStyle.Italic)实现倾斜效果，VIP其实是文字，.fontSize(14)字体大小是14，字体的粗细是.fontWeight(777)，文字居中对其.textAlign(TextAlign.Center)，我们整体分析，区域1是观察到的是图片，自然是Image组件，区域2有个背景，左边是Image，水平方向是Text，3区域最具有迷惑性，第一次估计会让设计师给图片，Image组件搞定，要是设计师不给图片能不能实现呢？

2024-10-08 13:15:50 793

原创鸿蒙开发之ArkUI 界面篇二十 position绝对定位及层级zIndex

Text('学习选择1').fontSize(30).fontWeight(777).padding(15).width('100%')Text('学习选择2').fontSize(30).fontWeight(777).padding(15).width('100%')Text('学习选择3').fontSize(30).fontWeight(777).padding(15).width('100%')

2024-10-08 12:46:30 732

原创鸿蒙开发之ArkUI 界面篇十九 Flex组件的特点

总结：Flex组件的特点是可以换行，也可以指定方向，垂直方向或者是水平方向，默认是水平方向，指定方向是FlexDirection，对其方式也分为主轴对其和交叉轴对其方式，也可以指定还不换行，不换行的效果就是垂直布局或者是线性布局。Text('学习选择').fontSize(30).fontWeight(777).padding(15).width('100%')这里你会发现，其实和Row容器，Colum容器的语法格式差不多，核心的关键是Colum、Row是不支持换行，实现。Text('界面开发')

2024-10-07 21:12:50 594

原创鸿蒙开发之ArkUI 界面篇十八京东app登录界面实现

Column，区域1使用的是子容器Row，左边是Image，右边是Text，区域2是Image，区域3第一感觉是Button，Button的话文字间距只能是空格隔开，这适配就出问题了，实现是子容器Row+背景圆角，左边是Text，最右边是Row+Text+Image，区域4是TextInput，区域5是Row+Checkbox+Text+Span，区域6是Button，区域7是Row+3个Text，取悦8是Text，区域9是Row+4个Image，取悦8和9之间使用了弹性控件。

2024-10-06 21:56:46 1095