黑马视频HarmonyOS零底子
本文章是根据黑马步伐员鸿蒙 HarmonyOS NEXT星河版零底子入门到实战00-鸿蒙开辟环境预备_哔哩哔哩_bilibilihttps://csdnimg.cn/release/blog_editor_html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83Ahttps://www.bilibili.com/video/BV14t421W7pA?spm_id_from=333.788.videopod.episodes&vd_source=5d8817075e4d4e6bbfaa6c0251bdca76&p=2记录HarmonyOS的底子。
该视频真的非常得当有点了解前端的小同伴学习，里面有很多最底子的东西。
有前端经验，react经验的小同伴看这个视频就非常的容易明白，直接看以下的条记，认真过一遍就可以了。
以下是我的训练仓库：
HarmonyOS-learn: 对HarmonyOS的底子学习记录 (gitee.com)https://csdnimg.cn/release/blog_editor_html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83Ahttps://gitee.com/saro-d/harmonyOS-learn
后续将连续更新该视频的条记
ArkTs
// 打印
console.log('你好，我第一次来','黑马');
// 变量
let firstDay:string = '他们吵起来了'
firstDay = '看视频吵起来的'
// 常量
const commoy:string ='这是个常量，不可修改'
// 数组
const names:string[] = ['小红','小明','笑话']
// 函数
function fn(val:number){
console.log('你好，我是函数', val)
}
fn(2)
// 箭头函数
const jianTouFn = (val:string)=>{
console.log('你好，我是箭头函数', val)
}
jianTouFn('箭头函数1')
// 对象
interface perObj{
name:string,
age:number,
statue:boolean,
sing:()=>void,
say:(val:string)=>string
}
const person:perObj = {
name:'大大',
age:18,
statue:false,
sing:() => {
console.log('唱歌了')
},
say:(val:string) => {
return val
}
}
person.sing()
console.log('对象名',person.name)
console.log('对象说话',person.say('你好'))
// 联合类型
let res:string | number |boolean = '优'
res = 100
res = false
let gender:'man'|'woman'|'no' = 'no'// 值已经被约束
// 枚举类型
enum ColorEnum{
Red='红色',
Black='黑色'
}
let sayColor:ColorEnum=ColorEnum.Red
console.log('颜色',sayColor)
ArkUI
https://i-blog.csdnimg.cn/direct/82c960aa7ea94c559e603820a5152546.png
组件：容器组件，底子组件
https://i-blog.csdnimg.cn/direct/9f5ae10664a54edd9092697e4b11c4a3.png
根组件只有一个，以是最外层需要用Column容器组件包裹
struct Index {
build() {
Column(){
Text('小说简介')
Row(){
Text('都市')
Text('言情')
Text('生活')
Text('男频')
}
}
}
} 组件字体属性方法
https://i-blog.csdnimg.cn/direct/d430e7909e184a14b54a9f5ede2e8435.png
字体颜色
https://i-blog.csdnimg.cn/direct/811e9ad112eb49e0bbd32aa8c5055818.png
struct Index {
build() {
Column(){
Text('小说简介')
.margin(10)
.fontSize(24)
.fontWeight(FontWeight.Bold)
.fontColor(Color.Pink)
Row(){
Text('都市')
.fontSize(20)
.fontColor(Color.Green)
Text('言情')
.margin(10)
.fontColor(Color.White)
Text('生活')
.fontSize(20)
.margin(10)
.fontColor(Color.Blue)
Text('男频')
.fontColor(Color.White)
}
.margin(10)
}
.width('100%')
.backgroundColor('#afb1b3')
}
} 笔墨溢出省略号，行高
https://i-blog.csdnimg.cn/direct/4c84389d5cb7499cb729ab2d38c84f0d.png
Column(){
Text('鸿蒙开发初体验')
.width('100%')
.fontSize(24)
.fontWeight(FontWeight.Bold)
Text('文字溢出省略号，行高文字溢出省略号，行高文字溢出省略号，行高文字溢出省略号，行高文字溢出省略号，行高')
.width('100%')
.textOverflow({
overflow:TextOverflow.Ellipsis
})
.maxLines(2)
.lineHeight(30)
} https://i-blog.csdnimg.cn/direct/b674d1fd34bd4253bd84e0a45f29e9d7.png
图片组件使用
// 图片
Column(){
Row(){
Text('网络图片 ')
Image('https://www.itheima.com/images/logo.png')
.width(200)
}
Column(){
Image($r('app.media.Img01'))
.width(200)
.margin(20)
Row(){
Image($r('app.media.img02')).width(50) .margin(10)
Text('网络图片')
}
}
.margin(20)
.width('100%')
} https://i-blog.csdnimg.cn/direct/da4f1ae92f7b4eba8f628710189ff236.png
输入框和按钮
https://i-blog.csdnimg.cn/direct/dd5b75b49fbd4bf4be5f6d86cafea3a3.png
@Entry
@Component
struct inputBtn {
build() {
Column({space:20}){
TextInput({
placeholder:'请输入用户名'
})
TextInput({
placeholder:'请输入密码'
})
.type(InputType.Password)
Button('登录')
.width(100)
}
.width(300)
}
} 登录页面训练
https://i-blog.csdnimg.cn/direct/a1dded9959674049b402d024c0d15329.png
@Entry
@Component
struct Login {
build() {
Column({space:20}){
Image($r('app.media.img02')).width(100)
Column({space:20}){
TextInput({
placeholder:'请输入用户名'
})
TextInput({
placeholder:'请输入密码'
})
.type(InputType.Password)
Button('登录')
.width('100%')
}
Row({space:20}){
Text('前往注册')
Text('忘记密码')
}
}.padding(20)
}
} Svg图标
https://i-blog.csdnimg.cn/direct/df3888d92ac5481b95782cb905610420.png
布局元素构成
https://i-blog.csdnimg.cn/direct/f24f6f6ff43f45bf9524a950d08f62bc.png
内边距
https://i-blog.csdnimg.cn/direct/26664d80e0e84453aeb01688ddbd0936.png
外边距
https://i-blog.csdnimg.cn/direct/3521759946564296b75523b8ff1ab83d.png
边框
https://i-blog.csdnimg.cn/direct/965161d624c54cdc95db954edaa792f9.png
训练
@Entry
@Component
struct QQLogin {
@State user:string = '大王叫我来巡山'
build() {
Column(){
Image($r('app.media.img02')).width(100).borderRadius(50)
Text(this.user).margin({
top:20,
bottom:40
})
Column({space:15}){
Button('QQ登录')
.width('100%')
Button('微信登录')
.width('100%')
.backgroundColor('#dfdfdf')
.fontColor('#1e1e1e')
}
Row({space:20}){
Text('前往注册')
Text('忘记密码')
}.margin({
top:20
})
}.padding(20)
}
} https://i-blog.csdnimg.cn/direct/0480b0409677476889acb42b91da774f.png
圆角
https://i-blog.csdnimg.cn/direct/340f07226c494bb2ac99a90b163f7a0c.png 特殊形状圆角
https://i-blog.csdnimg.cn/direct/b4a54645f72445a38ee71a99c935872b.png
背景属性
https://i-blog.csdnimg.cn/direct/c28edcd602c3460dbac384e4b421a468.png
背景图
https://i-blog.csdnimg.cn/direct/acfa7486280f47a0893380c9c9ba3217.png
背景图位置
https://i-blog.csdnimg.cn/direct/2fc384c8134c4912bd324941821cffac.png
背景图单位
默认单位是px
https://i-blog.csdnimg.cn/direct/1e8ffd7f0eab474cb9b69481cd1402da.png
背景图尺寸
https://i-blog.csdnimg.cn/direct/720342600aa843818111394a47f0e9a7.png
线性布局
https://i-blog.csdnimg.cn/direct/028df2ceec0a4031b3921619a790cc24.png
主轴对齐
https://i-blog.csdnimg.cn/direct/bf061d142caa4bb394396964a86dacba.png
交织轴对齐
https://i-blog.csdnimg.cn/direct/15cf48e8aba64f6da094bbc3d0e6f11d.png
自适应伸缩
https://i-blog.csdnimg.cn/direct/187ef74fb58c4935949206131f9dc4e4.png
得物卡片
https://i-blog.csdnimg.cn/direct/b0848679134c4c7b9385148ff8eb8874.png
@Entry
@Component
struct DeWuCard {
build() {
Column(){
Image($r('app.media.img02'))
.width('100%')
.height(250)
.borderRadius({
topLeft:10,
topRight:10
})
Text('今晚吃这个 | 每日艺术分享')
.width('100%')
.padding({
top:20,
right:10,
left:10,
bottom:20
})
.fontSize(20)
.fontWeight(FontWeight.Bold)
Row(){
Image($r('app.media.img02'))
.width(25)
.margin({
right:5
})
Text('插画师分享聚集地')
.layoutWeight(1)
Image($r('app.media.img02'))
.width(25)
.margin({
right:5
})
Text('2300')
.width(40)
}
.margin(10)
}
.width(300)
.height(360)
.backgroundColor(Color.Pink)
.borderRadius(10)
}
} 京东登录案例
https://i-blog.csdnimg.cn/direct/5f5e88a6807c40d0977ef84c376e5d49.png
@Entry
@Component
struct JDLogin {
build() {
Column(){
Row(){
Image($r('app.media.cancel'))
.height(20)
Text('帮助')
}
.width('100%')
.height(30)
.justifyContent(FlexAlign.SpaceBetween)
Image($r('app.media.jdlogo'))
.width(200)
.margin({
top:50,
bottom:30
})
// 表单
Row(){
Text('国家/地址')
.fontColor('#666')
.height(16)
.layoutWeight(1)
Text('中国(+86)')
.fontColor('#666')
.height(16)
Image($r('app.media.ic_arrow_right'))
.fillColor('#666')
.height(16)
}
.backgroundColor('#fff')
.width('100%')
.padding(10)
.height(40)
.borderRadius(20)
Row(){
TextInput({
placeholder:'请输入手机号'
})
.placeholderColor('#666')
.height('100%')
.padding(0)
.backgroundColor('#fff')
}
.backgroundColor('#fff')
.width('100%')
.padding(10)
.height(40)
.borderRadius(20)
.margin({top:20,bottom:20})
// 条款
Row(){
Checkbox().width(10)
Text(){
Span('我已经阅读并同意')
Span('《京东隐私政策》《京东用户协议》')
.fontColor('#3274f6')
Span('未注册的手机号将自动创建京东账号')
}
.width('100%')
.fontSize(12)
.fontColor('#666')
}
.width('100%')
.margin({right:20,bottom:25})
.alignItems(VerticalAlign.Top)
Button('登录').width('100%').backgroundColor('#bf2838')
Row({space:25}){
Text('注册新用户')
.fontSize(14)
Text('账户密码登录')
.fontSize(14)
Text('无法登录')
.fontSize(14)
}
.margin({top:15})
// 其他
Blank()
Column(){
Text('其他登录方式')
.fontSize(14)
.height(22)
.fontColor('#666')
Row(){
Image($r('app.media.jd_huawei'))
.width(34)
Image($r('app.media.jd_wechat'))
.width(34)
Image($r('app.media.jd_weibo'))
.width(34)
Image($r('app.media.jd_QQ'))
.width(34)
}
.width('100%')
.padding(28)
.justifyContent(FlexAlign.SpaceBetween)
}
.height(100)
}
.padding(20)
.width('100%')
.height('100%')
.linearGradient({
angle:135,
direction:GradientDirection.RightBottom,
colors:[,,,]
})
}
} 弹性布局
https://i-blog.csdnimg.cn/direct/fa18e296f84a492fb4f976f03322a3bf.png
例子
@Entry
@Component
struct Login {
build() {
Flex({
direction:FlexDirection.Column,
justifyContent:FlexAlign.Center,
alignItems:ItemAlign.Center
}){
Text().width(100).height(100).backgroundColor(Color.Pink).border({
width:1,
color:Color.Black })
Text().width(100).height(100).backgroundColor(Color.Pink).border({
width:1,
color:Color.Black })
Text().width(100).height(100).backgroundColor(Color.Pink).border({
width:1,
color:Color.Black })
}.width('100%').height(600).backgroundColor(Color.Green)
}
} 换行
https://i-blog.csdnimg.cn/direct/b2d0d85188f04474bddbe30eab8bf315.png
Grid布局
https://i-blog.csdnimg.cn/direct/aef843cc38b04b01a6e8bfcf97162049.png
例子：
https://i-blog.csdnimg.cn/direct/6929aaab3a2341218cbd77020faf4182.png
间隙：
https://i-blog.csdnimg.cn/direct/d43b5437b08247d39a745a7dbd77bad0.png
角标组件Badge
https://i-blog.csdnimg.cn/direct/f9550c4e36b94137a5383a20a66908a8.png
绝对定位和zIndex层级
https://i-blog.csdnimg.cn/direct/73e2e2e28b284e4d918bfc2552064b7b.pnghttps://i-blog.csdnimg.cn/direct/ad2da4b07cbe434f95b3e0433897af22.png
@Entry
@Component
struct JDLogin {
build() {
Column(){
Text().width(100).height(100).backgroundColor(Color.Yellow).border({
width:1,
color:Color.Black })
.position({
x:50,
y:100
})
.zIndex(-1)
}
}
} 层叠布局
https://i-blog.csdnimg.cn/direct/7a235c85eb7a47d6b87b15d3de8d8156.png
https://i-blog.csdnimg.cn/direct/d52c0bf57cf3458b878380f76d8ee035.png
https://i-blog.csdnimg.cn/direct/d5d4cbc81e014703b481f6de0e8607fa.png
B站卡片案例
https://i-blog.csdnimg.cn/direct/faf1dd5c2dcb47d9b54cca53039bb7fb.png
@Entry
@Component
struct Login {
build() {
Column(){
Column(){
Stack({alignContent:Alignment.Bottom}){
Image($r('app.media.img02')).width('100%').height('100%')
.borderRadius({topLeft:20,topRight:20})
Row(){
Row({space:5}){
Image($r('app.media.jd_wechat')).width(16)
Text('288万').fontColor(Color.White)
}.margin({right:10})
Row({space:5}){
Image($r('app.media.jd_wechat')).width(16)
Text('288万').fontColor(Color.White)
}.layoutWeight(1)
// 除了写.layoutWeight(1)，也可以写
// Blank()
Text('4:33').fontColor(Color.White)
}.width('100%').height(30).alignItems(VerticalAlign.Center).padding({right:5,left:5})
}.width(300).height(160)
// 文字
Text('【凤凰传奇新歌】欧迎来到国风统治区:唢呐一响神曲《铁衣【凤凰传奇新歌】欧迎来到国风统治区:唢呐一响神曲《铁衣')
.lineHeight(20).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(2)
.padding(10)
Row(){
Text('19万点赞').backgroundColor('#fff1f0').fontColor('#c77a60').padding(5)
Image($r('app.media.jd_wechat')).width(16).margin({right:5})
}.width('100%').justifyContent(FlexAlign.SpaceBetween).padding(10)
}.width(300).height(270).borderRadius(20).backgroundColor(Color.White)
}.width('100%').height('100%').backgroundColor('#f6f8fa')
}
} 阶段综合-付出宝首页
https://i-blog.csdnimg.cn/direct/89174617985548a7a38b7b888ac865ff.png
@Entry
@Component
struct ZfbHome {
build() {
Stack({alignContent:Alignment.Bottom}){
Stack({alignContent:Alignment.Top}){
// 顶部搜索
Row(){
Column(){
Row(){
Text('重庆').fontColor(Color.White)
Image($r('app.media.top_down')).width(20).fillColor(Color.White)
}
Text('晴 2℃').fontColor(Color.White).fontSize(14)
}.height(33).alignItems(HorizontalAlign.Start)
Row(){
Image($r('app.media.top_sousuo')).width(20)
TextInput({
placeholder:'重庆交通一卡通'
}).placeholderColor('#666').layoutWeight(1)
Text('搜索').fontColor('#4c74ef').width(55).border({ width:{left:1},color:'#e9e9e9'}).textAlign(TextAlign.Center)
}.height(33).backgroundColor(Color.White).borderRadius(10)
.margin({left:12,right:12}).padding({left:10,right:10}).layoutWeight(1)
Image($r('app.media.top_add')).width(30).fillColor(Color.White)
}.width('100%').height(60).padding({left:10,right:10})
.backgroundColor('#6681ea').zIndex(2)
// 内容
Scroll(){
Column(){
Row(){
Column(){
Image($r('app.media.head_sao')).width(28)
Text('扫一扫').fontColor(Color.White)
}
Column(){
Image($r('app.media.head_shoufukuan')).width(28)
Text('收付款').fontColor(Color.White)
}
Column(){
Image($r('app.media.head_chuxing')).width(28)
Text('出行').fontColor(Color.White)
}
Column(){
Image($r('app.media.head_car')).width(28)
Text('卡包').fontColor(Color.White)
}
}.width('100%').margin({bottom:20})
.justifyContent(FlexAlign.SpaceAround).alignItems(VerticalAlign.Center)
Column(){
// 多功能
Flex({
direction:FlexDirection.Row,
justifyContent:FlexAlign.SpaceAround,
alignContent:FlexAlign.SpaceAround,
wrap:FlexWrap.Wrap
})
{
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
Column(){
Image($r('app.media.dd')).width(28)
Text('滴滴')
}.width('20%')
}.width('100%').height(170)
.backgroundColor(Color.White).borderRadius({topLeft:20,topRight:20})
// 推荐
Row(){
Column(){
Stack({alignContent:Alignment.Top}){
Text().width('100%').height(40).backgroundColor('#fde5ff')
Text('官方收钱码').padding(6).fontColor('#d6b5d9').fontSize(12).fontWeight(600)
.backgroundColor('#FFF').borderRadius({bottomRight:10,bottomLeft:10})
}
Column(){
Text('收钱码站出来').fontWeight(700).fontColor('#af6ac6').fontSize(15)
Text('最高100元奖励').fontColor('#d6b5d9').fontSize(14)
Image($r('app.media.shouju')).height(80).position({y:50,x:10})
}.layoutWeight(1)
}.height('100%').width(110).borderRadius(10).backgroundColor(Color.White)
Column(){
Row({space:2})
{
Image($r('app.media.jd_huawei')).width(20)
Text('消费圈').fontWeight(600)
Text('便宜').padding(4).linearGradient({
angle:90,
direction:GradientDirection.Right,
colors:[,]
}).borderRadius(10).fontColor(Color.White).fontSize(11)
}.width('100%').height(40).linearGradient({
angle:90,
direction:GradientDirection.Right,
colors:[,]
})
Image($r('app.media.img02')).width(80).margin({top:12,bottom:15})
Row(){
Image($r('app.media.jd_wechat')).width(30)
Column(){
Text('买绿色商品').fontSize(13).fontWeight(600)
Text('得森林能量').fontSize(13).fontColor('#b5b5b5')
}
}
}.height('100%').width(110).borderRadius(10).backgroundColor(Color.White)
Column(){
Row({space:2})
{
Image($r('app.media.jd_huawei')).width(20)
Text('理好财').fontWeight(600)
Text('精选').padding(4).linearGradient({
angle:90,
direction:GradientDirection.Right,
colors:[,]
}).borderRadius(10).fontColor(Color.White).fontSize(11)
}.width('100%').height(40).linearGradient({
angle:90,
direction:GradientDirection.Right,
colors:[,]
})
Image($r('app.media.img02')).width(80).margin({top:12,bottom:15})
Row(){
Image($r('app.media.jd_wechat')).width(30)
Column(){
Text('买绿色商品').fontSize(13).fontWeight(600)
Text('得森林能量').fontSize(13).fontColor('#b5b5b5')
}
}
}.height('100%').width(110).borderRadius(10).backgroundColor(Color.White)
}.width('100%').height(160).justifyContent(FlexAlign.SpaceAround).margin({top:10})
// 视频
Row(){
Column(){
Row({space:10}){
Image($r('app.media.dd')).width(25)
Text('市民中心·城市发布').fontWeight(700)
}.width('100%').margin({bottom:10})
Text('在重庆退休后能领多少养老金？').font({
size:14,
weight:600
}).lineHeight(20)
Row({space:20}){
Text('怎样计算？').fontSize(14).fontColor('#c1c1c1')
Text('政务办事').fontSize(14).padding(2).backgroundColor('#f9eccf').fontColor('#c88757')
}.margin({bottom:20})
Text('去看看').fontSize(16).fontWeight(600).padding(10)
.backgroundColor('#f9eccf').fontColor('#c88757').borderRadius(10)
}.layoutWeight(1).alignItems(HorizontalAlign.Start)
Stack({
alignContent:Alignment.TopStart
})
{
Image($r('app.media.Img01')).borderRadius(10)
Image($r('app.media.play')).width(30)
}.width(130)
}.width('100%').height(160).padding(10).margin({top:20,bottom:20}).backgroundColor(Color.White)
// 消费圈
Flex(){}
}.width('100%').backgroundColor('#f8f8f8').borderRadius({topLeft:20,topRight:20})
}.width('100%').padding({top:60,bottom:60})
.backgroundColor('#6681ea')
}
}
// 底部Tab
Row(){
Column(){
Image($r('app.media.tab_zfb')).width(40)
}
Column(){
Image($r('app.media.tab_licai')).width(28)
Text('理财')
}
Column(){
Image($r('app.media.tab_life')).width(28)
Text('生活')
}
Column(){
Image($r('app.media.tab_xiaoxi')).width(28)
Text('消息')
}
Column(){
Image($r('app.media.tab_i')).width(28)
Text('我的')
}
}.width('100%').height(60).backgroundColor(Color.White)
.justifyContent(FlexAlign.SpaceAround).alignItems(VerticalAlign.Center)
}.width('100%').height('100%').backgroundColor(Color.Pink)
}
}
字符串拼接
https://i-blog.csdnimg.cn/direct/0cef432daeb1404f99c58f52369c69f0.png
模板字符串
https://i-blog.csdnimg.cn/direct/2c3cc6f340e340a6915839a2021a84d4.png
范例转换（数字和字符串）
字符串转数字
https://i-blog.csdnimg.cn/direct/fc9e4213acdd4b859d0eabacc3285c3c.png
https://i-blog.csdnimg.cn/direct/ca417ad565504830b46584c689f70822.png
https://i-blog.csdnimg.cn/direct/3d4ce06841984163bd9e5eae18997297.png
数字转字符串
https://i-blog.csdnimg.cn/direct/ff06ccec0ffa4c0cb5c20dae2311aaec.png
交互
点击事件
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Column(){
Button('点击喔')
.onClick(()=>{
AlertDialog.show({
message:'你好~这是个弹窗'
})
})
}
}
} 状态管理
https://i-blog.csdnimg.cn/direct/351b000bb68042aa9f04bfa9146481c0.png
https://i-blog.csdnimg.cn/direct/55e471e4b74f4bbbacf85c9fbbde9e23.png
// 普通变量
let msg:string='我是组件外普通变量'
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
msg1:string='我是组件内普通变量'
msg2:string='我是组件内普通变量2'
build() {
Column(){
Text(msg)
Text(this.msg1)
Button(this.message)
.onClick(()=>{
AlertDialog.show({
message:'你好~这是个弹窗'
})
this.message = '已经点击了'
})
}
}
} 计算器案例
@Entry
@Component
struct CounterPage{
@State num:number = 0
build() {
Row({space:10}){
Button('-')
.onClick(()=>{
this.num--
})
Text(this.num.toString())
Button('+')
.onClick(()=>{
this.num++
})
}
}
} 运算符
算数运算符
https://i-blog.csdnimg.cn/direct/4a7ca5a186854eef83a2d9df69b1da55.png
赋值运算符
https://i-blog.csdnimg.cn/direct/f8138681c92d4aa6a7edd56af2ef142a.png
点赞案例
https://i-blog.csdnimg.cn/direct/1469d6a436134d6088dd50836b60703e.png
@Entry
@Component
struct CounterPage{
@State count:number=999
@State supportColor:string =''
@State supportState:boolean = false
build() {
Column({space:10}){
// 爱心
Row({space:10}){
Image($r('app.media.love')).width(30).fillColor(this.supportColor)
Text(this.count.toString()).fontColor(this.supportColor)
}
.onClick(()=>{
if(this.supportState){
this.supportColor = ''
this.count --
this.supportState = false
}else{
this.supportColor = '#8f1422'
this.count ++
this.supportState = true
}
})
}
}
} 一元运算符
https://i-blog.csdnimg.cn/direct/8a1663d8d5184aafb8e20394635e2d90.png
比较运算符
https://i-blog.csdnimg.cn/direct/84a0ac1174704e3d8a703977e7e544c9.png
逻辑运算符
https://i-blog.csdnimg.cn/direct/10ef269cfbb74d30a97c85d8e69450f6.png
运算符优先级
https://i-blog.csdnimg.cn/direct/2bfd43e9057444efb724089b3d3aadc5.png
美团购物车案例
https://i-blog.csdnimg.cn/direct/7d399f06989e4a7e95043fbb144fa251.png
@Entry
@Component
struct ShoppingCart{
// 原价
@State priced:number=30
// 单价
@State unitPrice:number=20.2
// 数量
@State quantity:number=0
// 总价
@State allPrice:number=0
// 优惠
@State preferential:number=0
build() {
Stack({
alignContent:Alignment.Bottom
})
{
// 商品列表
Column(){
Row({space:5}){
Image($r('app.media.img02')).width(110).borderRadius(10)
Column({space:6}){
Text('冲销量1000ml缤纷八果水果捞').width('100%').font({size:14,weight:600})
Text('含1份折扣商品').width('100%').font({size:12}).fontColor('#8c8c8c')
Blank()
Row(){
Text(`￥${this.unitPrice}`).fontColor('#bd342a')
Text(`￥${this.priced}`).font({size:12}).fontColor('#8c8c8c').decoration({type:TextDecorationType.LineThrough}).margin({left:5})
Blank()
Row(){
Text('-').width(20).height('100%').border({width:1,color:'#979797'}).textAlign(TextAlign.Center).fontWeight(600).borderRadius({topLeft:5,bottomLeft:5})
.onClick(()=>{
if(this.quantity == 0) return
this.quantity --
this.allPrice = this.quantity * this.unitPrice
this.preferential = this.quantity * (this.priced - this.unitPrice)
})
Text(this.quantity.toString()).layoutWeight(1).height('100%').border({width:{top:1,bottom:1},color:'#979797'}).textAlign(TextAlign.Center).fontWeight(600)
Text('+').width(20).height('100%').border({width:1,color:'#979797'}).textAlign(TextAlign.Center).fontWeight(600).borderRadius({topRight:5,bottomRight:5})
.onClick(()=>{
this.quantity ++
this.allPrice = this.quantity * this.unitPrice
this.preferential = this.quantity * (this.priced - this.unitPrice)
})
}.width(75).height(25)
}.width('100%')
}.layoutWeight(1).height('100%')
}.height(83).width('100%')
}.width('100%').height('100%').padding(10)
// 结算
Row({space:10}){
Column(){
Text(){
Span(`已选 ${this.quantity} 件,`).fontColor('#919191')
Span('合计：')
Span(`￥${this.allPrice.toFixed(2)}`).fontColor('#bd342a')
}.fontSize(14)
Text(`共减￥${this.preferential.toFixed(2)}`).fontColor('#bd342a').fontSize(12)
}.layoutWeight(1).alignItems(HorizontalAlign.End)
Text('结算外卖').width(100).height(40).backgroundColor('#ffd441').font({size:17,weight:600}).textAlign(TextAlign.Center).borderRadius(20)
}.width('100%').height(100).backgroundColor(Color.White).padding(20)
}.backgroundColor('#f3f3f3').width('100%').height('100%')
}
}
数组操作
https://i-blog.csdnimg.cn/direct/88489bad2713461eada3f62c1e03682c.pnghttps://i-blog.csdnimg.cn/direct/3bb8a2c0ccc045218fb632f930f03b0f.png
https://i-blog.csdnimg.cn/direct/1c10c2b7c20248c88f3cf7562884c772.png
https://i-blog.csdnimg.cn/direct/8a723adaeae0436584400d0186a31c12.png
语句
https://i-blog.csdnimg.cn/direct/4f708477751b409e8dd1703b1d5f9325.png
if分支语句
https://i-blog.csdnimg.cn/direct/e891956546d840799aff0294bb48040b.pnghttps://i-blog.csdnimg.cn/direct/33d994c40642445f88081d903522431a.png
if多分支
https://i-blog.csdnimg.cn/direct/ec880a8bcecf446fa67601226c0b2f07.png
switch分支
https://i-blog.csdnimg.cn/direct/f559a76b07b1486293df3bdffadfed1e.pnghttps://i-blog.csdnimg.cn/direct/90ba584bf2fa413390e432046e021993.png
三元条件表达式
https://i-blog.csdnimg.cn/direct/966decd4b1a846d7832edd3efb0448b4.png
条件渲染
https://i-blog.csdnimg.cn/direct/668612f21b7540098516fd957057e506.png
条件渲染案例
https://i-blog.csdnimg.cn/direct/332a1babeb3b4a1e8a2b878e3857fb05.pnghttps://i-blog.csdnimg.cn/direct/a068674162ac457ea5804b12c9bad039.png
@Entry
@Component
struct JDAddCart {
// 库存状态
@State inventoryStatus:boolean = true
build() {
Column(){
if(this.inventoryStatus){
Text('还有一件商品')
}else {
Text('没有商品')
}
Row(){
Column(){
Image($r('app.media.love')).width(28)
Text('店铺')
}
Column(){
Image($r('app.media.love')).width(28)
Text('店铺')
}
Column(){
Image($r('app.media.love')).width(28)
Text('店铺')
}
if(this.inventoryStatus){
Text('加入购物车').width(100).height('100%').backgroundColor('#ffc73e').fontColor(Color.White).borderRadius(20).textAlign(TextAlign.Center)
Text('立即购买').width(100).height('100%').backgroundColor('#fa0028').fontColor(Color.White).borderRadius(20).textAlign(TextAlign.Center)
}else {
Text('查看类似商品').width(170).height('100%').backgroundColor('#ffc73e').fontColor(Color.White).borderRadius(20).textAlign(TextAlign.Center)
}
}.width('100%').height(60).justifyContent(FlexAlign.SpaceAround)
Button('切换').onClick(()=>{
this.inventoryStatus = !this.inventoryStatus
})
}
}
} 循环语句
while循环
https://i-blog.csdnimg.cn/direct/9f8f567e104545cf860431e003694aa6.png
for循环
https://i-blog.csdnimg.cn/direct/f0f45676ee634b3084296a8f8f6106b4.png
退出循环
https://i-blog.csdnimg.cn/direct/e42429e891c44a9782465751dbc75b76.png
遍历数组
for()
https://i-blog.csdnimg.cn/direct/ad56e2848e2843ccaeb730025129ce83.png
for...of
https://i-blog.csdnimg.cn/direct/85a6d353f2ff4aeb870f62577382ec56.png
对象数组
https://i-blog.csdnimg.cn/direct/02473c2606a54891b6a2cee5423a70ef.pnghttps://i-blog.csdnimg.cn/direct/2cdaa019ea61435e867554548542c1ee.png
ForEach-渲染控制
https://i-blog.csdnimg.cn/direct/04fb130b5aac48309a2d967d72fb67fb.png
https://i-blog.csdnimg.cn/direct/aae93401843d4fb0a705f998302ae2ff.png
interfaceArticle{
title:string,
createTime:string
}
@Entry
@Component
struct JDAddCart {
@State articles:Article[]=[
{
title:'近200+自动驾驶数据集全面调研!一览如何数据闭环全流程',
createTime:'2024-01-31 09:59:43'
},
{
title:'MySQL Shell 8.0.32 for GreatsQL编译二进制包',
createTime:'2024-01-31 09:55:53'
},
{
title:'在Redis中如何实现分布式事务的一致性?',
createTime:'2024-01-31 09:54:51'
},
]
build() {
Column(){
Column({space:20}){
ForEach(this.articles,(item:Article,index)=>{
Column({space:10}){
Text(item.title).fontSize(16).fontWeight(600).width('100%')
Text(item.createTime).fontSize(12).fontColor('#cdcdcd').width('100%')
}.width('100%').border({width:{bottom:2},color:'#cdcdcd'}).padding(10)
})
}.width('100%')
}
}
} 生肖卡抽奖案例
https://i-blog.csdnimg.cn/direct/a064d013a282410da3439d2c8cf721ad.pnghttps://i-blog.csdnimg.cn/direct/96dde0478f8b40b7891e62888a74bbe0.pnghttps://i-blog.csdnimg.cn/direct/9108a773aec04120b95460f0d6ebd399.png
import { JSON } from '@kit.ArkTS'
interface ZodiacCardItem{
url:string,
activeUrl:string,
count:number
}
// const t:number =Math.floor(Math.random() *6)
// console.log( '随机树：',t)
@Entry
@Component
struct ZodiacDraw {
// 卡片数据
@State zodiacCards:ZodiacCardItem[] = [
{ url:'app.media.dog',activeUrl:'app.media.active_dog',count:1},
{ url:'app.media.hu',activeUrl:'app.media.active_hu',count:1},
{ url:'app.media.long',activeUrl:'app.media.active_long',count:1},
{ url:'app.media.ma',activeUrl:'app.media.active_ma',count:0},
{ url:'app.media.niu',activeUrl:'app.media.active_niu',count:1},
{ url:'app.media.tu',activeUrl:'app.media.active_tu',count:1}
]
// 页面层次
@State takePagezIndex:number = -1
@State takePageOpacity:number = 0
@State phoneStatus:boolean = true
// 抽中下标
@State drawnIndex:number = -1
// 抽中动画
@State drawnScale:number = 0
// 中奖奖池
@State prizePools:string[] = ['phone','huawei','xiaomi']
@State prize:string = ''
build() {
Stack(){
// 抽奖页
Column(){
Grid(){
ForEach(this.zodiacCards,(item:ZodiacCardItem,index)=>{
GridItem(){
Badge({
count:item.count,
position:BadgePosition.RightTop,
style:{
fontSize:14,
badgeSize:20,
badgeColor:'#fa2a2d'
}
})
{
// 如果count不为0，就渲染激活图片
Image($r(`${item.count == 0 ? item.url : item.activeUrl}`))
.width(90).border({width:{left:1,bottom:1},color:'#ffd4d4d4'})
}
}
})
}
.width('100%').height(300)
.margin({top:60,bottom:50})
.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr')
Button('立即抽卡')
.backgroundColor('#ed4481').width(300)
.onClick(()=>{
// 结果页出
this.takePagezIndex = 1
this.takePageOpacity = 1
// 动画
this.drawnScale =1
// 结果卡片 随机
this.drawnIndex = Math.floor(Math.random() *6)
})
}
// 抽奖结果页
Column({space:25}){
Text('获得生肖卡').fontColor('#fff').fontSize(20)
Image($r(`${this.drawnIndex !==-1?this.zodiacCards.activeUrl:null}`))
.width(140).borderRadius(20)
.scale({x:this.drawnScale,y:this.drawnScale}).animation({duration:500})
Button('开心收下')
.width(140).backgroundColor('#00000000').border({width:1,color:'#fff'})
.onClick(()=>{
// 结果页出
this.takePagezIndex = -1
this.takePageOpacity = 0
// 结果卡片
// 处理数组数据,对象数组的情况需要更新，就得修改整个对象
this.zodiacCards = {
url:this.zodiacCards.url,
activeUrl:this.zodiacCards.activeUrl,
count:this.zodiacCards.count + 1
}
// 判断是否集齐卡片
this.phoneStatus = this.zodiacCards.some((item)=>item.count == 0)
// 判断方法2
// let flag:boolean=true
// for (let item of this.zodiacCards){
// if(item.count ==0){
// flag = false
// break
// }
// }
// 如果集齐
if(!this.phoneStatus){
const randomIndex = Math.floor(Math.random() * 3)
this.prize = this.prizePools
}
})
}
.width('100%').height('100%')
.backgroundColor('#bc000000')
.justifyContent(FlexAlign.Center)
.zIndex(this.takePagezIndex)
.opacity(this.takePageOpacity)
.animation({duration:300})
// 手机页
if(!this.phoneStatus){
Column({space:25}){
Text('恭喜获得手机一部').fontColor('#fff').fontSize(20)
Image($r(`app.media.${this.prize}`))
.width(300).borderRadius(20)
.scale({x:this.drawnScale,y:this.drawnScale}).animation({duration:500})
Button('再来一次')
.width(140).backgroundColor('#00000000').border({width:1,color:'#fff'})
.onClick(()=>{
// 将之前卡片所有数量-1
// let arr:ZodiacCardItem[] =[]
// this.zodiacCards.forEach((item:ZodiacCardItem)=>{
// let obj:ZodiacCardItem = {
// url: item.url,
// activeUrl: item.activeUrl,
// count:item.count - 1
// }
// arr.push(obj)
// })
// this.zodiacCards= arr
// 方法2
this.zodiacCards = this.zodiacCards.map((item: ZodiacCardItem) => ({
url: item.url,
activeUrl: item.activeUrl,
count:item.count - 1
}) as ZodiacCardItem)
this.phoneStatus = true
})
}
.width('100%').height('100%')
.backgroundColor('#bc000000')
.justifyContent(FlexAlign.Center)
.animation({duration:300})
}
}
}
} swiper轮播组件
基本用法
需要给swiper设置尺寸，若不设置则是内容自动撑开，也可以给内容每个单独设置。
@Entry
@Component
struct SwiperPage {
build() {
Column(){
Swiper(){
Text('你好').backgroundColor(Color.Blue)
Text('我是').backgroundColor(Color.Gray)
Text('大大').backgroundColor(Color.Green)
}.width('100%').height(150)
Swiper(){
Image($r('app.media.active_niu'))
Image($r('app.media.active_ma'))
Image($r('app.media.active_long'))
Image($r('app.media.active_hu'))
}.width(150).height(200).margin({top:20}).border({width:1})
}
}
} 常见属性
https://i-blog.csdnimg.cn/direct/45060897ca8f4df2bcad7445cb40fe98.png
@Entry
@Component
struct SwiperPage {
build() {
Column(){
Swiper(){
Text('你好').backgroundColor(Color.Blue)
Text('我是').backgroundColor(Color.Gray)
Text('大大').backgroundColor(Color.Green)
}.width('100%').height(150)
.loop(true)
.autoPlay(true)
.interval(2000)
Swiper(){
Image($r('app.media.active_niu'))
Image($r('app.media.active_ma'))
Image($r('app.media.active_long'))
Image($r('app.media.active_hu'))
}.width('100%').height(400).margin({top:20}).border({width:1})
.loop(true)
.autoPlay(true)
.interval(3000)
.vertical(true)
}
}
} 样式自定义
aspectRatio()宽高比属性，设置和图片一致的宽高比，包管图片正常适配
https://i-blog.csdnimg.cn/direct/db668645ba244f0093ae5bbdcae955fd.png
https://i-blog.csdnimg.cn/direct/4920e07a74924bb58c739bfcaee5f70e.png
代码演示
@Entry
@Component
struct SwiperPage {
build() {
Column(){
Swiper(){
Image($r('app.media.active_niu'))
Image($r('app.media.active_ma'))
Image($r('app.media.active_long'))
Image($r('app.media.active_hu'))
}.width('100%').aspectRatio(0.85).margin({top:20}).border({width:1})
.loop(true)
.autoPlay(true)
.interval(4000)
.indicator(
Indicator.dot()
.itemWidth(10)
.selectedItemWidth(30)
.selectedColor(Color.Green)
)
}
}
} 样式&结构的重用
@Extend：扩展组件（样式，事件）【偏重组件】
@Extend(扩展组件) Extend的参数是需要扩展的组件如Text,Column等
实用特定组件 样式、事件
@Extend(Text)
function txtFn (){
.fontSize(20)
.fontWeight(FontWeight.Bolder)
.margin({bottom:20})
}
@Extend(Text)
function swiperTxtFn (bgColor:ResourceColor,msg:string) {
.textAlign(TextAlign.Center)
.fontSize(20)
.fontWeight(FontWeight.Bolder)
.fontColor(Color.White)
.backgroundColor(bgColor)
.onClick(()=>{
AlertDialog.show({
message:msg
})
})
}
@Entry
@Component
struct ExtendPage {
build() {
Column(){
Text('@Extend：扩展组件（样式，事件）').txtFn()
Swiper(){
Text('你好').swiperTxtFn(Color.Gray,'你好轮播')
Text('我是').swiperTxtFn(Color.Green,'我是轮播')
Text('大大').swiperTxtFn(Color.Red,'轮播大大')
}.width('100%').height(150)
.loop(true)
.autoPlay(true)
.interval(2000)
}
}
} @Styles：抽取通用属性，事件【偏重样式】
@Styles不支持传参，最好写组件内
实用公共样式、事件，不可以传参
// 全局定义style
@Styles functioncommonStyles (){
.width(100)
.height(100)
}
@Entry
@Component
struct StylePage {
@State bgColor:ResourceColor = Color.Gray
// 组件内定义style
@Styles setBg (){
.backgroundColor(this.bgColor)
.onClick(()=>{
this.bgColor = Color.Green
})
}
build() {
Column({space:20}){
Text('@Styles').commonStyles().setBg().fontColor(Color.White)
Text().commonStyles().setBg()
Text().commonStyles().borderRadius(50).setBg()
}.width('100%').justifyContent(FlexAlign.Center)
}
} @Builder：自定义构建函数（结构，样式，事件）【偏重结构】
全局定义的函数在使用时不消写this,组件内定义的在使用时要写this
// 全局定义
@Builder
function navItem (icon:ResourceStr,txt:string){
Column({space:10}){
Image(icon).width(70).height(70)
Text(txt)
}.onClick(()=>{
AlertDialog.show({
message:'这里是' + txt
})
})
}
@Entry
@Component
struct BuilderPage {
// 组件内定义
@Builder
navItem (icon:ResourceStr,txt:string){
Column({space:10}){
Image(icon).width(70).height(70)
Text(txt)
}.onClick(()=>{
AlertDialog.show({
message:'这里是' + txt + '@Builder'
})
})
}
build() {
Row({space:20})
{
navItem($r('app.media.yaodiao'),'阿里药店')
navItem($r('app.media.paimai'),'阿里拍卖')
this.navItem($r('app.media.nongchang'),'阿里农场')
this.navItem($r('app.media.yizhan'),'菜鸟驿站')
}.width('100%').justifyContent(FlexAlign.Center)
}
} 滚动容器Scroll
核心用法
https://i-blog.csdnimg.cn/direct/e438bb6e66cb461d9277db0a549f05fa.png
@Entry
@Component
struct ScrollPage {
build() {
Scroll(){
Column({space:10}){
ForEach(Array.from({length:10}),(item:string,index)=>{
Text(`测试文本${index + 1}`)
.width('100%').height(50)
.fontColor(Color.White)
.backgroundColor(Color.Orange)
.textAlign(TextAlign.Center)
})
}.width('100%').padding(10)
}.width('100%').height(400)
}
} 常见属性
https://i-blog.csdnimg.cn/direct/fe8ae8bac11647f9b8167357ca952b8f.png
@Entry
@Component
struct ScrollPage {
build() {
Scroll(){
Column({space:10}){
ForEach(Array.from({length:10}),(item:string,index)=>{
Text(`测试文本${index + 1}`)
.width('100%').height(50)
.fontColor(Color.White)
.backgroundColor(Color.Orange)
.textAlign(TextAlign.Center)
})
}
.width('100%').padding(10)
}
.width('100%').height(400)
.scrollable(ScrollDirection.Vertical) // 滚动方向
.scrollBar(BarState.Auto) // On 一直显示，Off一直隐藏 Auto滑动显示
.scrollBarWidth(5) // 滚动条宽度
.edgeEffect(EdgeEffect.Spring) // 滑动效果
.scrollBarColor(Color.Green)
}
} 控制器
https://i-blog.csdnimg.cn/direct/04aa6e9f6881440b98730ab93786d64b.png
@Entry
@Component
struct ScrollPage {
// 1.创建Scroll 对象（实例化）
myScroll:Scroller = new Scroller()
build() {
Column(){
// 2.绑定给Scroll组件
Scroll(this.myScroll){
Column({space:10}){
ForEach(Array.from({length:10}),(item:string,index)=>{
Text(`测试文本${index + 1}`)
.width('100%').height(50)
.fontColor(Color.White)
.backgroundColor(Color.Orange)
.textAlign(TextAlign.Center)
})
}
.width('100%').padding(10)
}
.width('100%').height(400).margin({bottom:50})
.scrollable(ScrollDirection.Vertical) // 滚动方向
.scrollBar(BarState.Auto) // On 一直显示，Off一直隐藏 Auto滑动显示
.scrollBarWidth(5) // 滚动条宽度
.edgeEffect(EdgeEffect.Spring) // 滑动效果
.scrollBarColor(Color.Green)
Button('回到顶部/底部')
.onClick(()=>{
this.myScroll.scrollEdge(Edge.Bottom)// Edge.Top Edge.Start回到顶部
})
Button('获取滚动位置').margin(20)
.onClick(()=>{
const y = this.myScroll.currentOffset().yOffset
AlertDialog.show({
message:`y:${y}`
})
})
}
}
} 事件
https://i-blog.csdnimg.cn/direct/7ebfe158d1c94e09910cb350fb280ac3.png
返回顶部案例
https://i-blog.csdnimg.cn/direct/1277be73f13747ffa28862853cd4035a.png
@Entry
@Component
struct ScrollPage {
// 1.创建Scroll 对象（实例化）
myScroll:Scroller = new Scroller()
// 距离顶部位置
@State scrollTop:number = 0
build() {
// 淘宝滚动案例
Column(){
Scroll(this.myScroll){
Column(){
Image($r('app.media.t_b'))
}
}.width('100%')
.height('100%')
.onScroll((x,y)=>{
this.scrollTop = this.myScroll.currentOffset().yOffset
// console.log('x,y',x,y,this.scrollTop)
})
if( this.scrollTop >= 200){
Row(){
Image($r("app.media.rocket")) .width(50)
}
.position({bottom:30,right:20})
.backgroundColor(Color.White)
.borderRadius(25)
.onClick(()=>{
this.myScroll.scrollEdge(Edge.Top)
})
}
}
}
} 列表组件list
https://i-blog.csdnimg.cn/direct/89d1ab4d451c495698e11bea725f06d4.png
https://i-blog.csdnimg.cn/direct/29618d8dca8a46a7a92563af254f02d2.png
https://i-blog.csdnimg.cn/direct/92d027f32b214046a39d16d5ad4afc1b.png
字体图标
https://i-blog.csdnimg.cn/direct/f3fe2da818ed40d59aa2e6b23ee89494.png
https://i-blog.csdnimg.cn/direct/a15eb7b9fe2947f5996ddad2229177cc.png
容器组件Tabs
基本用法
https://i-blog.csdnimg.cn/direct/1f4b2a9eb20f42e3a8c7e4f040cf9033.png
@Entry
@Component
struct TabsPage {
build() {
Tabs(){
TabContent(){ // 有且只能有一个子组件
Text('首页内容')
}
.tabBar('首页') // 配置导航也可以不配
TabContent(){ // 有且只能有一个子组件
Text('推荐内容')
}
.tabBar('推荐')
TabContent(){ // 有且只能有一个子组件
Text('我的内容')
}
.tabBar('我的')
}
}
} 常用属性
https://i-blog.csdnimg.cn/direct/4684a9c4530e41d99aa02c6e4e8591c2.png
滚动导航栏
https://i-blog.csdnimg.cn/direct/7891f1fba79c4c98885c6bd6cd3388f9.png
@Entry
@Component
struct TabsPage {
@State titles:string[] = [
'首页','关注','热门','军事','体育',
'八卦','数码','财经','美食','旅行'
]
build() {
Tabs(){
ForEach(this.titles,(item:string,index)=>{
TabContent(){ // 有且只能有一个子组件
Text(`${item}内容`)
}
.tabBar(item) // 配置导航也可以不配
})
}
.barMode(BarMode.Scrollable)
}
} 自定义TaBar
https://i-blog.csdnimg.cn/direct/2254f75800d34693965ec49c9abca2d0.png
切换高亮
https://i-blog.csdnimg.cn/direct/33613f0a62b74b229141a5dc8d62ec18.png
interface Item{
title:string,
icon:ResourceStr
}
@Entry
@Component
struct TabsPage {
@State tabList:Item[] = [
{
title:'首页',
icon:$r('app.media.home')
},
{
title:'推荐',
icon: $r('app.media.tuijian')
},
{
title:'新增',
icon:$r('app.media.add')
},
{
title:'我的',
icon:$r('app.media.my')
},
]
// 选择tab
@State selectTabIndex:number = 0
// 构建tab
@Builder
myTabBuilder(itemIndex:number,icon:ResourceStr,title:string){
Column({space:8}){
Image(icon).width(30).fillColor(`${this.selectTabIndex == itemIndex ? Color.Orange:Color.Black}`)
Text(title).fontColor(`${this.selectTabIndex == itemIndex ? Color.Orange:Color.Black}`)
}
}
build() {
// 切换高亮
Tabs({barPosition:BarPosition.End}){
ForEach(this.tabList,(item:Item,index)=>{
TabContent(){ // 有且只能有一个子组件
Text(`${item.title}内容`)
}
.tabBar(this.myTabBuilder(index,item.icon,item.title)) // 配置导航也可以不配
})
}.onChange((index)=>{
this.selectTabIndex = index
})
}
} 案例：小米有品底部Tabs
https://i-blog.csdnimg.cn/direct/5572b8f017a44e65beb6d00502c4c5d9.png
interface Item{
title:string,
icon:ResourceStr
}
@Entry
@Component
struct TabsPage {
@State tabList:Item[] = [
{
title:'首页',
icon:$r('app.media.home')
},
{
title:'推荐',
icon: $r('app.media.tuijian')
},
{
title:'推买',
icon: $r('app.media.yizhan')
},
{
title:'新增',
icon:$r('app.media.add')
},
{
title:'我的',
icon:$r('app.media.my')
},
]
// 选择tab
@State selectTabIndex:number = 0
// 构建tab
@Builder
myTabBuilder(itemIndex:number,icon:ResourceStr,title:string){
Column({space:8}){
Image(icon).width(28).fillColor(`${this.selectTabIndex == itemIndex ? Color.Orange:Color.Black}`)
Text(title).fontColor(`${this.selectTabIndex == itemIndex ? Color.Orange:Color.Black}`)
}
}
// 构建中间的tab
@Builder
centerTabBuilder(icon:ResourceStr){
Image(icon).width(50)
}
build() {
// 切换高亮
Tabs({barPosition:BarPosition.End}){
ForEach(this.tabList,(item:Item,index)=>{
if(index == 2){
TabContent(){ // 有且只能有一个子组件
Text(`${item.title}内容`)
}
.tabBar(this.centerTabBuilder(item.icon))
}else {
TabContent(){ // 有且只能有一个子组件
Text(`${item.title}内容`)
}
.tabBar(this.myTabBuilder(index,item.icon,item.title)) // 配置导航也可以不配
}
})
}.onChange((index)=>{
this.selectTabIndex = index
})
}
} Class类
Class类 实例属性
https://i-blog.csdnimg.cn/direct/bd2e0394df4a4de0a6e88df182dff093.png
// 实例对象
class Cat{
name:string = '小十'
food?:string
}
let catObj = new Cat()
catObj.food = '鸡肉猫条'
console.log('名字：',catObj.name)
console.log('食物：',catObj.food)
@Entry
@Component
struct classPage {
build(){}
}
Class类 构造函数
差别的实例，未来需要有差别的字段初始值，就需要通过构造函数实现
https://i-blog.csdnimg.cn/direct/699a26febe8a4e7a89ca223484099044.png
// ---------------------构造函数---------------------
interfaceCatObj{
food:string
age:number
}
class Cat{
name:string = '小十'
food?:string
age?:number
constructor(paramsObj:CatObj) {
// this.name = name
this.food = paramsObj.food
this.age = paramsObj.age
}
}
let catDay1 = new Cat({food:'鸡肉猫条',age:90})
console.log(`第 ${catDay1.age} 天吃:${catDay1.food}`)
let catDay2 = new Cat({food:'金枪
页:
[1]