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

news2024/11/17 9:56:17

一、鸿蒙应用界面开发

弹性布局-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

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

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

相关文章

2-15 基于matlab的蚁群，模拟退火，遗传，神经网络，禁忌搜索等智能优化算法对TSP问题

2-15 基于matlab的蚁群，模拟退火，遗传，神经网络，禁忌搜索等智能优化算法对TSP问题

基于matlab的蚁群&#xff0c;模拟退火&#xff0c;遗传&#xff0c;神经网络&#xff0c;禁忌搜索等智能优化算法对TSP问题。五种优化算法对多个城市路径进行规划&#xff0c;通过优化速度、距离可比较五种方法的优劣。程序已调通&#xff0c;可直接运行。 2-15 蚁群优化算法 …
阅读更多...
【UEFI实战】HttpBoot

【UEFI实战】HttpBoot

环境配置 首先下载tftpd工具&#xff0c;可以在phjounin / tftpd64 / Downloads — Bitbucket下载到&#xff0c;建议不要安装到C盘&#xff0c;因为可能无法修改其配置。配置tftpd工具的DHCP服务&#xff1a; 注意这里的IP地址需要跟实际网卡IP匹配。 下载Apache&#xff0c…
阅读更多...
短视频矩阵系统搭建部署，AI剪辑短视频，矩阵发布，一键管理矩阵账号

短视频矩阵系统搭建部署，AI剪辑短视频，矩阵发布，一键管理矩阵账号

目录 前言&#xff1a; 一、短视频矩阵系统功能是怎么样的&#xff1f; 二、怎么制作这样一款系统&#xff1f; 总结&#xff1a; 前言&#xff1a; AI短视频矩阵系统&#xff0c;利用AI编辑短视频的功能&#xff0c;将素材上传到系统里面&#xff0c;AI可以自动剪辑成新的短…
阅读更多...
【计算机视觉】人脸算法之图像处理基础知识【七】

【计算机视觉】人脸算法之图像处理基础知识【七】

直方图均衡化 直方图均衡化是一种常用的图像处理技术&#xff0c;用于改善图像的对比度&#xff0c;特别是在图像的细节被埋没在暗部或亮部区域时。通过重新分配图像的像素强度值&#xff0c;使得图像的整体对比度增强&#xff0c;从而让更多的细节变得可见。 import cv2 imp…
阅读更多...
关于NACHI机器人语言程序的反编译

关于NACHI机器人语言程序的反编译

所谓反编译&#xff0c;是指将执行形式的程序转换为机器人语言程序&#xff08;ASCII 文件&#xff09;。作业程序&#xff08;执行形式&#xff09;→机器人语言程序&#xff08;源程序&#xff09;。 机器人语言的源程序为纯文本形式&#xff0c;可使用个人电脑的文本编辑器…
阅读更多...
针对AIGC检测的鲁棒性测试——常见攻击手段汇总

针对AIGC检测的鲁棒性测试——常见攻击手段汇总

前言&#xff1a;这篇文章来总结一下针对AIGC检测的常见攻击手段&#xff0c;选取的研究工作均出自近5年AIGC检测相关文章。&#xff08;论文被拒了需要补实验&#xff0c;先来看看别人怎么做的……&#xff09; 2019 WIFS Detecting and Simulating Artifacts in GAN Fake Ima…
阅读更多...
Charles抓包工具系列文章（一）-- Compose 拼接http请求

Charles抓包工具系列文章（一）-- Compose 拼接http请求

一、背景 众所周知&#xff0c;Charles是一款抓包工具&#xff0c;当然是http协议&#xff0c;不支持tcp。&#xff08;如果你想要抓tcp包&#xff0c;请转而使用wireshark&#xff0c;在讲述websocket的相关技术有梳理过wireshark抓包&#xff09; 话说回来&#xff0c;char…
阅读更多...
企业文件传输系统只能传输？分享功能同样重要！（上）

企业文件传输系统只能传输？分享功能同样重要！（上）

在当今的商业世界里&#xff0c;企业间的协作和信息交流已经变得极其重要&#xff0c;特别是在处理那些庞大的文件时。想象一下&#xff0c;设计图、高清视频、大数据分析&#xff0c;还有软件开发包&#xff0c;这些文件的大小往往达到GB甚至TB级别&#xff0c;它们是企业日常…
阅读更多...
守护生产车间安全：可燃气体报警器预警与检测的重要性

守护生产车间安全：可燃气体报警器预警与检测的重要性

近日&#xff0c;东莞一材料厂发生的火灾事故再次敲响了工业安全生产的警钟。 这起事故不仅给工厂带来了巨大的经济损失&#xff0c;也暴露了一些企业在安全管理方面的疏漏。其中&#xff0c;可燃气体报警器的应用与预警功能在火灾防范中扮演了至关重要的角色。 接下来&#…
阅读更多...
AlgorithmStar 度量 计算组件

AlgorithmStar 度量 计算组件

AlgorithmStar 度量 计算组件 AlgorithmStar 本文将会基于 AlgorithmStar 1.40 以及以上的版本来演示&#xff0c;度量 计算 组件 的使用&#xff01; 目录 文章目录 AlgorithmStar 度量 计算组件目录获取到依赖库度量计算组件 计算实例距离计算代表 - 欧几里德距离计算组件…
阅读更多...
麒麟信安系统关闭core文件操作

麒麟信安系统关闭core文件操作

在使用麒麟信安系统时&#xff0c;如果应用程序运行过程中崩溃了&#xff0c;此时并不会导致内核崩溃&#xff0c;只会在tmp目录下产生崩溃数据&#xff0c;如下图 不过tmp目录下的分区容量有限&#xff0c;当崩溃的应用core文件过大时将会占用tmp空间&#xff0c;导致tmpfs分区…
阅读更多...
零代码搭建AI应用-文心智能体的设计与实现

零代码搭建AI应用-文心智能体的设计与实现

本教程旨在帮助你开发一个结合语音识别和信息查询技术的智能应用&#xff0c;为用户提供登山小技巧和心得体会&#xff0c;满足用户在户外运动中的需求。通过设计不同角色和场景&#xff0c;可以满足用户在不同生活领域的需求&#xff0c;例如在家庭、社交、职场等场景下提供不…
阅读更多...
37. 变焦镜头

37. 变焦镜头

导论&#xff1a; 设计好的一组镜头如果变化镜片与镜片之间的空气厚度&#xff0c;镜头的焦距会随之变化。 通常来说一个系统的接收面尺寸大小是固定不变的。 设计要求&#xff1a; 设计一个简单的变焦镜头&#xff1a;入瞳直径25mm&#xff0c;焦距75~125mm&#xff0c;像…
阅读更多...
为什么说大模型训练很难？

为什么说大模型训练很难？

前言 在人工智能的浪潮中&#xff0c;大模型训练无疑是一股不可忽视的力量。然而&#xff0c;这背后的过程却充满了挑战与困难。今天&#xff0c;让我们一同揭开大模型训练的神秘面纱&#xff0c;探讨为何它值得您的关注与投入。 大模型训练的挑战 大模型训练之所以难&…
阅读更多...
物联网技术-第5章-物联网数据处理

物联网技术-第5章-物联网数据处理

目录 1.物联网数据特征 2.物联网数据处理 &#xff08;1&#xff09;数据清洗 &#xff08;2&#xff09;数据存储 &#xff08;3&#xff09;数据融合 &#xff08;4&#xff09;数据挖掘 3.大数据基本概念 4.云计算基本概念 &#xff08;1&#xff09;背景 &#xf…
阅读更多...
Python学习笔记18：进阶篇(七)常见标准库使用之OS模块

Python学习笔记18：进阶篇(七)常见标准库使用之OS模块

前言 入门到进阶的知识点基本都学习了&#xff0c;可能有一些遗漏的请谅解&#xff0c;不过只要坚持学习下去&#xff0c;在后面的学习中进行查缺补漏。 根据Python crash course书中的进度&#xff0c;要准备开始写小项目了。在这之前&#xff0c;我看了Python的官方教程&am…
阅读更多...
Redis-主从复制-配置主从关系

Redis-主从复制-配置主从关系

文章目录 1、修改配置文件中的 bind ,注释该配置,取消绑定仅主机登录2、修改protected-mode 为no,取消保护模式3、查看redis的进程状态4、配置6380是6379的从机5、配置6381是6379的从机6、查看主机 6379 的主从信息 1、修改配置文件中的 bind ,注释该配置,取消绑定仅主机登录 …
阅读更多...
Linux 运维 | 4.从零开始，文件目录特殊权限管理实践

Linux 运维 | 4.从零开始，文件目录特殊权限管理实践

[ 知识是人生的灯塔&#xff0c;只有不断学习&#xff0c;才能照亮前行的道路 ] 0x00 前言简述 描述&#xff1a;前一章&#xff0c;学习了Linux系统中的用户与用户组的管理&#xff0c;此章节我们将继续学习Linux系统中比较基础且重要的文件权限设置与属性管理&#xff0c;在L…
阅读更多...
Zoho邮箱怎么注册?最强完整指南

Zoho邮箱怎么注册?最强完整指南

Zoho企业邮箱&#xff0c;凭借其16年的产品历程和卓越的服务品质&#xff0c;已经成为全球超过1800万企业级客户的信赖之选。今天&#xff0c;我们将手把手教你如何注册Zoho邮箱。 一、Zoho邮箱是什么&#xff1f; Zoho邮箱是Zoho Workplace套件中的核心产品&#xff0c;专门…
阅读更多...
2024年通信技术与计算机科学国际学术会议（ICCTCS 2024）

2024年通信技术与计算机科学国际学术会议（ICCTCS 2024）

2024年通信技术与计算机科学国际学术会议&#xff08;ICCTCS 2024&#xff09; 2024 International Academic Conference on Communication Technology and Computer Science&#xff08;ICCTCS 2024&#xff09; 会议简介&#xff1a; 2024年通信技术与计算机科学国际学术会议…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023