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

harmony UI组件学习（1）

news 2025/7/2 5:50:56

Image 图片组件

string格式，通常用来加载网络图片，需要申请网络访问权限:ohos.permission.INTERNET
Image('https://xxx.png')

PixelMap格式，可以加载像素图，常用在图片编辑中
Image(pixelMapobject)

Resource格式，加载本地图片，推荐使用
Image($r('app.media.mate60'))
Image($rawfile('mate60.png'))

Image($r('app.media.icon'))
.width(250) //宽度
.interpolation(ImageInterpolation.High)//设置高清

Text文本组件

Text($r('app.string.module_desc'))//名称资源引用
.baselineOffset(0) //基线的偏移量
.fontSize(30) //字体大小
.border({ width: 1 })//边框
.padding(10) //内边距
.width(300) //宽度
.lineHeight(32)//行高
.fontcolor('*#ff1876f8')// 字体颜色
.fontWeight(FontWeight.Medium)//字体粗细

TextInput 输入框组件

1，声明TextInput组件:
TextInput( fplaceholder?:ResourceStr,text?: ResourceStr})

① placeHoder:输入框无输入时的提示文本TextInput({placeholder:i请输入账号或手机号小)

② text:输入框当前的文本内容TextInput({text:itcast'})

2.添加属性和事件
TextInput({text:'当前输入文本'}).width(150)//宽
height(30)//高
backgroundcolor('#FFF')// 背最色
type(InputType.Password)/输入框类型

TextInput({text:'当前输入文本'})
.width(150)//宽.height(30)// 高
.backgroundColor('#FFF')//背最色
.type(InputType.Password)//输入框类型
.onChange(value =>{value是用户输入的文本内容
})

Button 按钮组件

文字型按钮
Button('点我'）
自定义按钮，在Button内嵌套其它组件

Button(){

Image($r('app.media.search')).width(20).margin(10)

}

Button('点我')
.width(10)
.height(30)
.type(ButtonType.Normal)//按钮类型
.onclick(()=>{
处理点击事件
})

Slider 滑动条组件

Slider({min:0，// 最小值
max:100，//最大值
value:40，//当前值
step:10，//滑动步长
style:sliderstyle.0utSet,// InSetdirection: 
Axis.Horizontal,//Verticalreverse:falsel/是否反向滑动
})
.width('90%')
.showTips(true)//是否展示value百分比提示
.blockcolor('#36d')
.trackThickness(7)//滑动圆的大小
.showTips(true)//汽包
.onchange(value => {/ value就是当前滑块值
})

线性布局 (Row/Column)

这个和android的线性布局效果一样，更相前端的24珊格