回复
手把手教你实用的鸿蒙小技巧 原创
wuyanghcoa
发布于 2024-11-28 22:26
浏览
0收藏
最近翻看到了自己的刚开始学习鸿蒙的一些笔记，看到了很多个常用但很容易搞错的知识点，现在分享给大家。
一、实现文本溢出省略号
属性：
. textOverflow({
overflow : TextOverflow. Elipsis
})
. maxLines(数字) //控制最大行
.lineHeight(数字)//想要设置纵向的文字间距，直接设置行高
代码示例：
build() {
Column() {
Text('HarmonyOS开发初体验')
.width('100%')
.fontSize(30)
.fontWeight(FontWeight.Bold)
Text('一套代码工程，一次开发上架，多端按需部署，' +
'支撑开发者快速高效的开发支持多种终端设备形态的应用，' +
'实现对不同设备兼容的同时，提供跨设备的流转、迁移和协同的分布式体验。')
.lineHeight(24)
.textOverflow({
overflow:TextOverflow.Ellipsis
})
//必须配合maxlines
.maxLines(3)
}
}
二、Text的小图标应使用ImageSpan()组件，而不是Image
Text(){
ImageSpan($r('app.media.文件名'))
.width(16)
.margin({right:3})
Span('HarmonyOS')
.fontSize(12)
.fontColor('#7e7e7e')
}
三、Text、Span每个字符之间的距离用letterSpacing
Text(){
}.letterSpacing(10)
四、你有没有遇到过.justifyContent(枚举FlexAlign)“失效”过的情况
属性：.
justifyContent(枚举FlexAlign)
Column() {} //垂直方向对齐
Row( ) { } //水平方向对齐
居顶显示：
主轴起始位置对齐
.justifyContent(FlexAlign.Start)
居中显示：
主轴居中对齐
.justifyContent(FlexAlign.Center)
居底显示：主轴结束位置对齐
.justifyContent(FlexAlign.End)
贴边显示，中间元素均匀分布间隙
.justifyContent(FlexAlign.SpaceBetween)
间隙环绕，0.5,1,0.5，靠边只有一半的间隙
.justifyContent(FlexAlign.SpaceAround)
居底显示，间隙均匀环绕，靠边也是完整的一份间隙
.justifyContent(FlexAlign.SpaceEvenly)
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
请搭配width宽度使用！大概率是你没有将width与其合理搭配！
五、字符串拼接
有两种拼接方式，一个“+”拼接，一个${内容}拼接。
1.“+”两边只要有字符串，就是拼串的作用（如果两边都是数字，就是求和的作用）
2.${}适用于拼接字符和变量，更适用于多个变量的字符串拼接
例子：
let name :string = '小明'
let age :number=18
console.log('简介信息'，`姓名是${name}，今年${age}岁了`)
这种拼接非常重要，在实际应用中也非常常用。
六、类型转换
1.字符串转数字
Number() :字符串直接转数字，转换失败返回NaN（字符串中包含非数字）
parseInt():去掉小数部分转数字，转换失败返回NaN（开头不能是字母）
parseFloat( ): 保留小数部分转数字，转换失败返回NaN（开头不能是字母）
2.数字转字符串
toString():数字直接转字符串
toFixed():四舍五入转字符串，可设置保留几位小数
let money :number =10000
Text(money.toString())//需要的是字符串类型
1.数据.toString( ) //原样转字符串
2.数据.toFixed( 保留几位小数) //四舍五入，不写代表取整（四舍五入）
七、剩余参数和展开运算符
1.剩余参数
剩余参数的语法，可以将函数或方法中的一个不定数量的参数表示为一个数组
function 函数名（参数1，参数2,..........剩余参数数组）
{
//逻辑代码
//之前的参数：挨个获取即可
//剩余参数：以数组的形式获取
}
//...数组名
//求和，数组里起码有两项才能求和
function sum(numA:number,numB:number,...theArgs:number[]){
//遍历剩余参数，如果有剩余参数，就继续累加
let total:number =numA+numB;
//
for(let item of theArgs){
total+=item;
}
return total
}
console.log(sum(1,2,3).toString())
console.log(sum(1,2,3,4,5,6).toString())
2.展开运算符
出于程序稳定性，以及运行性能考虑，在ArkTs中，
...(展开运算符)只能用在数组上
const/let numArr1:number[ ]=[1,2,3,4]
const/let numArr2:number[ ]=[5,6,7]
//合并到一起
const/let totalArr : number =[...numArr1,...number2]
八、应用实践-美团购物车
需求分析：
1.商品区域：数字框+-
2.底部结算：联动计算并渲染展
·已选件数
·总价格
·优惠价格
核心思路：
1.提取状态：数量、原价、现价
2.界面绑定
3.点击修改数据，自动更新
代码：
@Entry
@Component
struct Index {
@State count: number =1
@State oldPrice:number=40.4
@State newPrice:number=20.2
//状态变量:需要装饰器装饰，改变会引起UI的渲染刷新（必须设置类型和初始值）
//定义在组件内的普通变量或者状态变量，都需要通过this访问
build() {
Column(){
Stack({ alignContent:Alignment.Bottom }){
Stack({alignContent:Alignment.Top}){
Scroll(){
Row(){
Image($r('app.media.startIcon'))
.width(100)
.height(80)
.padding({right:10})
Column({space:15}){
Text('冲销量1000ml缤纷八果水果捞')
.fontWeight(700)
.fontSize(14)
Text(`含${this.count}份折扣商品`)
.fontSize(12)
.fontColor('#9b9b9b')
Row(){
Text() {
Span('￥')
.fontColor('#ff0000')
Span(this.newPrice.toFixed(2))
.fontColor('#ff0000')
}
.padding({right:5})
Text(){
Span('￥')
Span(this.oldPrice.toFixed(2))
}.fontColor('#a4a4a4')
.fontSize(12)
.decoration({
type: TextDecorationType.LineThrough,
color: '#a4a4a4'
})
.padding({right:30})
Text('-')
.width(22)
.height(22)
.border({width:1,color:'#e1e1e1',radius:5})
.textAlign(TextAlign.Center)
.fontWeight(700)
.onClick(()=>{
if(this.count!=0){
this.count--;
}
})
Text(this.count.toString())
.height(22)
.border({width:{top:1,bottom:1},color:'#e1e1e1'})
.padding({left:10,right:10})
.fontSize(14)
Text('+')
.width(22)
.height(22)
.border({width:1,color:'#e1e1e1',radius:5})
.textAlign(TextAlign.Center)
.fontWeight(700)
.onClick(()=>{
this.count++;
})
}
}.alignItems(HorizontalAlign.Start)
}.alignItems(VerticalAlign.Top)
}
}
.padding({top:20})
.width('100%')
.height('100%')
Column(){
//底部
Row({space :15}){
Column(){
Text()
{
Span(`已选${this.count}件,`)
.fontColor('#9c9c9c')
.fontSize(12)
Span('合计:')
.fontSize(14)
Span('￥')
Span((this.count*this.newPrice).toFixed(2))
.fontColor('#ff0000')
.fontSize(14)
}
Text(`共减￥`+(this.count*(this.oldPrice-this.newPrice)).toFixed(2))
.fontColor('#ff0000')
.fontSize(11)
}
.alignItems( HorizontalAlign.End)
Button('结算外卖')
.backgroundColor('#fed340')
.fontColor('#482d01')
}
.alignItems(VerticalAlign.Top)
.padding({top:20,left:70})
}
.width('100%')
.backgroundColor('#ffffff')
.height(80)
}
.backgroundColor('#f3f3f3')
.height('100%')
.width('100%')
}
}
}
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
赞
收藏
回复
相关推荐
