鸿蒙学习笔记
第十四节 常用组件学习
Text组件
原来不只是Image可以读本地文件,同样,text也可以
Text(context?:string|Resource)
Text('app.string.width_label')
string对应main/resources/en_US(zh_CN)(base)/element.string.json
label 对应文件里面的内容
lineHight(xx)行高,
fontWeight(xx)字体粗细
decoration({type:TextDecorationType.LineThrough})//装饰
-------------------------------------
TextInput({placeholder?:ResourceStr,text?:ResourceStr})
placeholder:输入框中的提示
text:输入框中的内容
type(InputType.Password)//输入框类型
onChange()//文本内容改变调用传入的方法
类型有
Normal:普通型
Password:密码型
Email:邮箱型
Number:纯数字型
PehoneNumber:电话号码型
-------------------------------------------------------------
Button
Button(label?:ResourceStr)
1.文字型按钮
Button("点我")
2.自定义按钮,在Button内嵌套其他组件
Button(){
Image($r('app.media.search')).width(20).margin(10)
}
type(ButtonType.Normal)
Normal 普通型
Capsule 胶囊型
Circle 圆形
---------------------------------------------------------
Slider(options?SliderOptions)
Slider({
min:0, 最小值
max:100, 最大值
value:30, 当前值
step:10, 滑动步长
style:SliderStyle.OutSet,//InSet
direction:Axis.Horizontal,//Vertical
reserve:false
})
showTips(true) //显示当前百分比
.blockColor()//滑块颜色
.onchange(value=>{ //value就是当前滑块值
})
全代码
@Entry
@Component
struct Index1 {
@State message: string = 'Hello World'
@State imageWidth:number = 30
build() {
Row() {
Column() {
Image($r("app.media.app_icon"))
.width(this.imageWidth)
.interpolation(ImageInterpolation.High)
Text($r('app.string.width_label'))
.fontSize(20)
.fontWeight(FontWeight.Bold)
TextInput({text:""+this.imageWidth})
.width(250)
.backgroundColor("#36D")
.type(InputType.Number)
.onChange(value=>{
console.log(value)
this.imageWidth = parseInt(value)
})
Button("缩小")
.width(100)
.fontSize("30")
.type(ButtonType.Normal)
.margin({top:30,bottom:30})
.onClick(()=>{
if(this.imageWidth>10) this.imageWidth -= 10
})
Button("放大")
.width(100)
.fontSize("30")
.type(ButtonType.Normal)
.onClick(()=>{
if(this.imageWidth<300) this.imageWidth += 10
})
Slider({
min:0,
max:100,
value:30,
step:10,
style:SliderStyle.InSet,
direction:Axis.Horizontal
}).width('90%')
.trackThickness(10)
.blockColor('#36D')
.showTips(true)
.onChange(value =>{
this.imageWidth = 250*value/100
})
}
.width('100%')
}
.height('100%')
}
}