HarmonyOS NEXT零基础入门到实战-第一部分

构建节页面思路:
1、排版  (分析布局)
2、内容(基础组件)
3、美化(属性方法)

设计资源-svg图标
界面中展示图标  ->可以使用svg图标(任意放大缩小不失真,可以改颜色)
使用方式:
1、设计师提供
2、HarmonyOS图标库中选取
https://developer.huawei.com/consumer/cn/design/harmonyos-icon/
svg图片用法:
Image($r('app.media.ic_dianpu'))
  .width(40)
  .fillColor('#b0473d')
命名:ic_   意味着图标

内/外边距
padding/margin

边框border
作用 :给组件添加边界,进行装饰美化。
Text('边框语法')
.fontColor(Color.Red)
.padding(5)
.border({
    // 单边框,可以通过 left right bottom top配置四个方法边框
    width:1,   // 必须设置 
    color:Color.Red, // 颜色
    style:BorderStyle.Solid  // 样式(点线,虚线,实线)
})

设置组件圆角
属性:.borderRadius(参数)  
参数:数值或对象(四个角单独设置)

特殊形状的圆角设置
正圆  //宽高一样,圆角是宽或高的一半

胶囊按钮(左右半圆) //宽度大高度小,圆角是高的一半

背景属性
背景色
.backgroundColor()
背景图
.backgroundImage()
背景图位置
.backgroundImagePosition({x:100, y:100})
.backgroundImagePosition(Alignment.Center)

单位问题vp2px
背景定位默认单位 -> px:实际的物理像素点【分辨率】
宽高默认单位  --> vp:虚拟像素,相对于不同的设备会自动转换,保证不同设备视觉一直(推荐)
函数:vp2px(数值)

背景图尺寸
.backgroundImageSize

线性布局主轴对齐方式
column和row
column:
排布在主方向上的对齐方式(主轴:垂直往下)
//crtl+p 代码参数提示
.justifyContent(枚举FlexAlign.Start/Center/End/SpaceBetween/SpaceAround/SpaceEvenly)
row:
排布在主方向上的对齐方式(主轴:水平往右)
.justifyContent(枚举FlexAlign.Start/Center/End/SpaceBetween/SpaceAround/SpaceEvenly)

线性布局交叉轴对齐方式
交叉轴对齐方式
alignItems()
column:交叉轴的对齐方式(水平往右)
row:交叉轴的对齐方式(垂直往下)

自适应伸缩:
设置layoutWeight属性的子元素与兄弟元素,会按照权重进行分配主轴的空间


高仿京东登录页
模块拆分:
布局容器+顶部+Logo
思路分析:
1、布局容器:整体从上往下 - Column
2、布局背景 :backgroundImage
3、顶部: 左右布局 -Row、SpaceBetween
4、Logo:Image 图片

输入框和登录区域
思路分析:
1、国家地址:点击区域(Row->Text、Text、Image)
2、手机号:输入框 TextInput 
3、同意许可:复选框CheckBox , 文本Text ->Span
4、登录按钮、用户注册

底部模块区域
思路分析:
1、整体column列
2、标题:Text
3、三方登录图标: Row ->Image,SpaceAround
4、底部居底:Blank()填充组件 作用:填充空白区域(像弹簧)


开发技巧:
1、先完成大框架
2、再往下 拆分模块 逐一实现


知识点:
1、复选框 Checkbox
2、一段文本多个样式: Text 包 Span
3、Row 或 Column 空白区域填充:Blank

弹性布局Flex: 又被称为伸缩布局。当子盒子的总和溢出父盒子,默认会进行压缩显示。
1、主轴方向:direction
Flex({
    direction:FlexDirection.Row
})
2、主轴对齐方式:justifyContent
Flex({
    justifyContent:FlexAlign.Center
})
3、交叉轴对齐方式:alignItems
Flex({
    alignItems:ItemAlign.Center
})
单行或者单列的情况,优先还是使用线性布局(本质还是基于Flex设计的,且还做了性能优化)
4、布局换行: wrap
FlexWrap.NoWrap 单行布局
FlexWrap.Wrap 多行布局

Flex({
    FlexWrap.NoWrap
})


绝对定位 - position
作用:控制组件位置,可以实现层叠效果

特点:
1、参照 父组件左上角 进行偏移
2、绝对定位后的组件 不再占用自身原有位置
语法:.position({x:1,y:1})
后面的组件明显层级更高,会盖住前面的组件
不动结构的情况下,调整组件的层级 .zIndex()  默认是0

层叠布局
层叠布局具有较强的组件层叠能力。场景:卡片层叠效果等。
特点:层叠操作更简洁,编码效率高。(绝对定位的优势是更灵活)
不动结构的情况下,调整组件的层级 .zIndex()  默认是0

综合案例:
B站-视频卡片
支付宝首页

思路:
1、整体Stack布局 + 底部的tab
2、主题区域的架子: 头部+主体界面(层叠关系、主体界面可滚动)
    Column/Row,默认不具备可滚动的效果 -> Scroll
3、头部搜索区域
4、Top快捷按钮区域: Row里面4个Column(layoutWeight)

字符串拼接: +号

模板字符串:更适合于多个变量的字符串拼接
 `hello${变量},${变量}`

类型转换:
字符串转数字:
Number(string对象):
parseInt():去掉小数部分转数字
parseFloat():保留小数部分转数字
数字转字符窜:
toString():直接转字符串
toFIxed():四舍五入转字符串,可以保留几位小数

交付:点击事件
监听用户的点击行为,进行对应操作。
onClick((参数) => {
    AlertDialog.show({message:'你好~ 这是个弹框'})
})

状态管理
如果希望构建一个动态的、有交互的界面,就需要引入“状态”的概念。
比如说:按钮更新文字(event-handlers 监听交互,修改状态变量(onClick))。
状态变更,自动触发更新。
点击交互 触发了文本状态变更,状态变更引起了UI渲染。
状态变量:
需要装饰器装饰,改变会引起UI的渲染刷新(必须设置类型和初始值)

组件内的变量用必须添加this  全局的不需要添加this

算术运算符(+-*/%)/赋值运算符(= += -+ *= /+/= %=)
点赞案例:
1、注册点击事件 ->onClick
2、点击的适合,修改颜色和数字
    提取 颜色/数字 为状态变量
Text:可以放ImageSpan[小icon]和Span

一元运算符:++ --
比较运算符: 用来比较两个数据大小,返回一个布尔值(true/false)
> >= < <= == !=

逻辑运算符:&&:与   || :或   !:取反
作用:扩充判断条件 

运算符优先级:
()
++ -- !
算数 先*、/、%  后+,-
比较 >  >= < <=
比较 == !=
逻辑运算符:  先&&  后||
赋值 =
    
美团购物车:
需求分析:
1、商品区域: 数字框 + -
2、底部结算: 联动计算 并渲染展示
    已选件数
    总价格
    优惠价格
核心思路:
1、提取状态 : 数量、原价、现价
2、界面绑定
3、点击修改数据,自动更新

数组的操作
查找&修改:
查找:数组名[下标]
修改:数组名[下标] = 新值
数组长度:数组名.length

增加数组元素:
往开头加: 数组名.unshift(数据1、数据2,...) 返回操作后的数组的长度
结尾添加: 数组名.push(数据1、数据2,...) 返回操作后的数组的长度

删除数组元素:
从开头删:数组名.shift()   返回删除的项
从结尾删:数组名.pop()   返回删除的项

任意位置添加/删除数组元素
语法:数组名.splice(起始位置,删除的个数,新增元素1,新增元素2, ...)

语句:一段可执行的代码,是一个行为(num = a + b)
表达式:可以被求值的代码,并将其计算出一个结果(1+1,3*5,3>2)
语句执行结构:顺序结构,分支结构,循环结构
if分支语句:根据逻辑条件不同,执行不同的语句。   判断范围。
switch多分支:判断值。 default:可以不用加break.

三元表达式:

条件渲染:使用if else和 else if,可基于 不同状态 渲染 对应不同UI内容。

while语句:重复执行指定的一段代码

for循环和for of  
for(let item of 数组名) {}

对象数组:
注意:
如果对象的复杂数据,需要在日志中打印,需要调用一个方法,转成字符串格式:JSON.stringify(复杂类型) 对象/数组
访问 + 通过小标

ForEach渲染控制
可以基于数组的个数,渲染组件的个数。(简化代码)
ForEach(数组名,(item:string ,index:number) => {})

阶段案例-生肖抽奖卡
初始布局:
知识点:
1、Badge 角标组件
Badge({
    count:1,
    position:BadgePosition.RightTop,
    style:{
        fontSize:12;
        badgeSize:16;
        badgeColor:'#FACACA'
    }
}){Image}
2、Grid 布局
列均匀分布: columnsTemplate('1fr 1fr 1fr')
行均匀分布:rowsTemplate('1fr 1fr 1fr')

数据动态渲染:
1、每个列表项两个数据,一个是图片的地址,一个是抽中的数量
定义接口: 每个列表项的数据结构
interface ImageCount {
    url:string
    count:number
}
2、基于接口,准备数据
@State images: ImageCount[] = [
    {url: '', count:0},
    {url: '', count:0}
]

3、Grid 组件 动态渲染

抽卡遮罩层:
思路分析:
1、布局角度: 层叠布局 Stack
2、结构角度: Column > Text + Image + Button

抽大奖遮罩层:
思路分析:
1、布局角度:层叠布局 Stack
2、结构角度:Column > Text + Image + Button

抽大奖显隐控制:
需求说明:六张卡片集齐,显示中大奖页面
思路:
1、准备一个变量,控制显隐
2、每次收下卡片,判断是否集齐,集齐显示中奖页面

随机奖品&再来一次
需求1:奖品随机
需求2:再来一次
思路:
1、奖品随机 --->准备一个奖品数组,Math.random随机取下标
2、再来一次 --->重置数据

知识点:
1、Badge角标组件
2、Grid布局 Stack布局
3、数组对象动态渲染、动态更新
4、遮罩层动画、图像动画效果 animation
5、随机抽奖 Math.random,Math.floor
6、假设成立法,判断是否中奖

相关源代码:
// 1、定义接口(每个列表项的数据结构)
interface ImageCount {
  url: string,
  count: number
}

// 需求1: 遮罩层显隐 透明度opacity 0 - 1 层级zIndex -1 - 99
// 需求2: 图片缩放 缩放scale: 0 - 1
// 需求3: 随机卡片的选择 0-5 随机数 Math.random 控制展示换图  点击收下,卡片书累加

@Entry
@Component
struct Index {
  // 2、基于接口准备数据
  @State images: ImageCount[] = [
    { url: 'app.media.bg_00', count: 0 },
    { url: 'app.media.bg_01', count: 0 },
    { url: 'app.media.bg_02', count: 0 },
    { url: 'app.media.bg_03', count: 0 },
    { url: 'app.media.bg_04', count: 0 },
    { url: 'app.media.bg_05', count: 0 }
  ]
  // 控制遮罩层显隐
  @State maskOpacity: number = 0 // 透明度
  @State maskZIndex: number = -1 // 显示层级
  // 控制图片的缩放
  @State maskImgX: number = 0 // 水平缩放比
  @State maskImgY: number = 0 // 水平缩放比

  // 随机的生肖卡序号 0 - 5
  @State randomIndex: number = -1 // 表示还没开始抽

  // 控制中大奖遮罩的显隐
  @State isGet: boolean = false

  @State arr: string[] = ['pg', 'hw', 'xm']   // 奖池
  @State prize: string = '' // 默认不中奖

  build() {
    Stack() {
      Column() {
        Grid() {
          ForEach(this.images, (item: ImageCount, index: number) => {
            GridItem() {
              Badge({
                count: item.count,
                position: BadgePosition.RightTop,
                style: {
                  fontSize: 14,
                  badgeSize: 20,
                  badgeColor: '#fa2a2d'
                }
              }) {
                Image($r(item.url))
                  .width(80)
              }
            }
          })
        }
        .columnsTemplate('1fr 1fr 1fr')
        .rowsTemplate('1fr 1fr')
        .columnsGap(5)
        .rowsGap(5)
        .width('100%')
        .height(300)
        .margin({ top: 100 })

        Button('立即抽卡')
          .width(200)
          .backgroundColor('#ed5b8c')
          .margin({ top: 50 })
          .onClick(() => {
            // 点击时修改遮罩参数,让遮罩显示
            this.maskOpacity = 1
            this.maskZIndex = 99

            // 点击时图片需要缩放
            this.maskImgX = 1
            this.maskImgY = 1

            // 计算随机数 Math.random()  [0 - 1)小数 向下取整Math.floor
            this.randomIndex = Math.floor(Math.random() * 6)
            console.log('抽中了', this.randomIndex)
          })
      }
      .width('100%')
      .height('100%')

      // 抽卡遮罩层(弹层)
      Column() {
        Text('获得生肖卡')
          .fontColor('#f5ebcf')
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
        Image($r(`app.media.bg_0${this.randomIndex}`))
          .width(200)
          .margin({ top: 20, bottom: 20 })// 控制元素的缩放
          .scale({
            x: this.maskImgX,
            y: this.maskImgY
          })
          // 动画 animation,当我们元素有状态的变化,可以添加animation做动画
          .animation({
            duration: 1000  // 1s
          })
        Button('开心收下')
          .width(200)
          .height(50)
          .backgroundColor(Color.Transparent)
          .border({ width: 2, color: '#fff9e0' })
          .onClick(() => {
            // 控制弹层显隐
            this.maskOpacity = 0
            this.maskZIndex = -1

            // 图像需要重置缩放比为0 ,方便下一次能够继续缩放
            this.maskImgX = 0
            this.maskImgY = 0

            // 开心收下,对象数组的情况需要更新,需要修改替换整个对象
            // this.images[this.randomIndex].count++
            // console.log('收下', this.randomIndex, this.images[this.randomIndex].count)
            this.images[this.randomIndex] = {
              url: `app.media.bg_0${this.randomIndex}`,
              count: this.images[this.randomIndex].count + 1
            }

            // 每次收完卡片,需要进行简单的检索,判断是否集齐
            // 需求:判断数组项的count,是否都大于0,只要有一个等于0,就意味着没集齐
            let flag: boolean = true //假设集齐
            // 验证是否集齐
            for (let item of this.images) {
              if (item.count == 0) {
                flag = false // 没集齐
                break  // 后面的没必要再进行判断了
              }
            }
            this.isGet = flag

            // 判断是否中奖了,如果是,需要抽奖
            if (flag) {
              //  0 - 2 的值
              let randomIndex: number = Math.floor(Math.random() * 3)
              this.prize = this.arr[randomIndex]
            }
          })
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')
      // 设置背景色,颜色十六进制色值,如果是八位,前两位就是透明度
      .backgroundColor('#cc000000')
      // 设置透明度
      .opacity(this.maskOpacity)
      .zIndex(this.maskZIndex)
      // 动画 animation,当我们元素有状态的变化,可以添加animation做动画
      .animation({
        duration: 200  // 200ms
      })

      // 抽大奖的遮罩层 [六张卡片集齐,显示中大奖界面]
      if (this.isGet) {
        Column({space: 30}) {
          Text('恭喜获得手机一部')
            .fontColor('#f5ebcf')
            .fontSize(25)
            .fontWeight(700)
          Image($r(`app.media.${this.prize}`))
            .width(300)
          Button('再来一次')
            .width(200)
            .height(50)
            .backgroundColor(Color.Transparent)
            .border({width: 2 , color: '#fff9e0'})
            .onClick(() => {
              this.isGet = false
              this.prize = ''
              this.images = [
                { url: 'app.media.bg_00', count: 0 },
                { url: 'app.media.bg_01', count: 0 },
                { url: 'app.media.bg_02', count: 0 },
                { url: 'app.media.bg_03', count: 0 },
                { url: 'app.media.bg_04', count: 0 },
                { url: 'app.media.bg_05', count: 0 }
              ]
            })
        }
        .justifyContent(FlexAlign.Center)
        .width('100%')
        .height('100%')
        .backgroundColor('#cc000000')
      }
    }
  }
}
效果图:

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Floyd 算法 求最短路

推荐阅读&#xff1a;最短路 - OI Wiki 练习题目&#xff1a;力扣 - 1334 简介&#xff1a; 初始化&#xff1a;我们先把题目给的&#xff0c;两点直接相连的边的加入初始存在连接中。更新&#xff1a;然后每次只加入一个点对已有合法连接进行“拓展”更多的连接。结果&#…

【python】OpenCV—Coordinates Sorted Clockwise

文章目录 1、需求介绍2、算法实现3、完整代码 1、需求介绍 调用 opencv 库&#xff0c;绘制轮廓的矩形边框&#xff0c;坐标顺序为右下→左下→左上→右上&#xff0c;我们实现一下转化为熟悉的 左上→右上→右下→左下 形式 按照这样的顺序组织边界框坐标是执行透视转换或匹…

数学基础【俗说矩阵】:矩阵相乘

矩阵乘法 矩阵乘法推导过程 一、两个线性方程复合代入 二、X1和X2合并同类项 三、复合后方程组结果 四、线性方程组矩阵表示 五、线性方程组矩阵映射表示 复合映射表示 六、矩阵乘法导出 矩阵乘法法则 1、规则一推导过程 左取行&#xff0c;右取列&#xff0c;对应相乘后…

第122天:内网安全-域信息收集应用网络凭据CS 插件AdfindBloodHound

目录 前置知识 背景和思路 判断是否在域内 案例一&#xff1a;架构信息类收集-网络&用户&域控等 案例二&#xff1a;自动化工具探针-插件&Adfind&BloodHound Adfind(域信息收集工具) ​BloodHound&#xff08;自动化域渗透工具&#xff09; 前置知识 本…

初阶数据结构的实现1 顺序表和链表

顺序表和链表 1.线性表1.1顺序表1.1.1静态顺序表&#xff08;不去实现&#xff09;1.1.2动态顺序表1.1.2.1 定义程序目标1.1.2.2 设计程序1.1.2.3编写代码1.1.2.3测试和调试代码 1.1.2 顺序表的问题与思考 1.2链表1.2.1链表的概念及结构1.2.1.1 定义程序目标1.2.1.2 设计程序1.…

专题四:设计模式总览

前面三篇我们通过从一些零散的例子&#xff0c;和简单应用来模糊的感受了下设计模式在编程中的智慧&#xff0c;从现在开始正式进入设计模式介绍&#xff0c;本篇将从设计模式的7大原则、设计模式的三大类型、与23种设计模式的进行总结&#xff0c;和描述具体意义。 设计模式体…

<数据集>木材缺陷检测数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;4000张 标注数量(xml文件个数)&#xff1a;4000 标注数量(txt文件个数)&#xff1a;4000 标注类别数&#xff1a;8 标注类别名称&#xff1a;[Quartzity,Live_Knot,Marrow,resin,Dead_Knot,knot_with_crack,Knot_m…

彻底解决idea的编解码问题

一、打开idea&#xff0c;找到Setting,点击File Encoding编解码设置&#xff0c;将以下标红的三个部分全部设置为UTF-8.同理如果你的项目使用的是GBK或者其他编码格式&#xff0c;那么也设置为统一。 二、点击Java Compiler设置补齐-encoding utf-8参数 三、如果你的项目使用到…

HiFi-GAN——基于 GAN 的声码器,能在单 GPU 上生成 22 KHz 音频

拟议的 HiFiGAN 可从中间表征生成原始波形 源码地址&#xff1a;https://github.com/NVIDIA/DeepLearningExamples 论文地址&#xff1a;https://arxiv.org/pdf/2010.05646.pdf 研究要点包括 **挑战&#xff1a;**基于 GAN 的语音波形生成方法在质量上不及自回归模型和基于流…

linux中list的基本用法

内核链表 1 list_head 结构 为了使用链表机制&#xff0c;驱动程序需要包含<linux/types.h>头文件&#xff0c;该文件定义了如下结构体实现双向链&#xff1a; struct list_head {struct list_head *next, *prev; };2 链表的初始化 2.1 链表宏定义和初始化 可使用以…

MongoDB教程(十二):MongoDB数据库索引

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、MongoD…

Vue封装文件上传组件(支持图片、PDF、Excel、word预览下载)

一、准备工作 安装预览依赖包&#xff1a;exceljs、mammoth、vue-pdf 二、封装组件 文件上传组件 fileUploadPro.vue。默认预览、下载是true,可通过isPreView、isDownLoad控制 <template><div style"display: flex"><el-uploadmultipleaction&qu…

SSM 整合(Spring + MyBatis;Spring + Spring MVC)

1. SSM 整合(Spring MyBatis&#xff1b;Spring Spring MVC) 文章目录 1. SSM 整合(Spring MyBatis&#xff1b;Spring Spring MVC)2. 引入相关依赖3. SSM 整合3.1 创建包结构 4. Spring 整合 MyBatis4.1 编写 jdbc.properties4.2 编写 DataSourceConfig 数据源配置4.3 编…

大数减法c++

这里写目录标题 key key 检查减数和被减数的大小&#xff0c;大的放前&#xff0c;小的放后确定结果是正数&#xff0c;还是负数&#xff0c;即符号位从低位开始减如果a[i]<b[i]&#xff0c;则向高位借1当10&#xff0c;a[i1]–;a[i]10 #include <iostream> #include…

[MySQL][索引][下][理解索引]详细讲解

目录 0.前期准备1.为何IO交互要是Page&#xff1f;2.理解单个Page3.理解多个Page4.页目录5.单页情况6.多页情况7.总结复盘8.InnoDB 在建立索引结构来管理数据的时候&#xff0c;其他数据结构为何不行&#xff1f;9.聚簇索引 vs 非聚簇索引 0.前期准备 建立测试表 create table …

云手机结合自主ADB命令接口 提升海外营销效率

现在&#xff0c;跨境电商直播已经成为在线零售的重要渠道&#xff0c;在大环境下&#xff0c;确保直播应用的稳定性和用户体验至关重要。 云手机支持自主ADB命令接口&#xff0c;为电商直播营销提供了技术支持&#xff0c;使得应用开发、测试、优化和运维更加高效。 什么是A…

Linux-交换空间(Swap)管理

引入概念 在计算机中&#xff0c;硬盘的容量一般比内存大&#xff0c;内存&#xff08;4GB 8GB 16GB 32GB 64GB…&#xff09;&#xff0c;硬盘&#xff08;512GB 1T 2T…&#xff09;。 冯诺依曼的现代计算机结构体系里面的存储器就是内存 内存是一种易失性存储器&#xff0c…

0718,TCP协议,三次握手,四次挥手

爬东西只能明天了喵 上课喵&#xff1a; TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;的状态迁移图 这图别看&#xff0c;会瞎 TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;的状态迁移图描述…

40.简易频率计(基于等精度测量法)(3)

&#xff08;1&#xff09;BCD8421码&#xff1a;十进制数字转换成BCD8421码的方法 补零&#xff1a;你需要显示多少位数字&#xff0c;就在前面补上四倍的位宽。比如你要显示一个十进制8位的数字&#xff0c;就在前面补上8*432个零。判断&#xff1a;判断补零部分显示的十进制…

注册安全分析报告:东方航空

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …