鸿蒙 HarmonyOS NEXT星河版APP应用开发-阶段二

一、鸿蒙应用界面开发

弹性布局-Flex

  1. 语法
/*
弹性容器组件 Flex()
位置：
Flex默认主轴水平往右，交叉轴垂直向下（类似Row）
语法：
Flex(参数对象){
  子组件1,
  子组件2,
  子组件3
}
属性方法：
direction：：主轴方向
justifyContent：主轴对齐方式
alignItems：交叉轴对齐方式
wrap:布局换行
*/
  1. 使用场景
// 如果是单行单列的建议使用线性布局
// 如果组件设计多行列的或者是不规则的布局建议使用弹性布局
  1. 主轴方向示例
/*
direction参数：
row：主轴水平往右
column：主轴垂直向下
RowReverse：主轴水平往左
*/
// 示例：FlexDirection.ColumnReverse
import { Filter } from '@ohos.arkui.advanced.Filter';

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Flex({
      direction:FlexDirection.ColumnReverse
    }){
      Text().width(50).height(50).backgroundColor("green")
      Text().width(50).height(50).backgroundColor("green").margin({top:2,bottom:2})
      Text().width(50).height(50).backgroundColor("green")
    }.padding(10)
  }
}

image.png

  1. 主轴方向对齐
/*
  justifyContent参数：
  FlexAlign.Start（默认）
  FlexAlign.Center（居中）
  FlexAlign.End（右对齐）
  FlexAlign.SpaceBetween (贴边对齐)
  FlexAlign.SpaceAround  (间隙对齐)
  FlexAlign.SpaceEvenly  (均匀对齐)
*/ 
// 示例 FlexAlign.SpaceEvenly
@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Flex({
      direction:FlexDirection.Row,
      justifyContent:FlexAlign.SpaceEvenly
    }){
      Text().width(50).height(50).backgroundColor("green")
      Text().width(50).height(50).backgroundColor("green")
      Text().width(50).height(50).backgroundColor("green")
    }.padding(10)
  }
}

image.png

  1. 交叉轴对齐方式
/*
alignItems枚举参数：
ItemAlign.Auto
ItemAlign.Start
ItemAlign.Center
ItemAlign.End
ItemAlign.Baseline
ItemAlign.Stretch （拉伸功能，类似于100%宽/高）
*/
// 示例 ItemAlign.Stretch
import { Filter } from '@ohos.arkui.advanced.Filter';

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Flex({
      direction:FlexDirection.Row,
      justifyContent:FlexAlign.Start,
      alignItems:ItemAlign.Stretch
    }){
      Text().width(50).height(50).backgroundColor("green")
      Text().width(50).height(50).backgroundColor("green").margin({left:2,right:2})
      Text().width(50).height(50).backgroundColor("green")
    }.padding(10).width("100%").height("100%")
  }
}

image.png

弹性布局-Flex换行（warp）

  1. 语法
/*
单行布局：FlexWrap.NoWrap
多行布局：FlexWrap.Wrap
语法：
  Flex({
     wrap:FlexWrap.NoWrap/FlexWrap.Wrap
    }){
    
    }
*/
  1. 实现效果

image.png

import { Filter } from '@ohos.arkui.advanced.Filter';

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Text("阶段选择").fontWeight(700).margin({bottom:20})
        Flex({
          wrap:FlexWrap.Wrap
        }){
          Text("ArkUI").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)
          Text("ArkTS").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)
          Text("界面开发").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)
          Text("系统能力").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)
          Text("权限控制").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)
          Text("元服务").padding(10).backgroundColor("#ffeceaea").textAlign(TextAlign.Center).margin(5)
        }
    }.width("100%").height("100%").backgroundColor("#F5f5f5").padding(10).alignItems(HorizontalAlign.Start)
  }
}

image.png

绝对定位

  1. 语法
/*
position
条件：
参照父组件x/y轴(0,0)进行偏移
绝对定位后的组件，不占用自身原有位置
语法：
.position(位置对象)
位置对象：{x:值,y:值}
*/
  1. 实现效果

image.png

/*
扩展：
阴影属性：shadow
层级属性：zIndex
文字倾斜：fontStyle
*/

import { Filter } from '@ohos.arkui.advanced.Filter';
@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Column(){
        Text("HOS").backgroundColor("#ff06eaea").position({}).zIndex(999).fontColor(Color.White)
          .fontWeight(500).width(50).textAlign(TextAlign.Center)
          .borderRadius({topLeft:10,bottomRight:10}).border({
          width:3,
          style:BorderStyle.Solid,
          color:"#ffa4d6d6"
        }).fontStyle(FontStyle.Italic)
        Image($r("app.media.hw")).width("100%").height(200).borderRadius({
          topLeft:10
        }).margin({bottom:10})
        Row(){
          Image($r("app.media.user")).width(24).borderRadius(12).margin({left:10,right:10})
            Text("HarmonyOS").fontWeight(700)
        }.width("100%")

      }.width(200).padding({bottom:10}).backgroundColor(Color.White).borderRadius({
        topLeft:10
      }).shadow({
        color:Color.Black,
        offsetX:2,
        offsetY:2,
        radius:100
      })
    }.width("100%").height("100%").backgroundColor("#F5f5f5").padding(10).alignItems(HorizontalAlign.Center)
  }
}

image.png

层叠布局

  1. 简介：层叠布局具有较强的组件层叠能力
  2. 使用场景：卡片层叠效果
  3. 语法
Stack(){
   组件1
   组件2
   组件3
}
// 对齐 alignContent:Alignment枚举类型（9种方位）
// zindex(可以调层叠的关系)
  1. 实现效果

image.png

案例-B站视频卡片

实现效果
image.png

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Column(){
      Column(){
        Stack({
          alignContent:Alignment.BottomEnd
        }){
          Image($r("app.media.bz_img")).borderRadius({topLeft:15,topRight:15})
          Row(){
            Image($r("app.media.bz_play")).width(20).fillColor(Color.White).margin({left:10,right:10})
            Text("288万").fontColor(Color.White)
            Image($r("app.media.bz_msg")).width(20).fillColor(Color.White).margin({left:10,right:10})
            Text("8655").fontColor(Color.White).layoutWeight(1)
            Text("4:33").fontColor(Color.White).margin({right:10})
          }.width("100%").height(40)
        }.height(200)
        Text("【凤凰传奇新歌】欢迎来到国风统治区：唢呐一响神曲《铁衣》燃爆登场！").fontSize(18).textIndent(10).margin(10)
          .maxLines(2).textOverflow({overflow:TextOverflow.Ellipsis})
        Row(){
          Text("19万点赞").backgroundColor("#fffaf0eb").borderRadius(5)
            .fontColor("#ffefbda5").padding(3)
          Image($r("app.media.bz_more")).width(20).fillColor("#999")
        }.width("100%")
        .padding(10)
        .justifyContent(FlexAlign.SpaceBetween)
      }.width(320).backgroundColor(Color.White).borderRadius(15).shadow({
        color:"#666",
        offsetX:1,
        offsetY:1,
        radius:80
      })
    }.width("100%").height("100%").backgroundColor("#f5f5f5").padding(10)
  }
}

image.png

案例-支付宝首页

实现效果
image.png

/*
扩展： 滚动组件：Scroll
*/

@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
    Stack({alignContent:Alignment.Bottom}){
      Stack({alignContent:Alignment.Top}){
        // header_search
        Row(){
          Column(){
            Text("北京").fontColor(Color.White)
            Text("晴2℃").fontColor(Color.White).fontSize(12)
            Image($r("app.media.zfb_head_down")).width(12).fillColor(Color.White)
              .position({x:35,y:0})
          }
          Row(){
            Image($r("app.media.zfb_head_search")).width(20).fillColor("#999")
            Text("北京交通一卡通").margin({left:5}).layoutWeight(1).fontColor("#666")
            Text("搜索").margin({left:5}).fontColor("#5b73de")
              .border({width:{left:1},color:"#999"}).padding({left:10}).fontWeight(700)
          }.height(32).layoutWeight(1).backgroundColor(Color.White).borderRadius(5)
          .margin({right:12,left:25}).padding({left:5,right:5})
          Image($r("app.media.zfb_head_plus")).width(30).fillColor(Color.White)
        }.width("100%").height(60).zIndex(999).padding({left:10,right:10}).backgroundColor("#5b73de")
        // body
       Scroll(){
         Column(){
           Row(){
             Column(){
               Image($r("app.media.zfb_top_scan")).width(36).fillColor(Color.White)
               Text("扫一扫").fontColor(Color.White)
             }.layoutWeight(1)
             Column(){
               Image($r("app.media.zfb_top_pay")).width(36).fillColor(Color.White)
               Text("收付款").fontColor(Color.White)
             }.layoutWeight(1)
             Column(){
               Image($r("app.media.zfb_top_travel")).width(36).fillColor(Color.White)
               Text("出行").fontColor(Color.White)
             }.layoutWeight(1)
             Column(){
               Image($r("app.media.zfb_top_card")).width(36).fillColor(Color.White)
               Text("卡包").fontColor(Color.White)
             }.layoutWeight(1)
           }.width("100%").padding({top:5,bottom:15})
           Column(){

             Row(){
               Column(){
                 Image($r("app.media.zfb_nav1")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#fff8873d")
                 Text("滴滴出行").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav2")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#ff13adc1")
                 Text("生活缴费").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav3")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#fff12745")
                 Text("股票").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav4")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#ff069134")
                 Text("蚂蚁森林").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav5")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#fff8873d")
                 Text("手机充值").fontColor("#999").fontSize(12)
               }.layoutWeight(1)

             }.width("100%").padding(10)
             Row(){
               Column(){
                 Image($r("app.media.zfb_nav6")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#fffa6401")
                 Text("余额宝").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav7")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#ff13adc1")
                 Text("花呗").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav8")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#fff1ae27")
                 Text("飞猪旅行").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav9")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#ffde1443")
                 Text("淘票票").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav10")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#ff44e2f1")
                 Text("饿了么").fontColor("#999").fontSize(12)
               }.layoutWeight(1)

             }.width("100%").padding(10)
             Row(){
               Column(){
                 Image($r("app.media.zfb_nav11")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#ff0c89ba")
                 Text("读书听书").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav12")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#ff058798")
                 Text("基金").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav13")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#ff429fef")
                 Text("直播广场").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav14")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#ff2a7adb")
                 Text("医疗健康").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
               Column(){
                 Image($r("app.media.zfb_nav15_more")).width(28).fillColor(Color.White).margin({bottom:8})
                   .fillColor("#ff010809")
                 Text("更多").fontColor("#999").fontSize(12)
               }.layoutWeight(1)
             }.width("100%").padding(10)
             Row({space:2}){
               Image($r("app.media.zfb_pro_pic1")).height(200).layoutWeight(1)
               Image($r("app.media.zfb_pro_pic2")).height(200).layoutWeight(1)
               Image($r("app.media.zfb_pro_pic3")).height(200).layoutWeight(1)
             }.width("100%").padding({left:2,right:2,top:5,bottom:20})
             Image($r("app.media.zfb_pro_list1")).width("100%").padding({left:2,right:2,top:0,bottom:10})
             Image($r("app.media.zfb_pro_list2")).width("100%").padding({left:2,right:2,top:0,bottom:10})
           }.backgroundColor("#f6f6f6").width("100%").borderRadius({
             topLeft:20,topRight:20
           })
         }.width("100%").margin({top:60,bottom:60})
       }
      }.width("100%").height("100%")
      // Tab_nav
      Row(){
        Column(){
          Image($r("app.media.zfb_tab_home")).width(35)
        }.layoutWeight(1)
        Column(){
          Image($r("app.media.zfb_tab_money")).width(28)
          Text("理财").fontSize(12)
        }.layoutWeight(1)
        Column(){
          Image($r("app.media.zfb_tab_life")).width(28)
          Text("生活").fontSize(12)
        }.layoutWeight(1)
        Column(){
          Image($r("app.media.zfb_tab_chat")).width(28)
          Text("消息").fontSize(12)
        }.layoutWeight(1)
        Column(){
          Image($r("app.media.zfb_tab_me")).width(28)
          Text("我的").fontSize(12)
        }.layoutWeight(1)

      }.width("100%").height(60).backgroundColor("#fbfcfe")

    }.backgroundColor("#5b73de").width("100%").height("100%")


  }
}

image.png
image.png

二、ArkTs语法进阶

字符串拼接

/*
加号可以将两个字符串拼接在一起，成为一个字符串
*/
let name:string = "varin"
console.log("Hello,"+name)

image.png

模板字符串

  • 作用：拼接字符串和变量
  • 优势：更适合多个变量的拼接
// 示例 （反引号）
let name:string = "varin"
let date:string = "6月23日"
console.log(`hello:${name},今天是${date}`)

image.png

类型转换（数字和字符串）

  • 字符串转数字
// Number() :直接转数字，不能存在非数字部分
// parseInt():去除小数部分，转数字
// parseFloat() 保留小数部分，转数字
/*
注意点：在使用console.log()函数时，第一个参数的数据类型需要是字符串
*/ 
let num:string="1.2"
console.log(`${Number(num)}`)
console.log(`${parseInt(num)}`)
console.log(`${parseFloat(num)}`)

image.png

  • 数字转字符串
/*
方法一：加双引号
方法二：toString()
方法三：toFixed() ：四舍五入转字符串，并可设置保留几位小数
*/
let num=1.11
let str1:string = num+""
let str2:string=num.toString()
let str3:string =num.toFixed(1)
console.log(str1)
console.log(typeof str1)
console.log(str2)
console.log(typeof str2)
console.log(str3)
console.log(typeof str3)

image.png

运算符

  • 算术运算符
// 包括加减乘除、取余(求模)等
/*
+
-
*
/ 
%
*/
console.log("result>>>",1+1)
console.log("result>>>",1-1)
console.log("result>>>",1*1)
console.log("result>>>",2/1)
console.log("result>>>",3%2)

image.png

  • 赋值运算符

image.png

  • 一元运算符
/*
符号：++ --
前置：先自增/减再赋值
后缀：先赋值在自增/减

*/
let num1:number =1
console.log("result>>>>>>",num1++) // 1
console.log("result>>>>>>",++num1) // 3

image.png

  • 比较运算符
/*
大于：>
大于等于：>=
小于：<
小于等于：<=
等于：==
不等：!=
*/
  • 逻辑运算符
/*
与：&&
或：||
非：！
*/
console.log("result>>>>>",1==1 && true)
console.log("result>>>>>",true || 1)
console.log("result>>>>>",!1)

image.png

数组

  • 数组定义
let names:string[]  =['小明',"小红",'小兰']
  • 数组查找
/*
查找
*/ 
console.log("result>>>>",names)
console.log("result>>>",names[0])
console.log("result>>>",names.length)

image.png

  • 数组修改
names[0]="笑笑"
console.log("result>>>>",names)

image.png

  • 数组增加
console.log("result>>>>",names.unshift("小明","大明")) // 前加，添加完成后会返回数组的长度
console.log("result>>>>",names)
console.log("result>>>>",names.push("小豆")) // 后加,添加完成后会返回数组的长度
console.log("result>>>>",names)

image.png

  • 数组删除
console.log("result>>>>",names.shift() )// 前删，返回删除的项
console.log("result>>>>",names)
console.log("result>>>>",names.pop() )// 后删，返回删除的项
console.log("result>>>>",names)

image.png

  • 任意位置增加或删除
/*
语法：数组名.splice(起始位置，删除个数，新增元素1...)
*/ 
names.splice(0,1) ///删除第一个元素
console.log("result>>>>",names)
names.splice(0,0,"a")// 从下标0新增元素，不删除元素，
console.log("result>>>>",names)
names.splice(0,1,"b")// 替换下标为0的元素
console.log("result>>>>",names)

image.png

单分支-if

let num1:number = 1
if(num1==1){ 
  // 条件为真执行以下语句
  console.log("true")
}

image.png

多分支-(if-else)

// 
let num1:number = 2
if(num1==1){ // 满足条件执行
  console.log("true")
}else{// 不满足条件执行
  console.log("false")
}

image.png

多分支-（if-else-else if）

// 满足什么条件执行什么语句

let num1:number = 2
if(num1==1){
  console.log("1")
}
else if(num1==2){
  console.log("2")
}
else{
  console.log("3")
}

多分支-switch

// 匹配条件
let num1:number = 333
switch(num1){
  case 1:
    console.log("1")
  break
  case 2:
    console.log("2")
  break
  default:
    console.log("error")
}

image.png

三元条件表达式

/*
语法：
  条件?true:false
*/
1==1?console.log("true"):console.log("false")

image.png

循环语句-while

/*
条件循环:while
语法：
while(true/false){
    语句
}
*/
let num:number = 1
while (num<=3){
  console.log("result>>>",num)
  num++
}
console.log("while循环结束")

image.png

循环语句-for

/*
语法：
for(初始值;条件;变化量){
    执行语句
}
*/
let num:number = 5
for(let i:number=0;num>=0;num--){
    console.log("result>>>",num)
}

image.png

退出循环-(break/continue)

  • break 退出循环
let num:number = 5
for(let i:number=0;num>=0;num--){
  if(num==1){break}
    console.log("result>>>",num)
}
console.log("for循环结束")

image.png

  • continue 跳出循环
let num:number = 5
for(let i:number=0;num>=0;num--){
  if(num==1){continue}
    console.log("result>>>",num)
}
console.log("for循环结束")

image.png

遍历数组

  • 方法一：for
let names:string[] = ["小明","小红","小美","小东"]
for (let i = 0; i < names.length; i++) {
    console.log("result=>>",names[i])
}

image.png

  • 方法二：for of
let names:string[] = ["小明","小红","小美","小东"]
for (let name of names) {
  console.log("result>>>>>",name)
}

image.png

对象数组

// 打印对象使用JSON.stringify()

//构建对象接口
interface  Person{
  name:string,
  age:number
}
let persons:Person[]=[
  {name:"小明",age:12},
  {name:"小红",age:13},
  {name:"小美",age:14},
  {name:"小东",age:22},
]
// 打印下标为1的对象
console.log(JSON.stringify(persons[0]))

image.png

  • 例：for of 打印所有对象
//构建对象接口
interface  Person{
  name:string,
  age:number
}
let persons:Person[]=[
  {name:"小明",age:12},
  {name:"小红",age:13},
  {name:"小美",age:14},
  {name:"小东",age:22},
]
// 打印下标为1的对象
for (let person of persons) {
  console.log(JSON.stringify(person))
}

image.png

三、界面交互功能

点击事件

  • 说明：组件被点击时触发的行为
  • 作用：监听组件点击，从而反应对应操作
  • 语法
onClick((参数)=>{
  
})
  • 示例 :点击按钮，弹框信息
@Entry
@Component
struct Index {
  @State message: string = 'varin';
  build() {
   Column(){

     Button("点击一下").onClick((event: ClickEvent) => {
       AlertDialog.show({
         message:'hello',
       })
       console.log("点击一下")
     })
   }.width("100%").height("100%").padding(10)

  }
}

image.png

状态管理

  • 介绍：如果希望构建一个动态的、有交互的页面，就需要引入状态的概念。
  • 状态变量：@State
  • 普通变量和状态变量对比
/*
普通变量：在初始化时渲染，后续不会变化
状态变量：需要装饰器装饰，改变会引起UI的渲染刷新（需要设置类型和初始值）
*/

示例：点击按钮修改文本值

/*
结果：
虽然两个文本的值都得到了修改，但是在UI界面并不会重新渲染普通变量的值
注意点：在组件内说明的变量，调用时需要使用this,且定义变量时不需要let关键字修饰
*/ 
@Entry
@Component
struct Index {
  @State text1:string ='varin1'
  text2:string = "varin2"
  build() {
   Column(){
     Text(this.text1)
     Text(this.text2)
     Button("点击一下").onClick((event: ClickEvent) => {
        this.text1= "hello,varin1"
        this.text2= "hello,varin2"
        console.log(this.text1)
        console.log(this.text2)
     })
   }.width("100%").height("100%").padding(10)

  }
}

image.png

运算符优先级

/*
高到低：
括号：()
一元：++,--,!
算术：*,/,%,+,-
比较：>,>=,<,<=
比较：==,!=
逻辑：&&=||
赋值：=
*/

案例-计数器

实现效果：点击加号，数字加1，点击减号，数字减1
image.png

@Entry
@Component
struct Index {
  @State num:number = 0
  build() {
  Column(){
    Row(){
      Button("-").onClick(()=>{
        if (this.num > 0) {
          this.num-=1
        }
      })
      Text(this.num.toString()).padding({left:10,right:10})
      Button("+").onClick(()=>{
        this.num+=1
      })
    }.width("100%")

  }.width("100%").height("100%").padding("10")
  }
}

image.png

ForEach渲染控制

  • 作用：循环渲染重复的组件
/*
语法：
ForEach(数组,(数据中的值：数据类型，索引)=>{
渲染组件并赋值
})
*/

实现效果：
image.png


@Entry
@Component
struct Index {
  @State titles:string[] = [
    "电子产品",
    "精品服饰",
    "母婴产品",
    "影音娱乐",
    "海外旅游",
  ]
  build() {
    Column(){

      Column(){
        ForEach(this.titles,(title:string,index)=>{
          Text(title).width("100%").height(80).textAlign(TextAlign.Center).fontWeight(700).fontColor(Color.Orange).fontSize(24)
        })
      }
      .width(200).height(80*this.titles.length).backgroundColor(Color.White).borderRadius(10)

    }.width("100%").height("100%").backgroundColor("#ffe3dfdf").padding(15)


  }
}

image.png

案例-卡片点赞

实现效果：能点赞和取消点赞
image.png
image.png

@Entry
@Component
struct Index {
  @State goodNum:number = 8899
  @State goodColor:string="#999"
  @State goodState:boolean=false
  build() {
  Column(){
    Column(){
      Image($r("app.media.hos")).height(280).borderRadius({topLeft:10,topRight:10})
        Text("华为鸿蒙系统是一款全新的面向全场景的分布式操作系统").lineHeight(30).fontSize(20).margin({left:10,right:10}).fontWeight(700)
      Row(){
        Image($r("app.media.user")).width(30).borderRadius(15)
          Text("Varin").padding({left:10}).layoutWeight(1)
       Row(){
         Image($r("app.media.ic_like")).padding({right:5}).width(25).fillColor(this.goodColor)
         Text(){
           Span(this.goodNum.toString())
         }.fontColor(this.goodColor)
       }.onClick(()=>{
         if(!this.goodState){
           this.goodNum+=1
           this.goodColor="#ffef9898"
           this.goodState=true
         }else{
           this.goodNum-=1
           this.goodColor="#999"
           this.goodState=false
         }
        })
      }.padding(10).width("100%")
    }.width(300).height(400).borderRadius(10).backgroundColor(Color.White)
  }.width("100%").height("100%").padding("10").backgroundColor("#fff3efef")
  }
}

案例-美团购物车

实现效果
image.png

@Entry
@Component
struct Index {
  @State productNum:number=0
  @State price:number = 40.4
  @State resultPrice:number =0.0
  build() {
    Stack({alignContent:Alignment.Bottom}){
    Scroll(){
      Column(){
        Row(){
          Image($r("app.media.product1")).width("35%").borderRadius(10)
          Column(){
            Text("冲销量100ml缤纷八果水果捞").height(20).width("100%")
            Text("含1份折扣商品").height(20).width("100%").fontSize(14).fontColor("#999")
              .lineHeight(20)
            Row(){
              Text(
              ){
                Span("￥").fontSize(14)
                Span("20.2").fontSize(20)
                Span("￥"+this.price).fontColor("#999").padding({left:5}).decoration({type:TextDecorationType.LineThrough})
              }.fontColor(Color.Red).layoutWeight(1)
              Row(){
                Text("-").layoutWeight(1).height("100%").textAlign(TextAlign.Center).onClick(()=>{
                  if(this.productNum>0){
                    this.productNum--
                    this.resultPrice-=20.2
                  }else{
                    this.resultPrice=0.00
                  }
                })
                Text(this.productNum.toString()).height(20).layoutWeight(1).textAlign(TextAlign.Center).height("100%").border({
                  width:{left:1,right:1},
                  color:"#999"
                })
                Text("+").layoutWeight(1).textAlign(TextAlign.Center).height("100%").onClick(()=>{
                  this.productNum++
                  this.resultPrice+=20.2
                })
              }.border({
                width:1,
                color:"#999"
              }).borderRadius(5).height(25).width(90)
            }.height(40)

          }.layoutWeight(1).padding({left:10})
        }.width("100%").height(80)

      }.padding({left:10,right:20,top:20}).width("100%").height("100%")
    }
      Row(){
        Column(){
          Text(){
            Span("已选 "+this.productNum.toString()+" 件，").fontColor("#999")
            Span("合计：")
            Span("￥"+this.resultPrice.toFixed(2)).fontColor(Color.Red)
          }.width("100%").textAlign(TextAlign.End)
          Text("共减￥"+this.resultPrice.toFixed(2)).fontColor(Color.Red).width("100%").textAlign(TextAlign.End).fontSize(14).lineHeight(20)

        }.layoutWeight(1)
        Button("结算外卖").margin({left:10}).backgroundColor("#fff6ac6b").fontColor(Color.Black)
      }.width("100%").height(80).backgroundColor(Color.White).padding({left:10,right:20})
    }.width("100%").height("100%").backgroundColor("#ffeae8e8")

  }
}

image.png

条件渲染案例-京东加购

实现效果：
image.png


@Entry
@Component
struct Index {
  @State isStock:boolean=true
  @State navHeight:number=60
  build() {
    Stack({alignContent:Alignment.Bottom}){
      Scroll(){
        Column(){
       Row(){
         Button("有库存").onClick(()=>{
            this.isStock=true
           this.navHeight=60
         })
         Button("无库存").onClick(()=>{
           this.isStock=false
           this.navHeight=100
         }).backgroundColor(Color.Red).margin({left:10})

       }
        }.width("100%").height("100%").padding(10)
      }
      Column(){
        if(this.isStock!=true){
          Row(){
            Image($r("app.media.ic_fly")).width(20).fillColor("#ffee8f37")
              Text("该商品暂时没有库存，看看类似商品吧").fontSize(10).margin({left:5}).fontColor("#ffee8f37").layoutWeight(1)
            Row(){
              Image($r("app.media.ic_arrow_left")).width(15).fillColor("#ff944b06")
            }.width(16).height(16).borderRadius(8).backgroundColor("#ff777575").opacity(0.3).justifyContent(FlexAlign.Center)
          }.width("100%").height(40).backgroundColor("#ffffe8d3").padding(15)

        }
        Row(){
          Row(){
            Column(){
              Image($r("app.media.ic_more")).width(20)
              Text("店铺").fontSize(12).lineHeight(20)
            }.layoutWeight(1)
            Column(){
              Image($r("app.media.ic_more")).width(20)
              Text("客服").fontSize(12).lineHeight(20)

            }.layoutWeight(1)
            Column(){
              Image($r("app.media.ic_more")).width(20)
              Text("购物车").fontSize(12).lineHeight(20)

            }.layoutWeight(1)
          }.layoutWeight(1)

          if(this.isStock==true){
          Button("加入购物车").backgroundColor("#fff88940")
            Button("立即购买").backgroundColor("#ffe90404").margin({left:5})

          }else{
            Button("查看类似商品").backgroundColor("#fff88940")
          }

        }.width("100%").height(60).padding({left:15,right:15})

      }.width("100%").height(this.navHeight).backgroundColor(Color.White)
    }.width("100%").height("100%").backgroundColor("#ffece7e7")

  }
}

image.png
image.png

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

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

相关文章

Halcon 根据霍夫变换在图像中寻找直线

Halcon 根据霍夫变换在图像中寻找直线

一 霍夫变换 1 定义 霍夫变换是图像处理中从图像中识别几何形状的基本方法之一.几何形状包括圆&#xff0c;椭圆&#xff0c;直线等等. 2 直线方程 直线的方程可以用yk*xb 来表示&#xff0c;其中k和b是参数&#xff0c;分别是斜率和截距; 3 霍夫变换原理&#xff1a; 设…
阅读更多...
《看不影子的少年》一部探讨偏见与接纳的电视剧❗

《看不影子的少年》一部探讨偏见与接纳的电视剧❗

《看不见影子的少年》这部电视剧以其独特的视角和深刻的主题 给我留下了深刻的印象。该剧讲述了一位与众不同的少年 他无法在阳光下留下影子&#xff0c;象征着他在社会中的孤独与不被理解 观看过程中&#xff0c;可以感受到少年内心的挣扎与渴望 他渴望被接纳&#xff0c;渴…
阅读更多...
电脑显示器无信号？一文教你解决！

电脑显示器无信号？一文教你解决！

电脑显示器无信号是一个常见的问题&#xff0c;可能会让用户感到困惑和沮丧。无信号通常表示显示器没有接收到来自电脑的视频信号&#xff0c;这可能是由于多种原因引起的&#xff0c;包括硬件连接问题、设置错误、驱动问题等。本文将详细介绍解决电脑显示器无信号的三种方法&a…
阅读更多...
C语言小例程28/100

C语言小例程28/100

题目&#xff1a;利用递归方法求5!。 程序分析&#xff1a;递归公式&#xff1a;fnfn_1*4! #include <stdio.h>int main() {int i;int fact(int);for(i0;i<6;i){printf("%d!%d\n",i,fact(i));} } int fact(int j) {int sum;if(j0){sum1;} else {sumj*fac…
阅读更多...
NtripShare2024年第二季度主要技术进展

NtripShare2024年第二季度主要技术进展

NtripShare Cloud GNSS解算云平台方面 1、解算引擎增加根据卫星多路径效应自动剔除卫星的算法。 2、解算引擎增加解算时间段限制&#xff08;发现贵州某地在晚12点周期性效果变差&#xff09;。 3、增加2000坐标至地方坐标系转换的支持(七参数、四参数、TGO高程拟合&#x…
阅读更多...
什么是车载测试？车载测试怎么学！

什么是车载测试？车载测试怎么学！

1、车载测试是什么&#xff1f; 车载测试分很多种&#xff0c;有软件测试、硬件测试、性能测试、功能测试等等&#xff0c;每一项测试的内容都不一样&#xff0c;我们所说的车载测试主要指的是汽车软件的功能测试&#xff0c;也就是针对汽车实现的某一个功能&#xff0c;而进行…
阅读更多...
无人机巡检小羊仿真

无人机巡检小羊仿真

详细视频地址 仿真效果 可视化三维仿真 gazebo物理仿真 px4 飞控仿真 仿qgc简易地面站 详细视频地址
阅读更多...
playwright录制脚本原理

playwright录制脚本原理

Paywright录制工具UI 在上一篇博客中介绍了如何从0构建一款具备录制UI测试的小工具。此篇博客将从源码层面上梳理playwright录制原理。当打开playwright vscode插件时&#xff0c;点击录制按钮&#xff0c;会开启一个新浏览器&#xff0c;如下图所示&#xff0c;在新开浏览器页…
阅读更多...
Shopee API接口：轻松获取虾皮购物平台的商品数据信息

Shopee API接口：轻松获取虾皮购物平台的商品数据信息

一、核心功能介绍——获取虾皮购物平台的商品数据信息 实时获取商品数据&#xff1a;Shopee接口提供实时更新的商品数据&#xff0c;包括商品名称、价格、库存、描述等详细信息&#xff0c;确保商家能够及时掌握商品最新状态。高效数据检索&#xff1a;商家可以根据不同的需求…
阅读更多...
作为一名车载测试工程师，核心能力是什么？

作为一名车载测试工程师，核心能力是什么？

最近经常有人会问我&#xff0c;说XX培训机构专门培训车载测试&#xff0c;我要去&#xff0c;而且薪资很高&#xff0c;现在是风口&#xff0c;你是否也听过这样的销售话语&#xff1f; 然后进去培训2-3个月&#xff0c;包括上车测试&#xff0c;后来进去后发现原来真实的场景…
阅读更多...
为什么都放弃了LangChain？

为什么都放弃了LangChain？

或许从诞生那天起&#xff0c;LangChain 就注定是一个口碑两极分化的产品。 看好 LangChain 的人欣赏它丰富的工具和组建和易于集成等特点&#xff0c;不看好 LangChain 的人&#xff0c;认为它注定失败 —— 在这个技术变化如此之快的年代&#xff0c;用 LangChain 来构建一切…
阅读更多...
活动预告｜探索 LLM 大模型的小型化 —— 微软 Phi3在 NVIDIA Jetson 与 NIM 平台的最佳实践

活动预告｜探索 LLM 大模型的小型化 —— 微软 Phi3在 NVIDIA Jetson 与 NIM 平台的最佳实践

在当前高速发展的人工智能领域&#xff0c;如何高效的部署和优化 SLM (小型的大模型) 成为关键。随着微软 Phi-3 系列模型的发布&#xff0c;让 SLM 在 NVIDIA Jetson 边缘计算平台上的部署成为可能。同时 Phi-3 系列模型已在 NVIDIA NIM 平台提供加速的推理服务。 NVIDIA NIM…
阅读更多...
ONLYOFFICE 桌面编辑器8.1---一个高效且强大的办公软件

ONLYOFFICE 桌面编辑器8.1---一个高效且强大的办公软件

软件介绍 ONLYOFFICE 桌面编辑器经过不断的更新换代现在迎来了&#xff0c;功能更加强大的ONLYOFFICE 桌面编辑器8.1是一个功能强大的办公套件&#xff0c;专为多平台设计&#xff0c;包括Windows、Linux和macOS。它提供了一套全面的办公工具&#xff0c;包括文档处理、电子表…
阅读更多...
Scope XY Project的使用

Scope XY Project的使用

1.Scope XY Project的功能介绍与使用方法 添加监控变量 绘制成一个三角形 XY进行对调操作 修改XY轴的比例修改显示输出 2.Cursor的使用方法 游标线的添加测量 3.Reporting功能的使用方法 到处对应的报表数据 添加对应的报告数据
阅读更多...
Pytorch之视频流猫狗识别

Pytorch之视频流猫狗识别

1. 导入资源包 // An highlighted block var foo bar;注&#xff1a; 1. import cv2: 导入OpenCV库&#xff0c;这是一个非常强大的计算机视觉库&#xff0c;用于处理图像和视频数据。 2. import tkinter as tk: 导入Tkinter库&#xff0c;这是Python的标准GUI库&#xff0c;…
阅读更多...
Java包介绍

Java包介绍

今天看jdk文档&#xff0c;顺便写一下java几个包的作用。 java.applet 主要用于创建java applet小应用程序&#xff0c;可以嵌入到网页中能够呈现出特殊的效果&#xff0c;现在基本已经被废弃&#xff0c;很少使用。 java.awt AWT 是Abstract Window ToolKit (抽象窗口工具包…
阅读更多...
Python 类对象

Python 类对象

Python 类对象 经典迭代器 可迭代对象的定义&#xff1a; 使用内置的iter可以获取迭代器的对象。如果对象实现了能返回迭代器的__iter__方法&#xff0c;那么对象就是可迭代的。序列都可以迭代。实现了__getitem__方法&#xff0c;而且接受从0开始的索引&#xff0c;这种对象也…
阅读更多...
perfect-scrollbar缩小浏览器窗口滚动条无线滚动的bug

perfect-scrollbar缩小浏览器窗口滚动条无线滚动的bug

https://github.com/mdbootstrap/perfect-scrollbar/issues/153
阅读更多...
微信小程序之横向列表展示

微信小程序之横向列表展示

效果图 参考微信小程序可看 代码&#xff1a; <view class"lbtClass"><view class"swiper-container"><scroll-view class"swiper" scroll-x"true" :scroll-left"scrollLeft"><block v-for"(six…
阅读更多...
支付互通新进展：微信收款码全场景接入银联网络

支付互通新进展：微信收款码全场景接入银联网络

随着支付便利化工作的不断推进&#xff0c;条码支付互联互通已经成为行业发展的重要趋势。 近日&#xff0c;银联网络迎来微信支付收款码场景的全面接入。 这一举措推动条码支付互联互通取得新进展&#xff0c;为境内外广大消费者提供更多支付选择、更好支付体验。无论从行业…
阅读更多...
最新文章

Copyright @ 2022~2023