当前位置：首页 > news >正文

Harmony学习（三）

news 来源：原创 2024/9/19 6:16:43

1.模版字符串``

let name:string = '模版字符串'
let age:number = 18
console.log('字符串:',`${name}和${age}`)

2.字符串和数字互相转换

//字符串转数字
let str1:string = '1.1'
console.log('转换',Number(str1))   //output:  1.1
console.log('转换',parseInt(str1)) //output:  1
console.log('转换',parseFloat(str1)) //output: 1.1//数字转字符串
let num1:number = 1
console.log('转换',num1.toString())   //output:  1
console.log('转换',num1.toFixed(2)) //output:  1.00

3.变量

普通变量（不管组件内还是外）：只能在初始化时渲染，后续不在刷新
状态变量：需要装饰器@State修饰，改变会引起UI的渲染刷新

4.数组操作

增加：unshift（）从开头添加 push()从结尾添加
删除：shift()从开头删 pop()从结尾删（都会返回删除的项）
任意位置删除或新增：splice（操作的起始位置，删除个数，新增的项1，新增的项2，...）
打印对象数组：JSON.stringify(stuArr)
ForEach渲染控制：ForEach（this.titles,(item:string,index) = > {
}）

5.Grid() 规则的行列布局

Grid(){ForEach([1,2,3,4,5,6,7,8,9,10,11,12],()=>{GridItem(){Column(){}.width('100%').height('100%').backgroundColor(Color.Green).border({width: 1,color: '#666',style: BorderStyle.Solid})}})}.backgroundColor(Color.Pink).width('100%').height(500).columnsTemplate('1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr').columnsGap(5).rowsGap(5)

6.badge() 角标

Badge({count:1,position:BadgePosition.RightTop,style:{fontSize:14,badgeSize:20,badgeColor:'#fa2a2d'}}){Column(){}.width('100%').height(200).backgroundColor(Color.Green).border({width: 1,color: '#666',style: BorderStyle.Solid})}

7.遮罩显隐控制：

透明度：opacity：0=>1
层级:zIndex:-1=>99

8.图片动画

缩放scale： 0=>1
.animation({duration:500})

9.Swiper() 轮播

Swiper(){Image($r('app.media.ic_gallery_create')).width(200).fillColor(Color.Blue)Image($r('app.media.ic_gallery_create')).width(200).fillColor(Color.Blue)Image($r('app.media.ic_gallery_create')).width(200).fillColor(Color.Blue)}.width('100%').height(100).loop(true).autoPlay(true).interval(4000).vertical(false).indicator(Indicator.dot().itemWidth(20).itemHeight(20).color(Color.Black).selectedColor(Color.Red).selectedItemWidth(50).selectedItemHeight(20))

10.@Extend 扩展组件(样式和事件)

@Extend(组件名)

function 函数名(参数1，参数2) {}

11.@Styles 抽取通用属性、事件

全局：@Styles function setbg() {} (不支持传参)

组件内: @Styles setbg() {}(不支持传参)

12.@Bulider 自定义构建函数（结构，样式，事件）

@Builder
function navItem(icon: ResourceStr,txt: string) {}

13.Scroll

@Entry
@Component
struct Index {@State message: string = 'Hello World  哈哈哈hahahahah';myScroll:Scroller = new Scroller()build() {Column() {Scroll(this.myScroll){//只支持一个组件Column() {ForEach([1,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3], (item: number, index: number) => {Text('kkkkkkk').width('100%').height(40).fontSize(20).fontWeight(FontWeight.Bold).fontColor('#666').backgroundColor(Color.Pink).margin(5)})}}.width('100%').height(500).scrollable(ScrollDirection.Vertical).scrollBar(BarState.Auto).scrollBarColor(Color.Red).scrollBarWidth(5).edgeEffect(EdgeEffect.Spring).backgroundColor(Color.Yellow).onDidScroll(()=> {const y = this.myScroll.currentOffset().yOffsetconsole.log('滑动距离:', `y:${y}`);})Button('控制滚动条位置').width(200).height(40).margin(20).onClick(() => {this.myScroll.scrollEdge(Edge.Top)})}}
}

14.Tabs 容器组件

@Entry
@Component
struct Index {@State message: string = 'Hello World  哈哈哈hahahahah';@State selectedIndex:number = 0@BuildernavItem(index:number, icon: ResourceStr, selectedIcon:ResourceStr, txt: string) {Column() {Image(index==this.selectedIndex?selectedIcon:icon).width(30)Text(txt).fontSize(20).fontWeight(FontWeight.Bold).fontColor(index==this.selectedIndex?Color.Red:Color.Black)}}build() {Tabs({barPosition:BarPosition.End}){TabContent(){Text('首页')}.tabBar(this.navItem(0,$r('app.media.app_icon'),$r('app.media.app_icon'),'首页'))TabContent(){Text('我的')}.tabBar(this.navItem(1,$r('app.media.startIcon'),$r('app.media.app_icon'),'我的'))}.vertical(false).scrollable(true).animationDuration(0)// .barMode(BarMode.Scrollable)  //滚动.onChange((index:number) => {this.selectedIndex = index})}
}