文章目录
- 前言
- 常用组件
- 快速开启简单的鸿蒙页面
- 总结
一、前言
鸿蒙要想快速上手，那么就需要对基础的组件使用比较熟悉，这里就罗列开发中常见的基础组件的使用。
只要是写android的，对于这些组件的使用还是能很快上手的，只要多多练习。
最后呢，这里会通过基础组件的使用，将他们放到页面中，这样有更直观的体验。
二、常用的基础组件
1、Image
cpp
//图片组件
Image($r('app.media.icon'))
// Image($rawfile('test.png')) //如果是rawFile 要加后缀名
.width(50)
.height(50)
.borderRadius(10)
.interpolation(ImageInterpolation.High) //图片的插值效果（去掉锯齿是图片清晰）
.margin({bottom: 10})
.onComplete(img =>{
console.log("图片的宽度：" + img.width)
})
.onError(()=>{
//图片加载报错，走这里
})2、Text
cpp
//文本组件
Text($r('app.string.register'))
.fontSize(20) //字体大小
.lineHeight(30) //行高
.fontColor('#00f') //字体颜色
.fontWeight(FontWeight.Medium)//字体粗细
.margin({bottom: 10})
.onClick(()=>{
console.log('点击事件')
})3、TextInput
cpp
//文本输入框
TextInput({placeholder:'请输入用户名'}) //这里头是提示文本
.width('80%')
.height(40)
.backgroundColor('#cdcdcd')
.margin({left: 10})
//密码输入框
TextInput({placeholder: '请输入密码'})
.width('80%')
.height(40)
.backgroundColor('#cdcdcd')
.type(InputType.Password) //输入文本类型
.showPasswordIcon(true) //是否显示密码icon
.margin({bottom: 10})
.onChange(val=>{
console.log('输入的值为：' + val)
})
.margin({left: 10})4、Slider
cpp
//滑动进度条
Slider({
value: this.high,
min: 150,
max: 190,
step:1, //这里代表步长
style: SliderStyle.InSet, //滑动头的是在里面，还是在里面
direction: Axis.Horizontal, //滑动条的方向。默认是横向
reverse: false //进度往哪个方向，是否是反向。默认是往右
}).width('70%')
.trackThickness(20) //滑轨的粗细
.showTips(true) //是否显示进度条百分比
.onChange(val =>{ //获取进度的值
this.high = val
console.log('进度长度：' + val)
})
Text(this.high.toString()).fontSize(20).fontWeight(FontWeight.Medium)5、Select
cpp
//下拉框组件
Select([
{ value: '深圳'},
{ value: '广州'},
{ value: '北京'},
{ value: '上海'}
]).selected(1) //默认选择的城市
.value('请选择城市') //提示文本
.font({size:20, weight: FontWeight.Medium})
.onSelect((index,value) =>{
console.log('选择的城市：' + value)
})6、Checkbox
cpp
Row(){
Text('兴趣：').fontSize(20)
//多选框群组
CheckboxGroup({group: 'checkGroup'})//控制是否全选或者全不选
.selectedColor('#f00')
.selectAll(true) //默认是否全部选中，如果Checkbox 中的select 有值，那么子组件优先级高，这边就不生效
.onChange((itemName: CheckboxGroupResult) =>{ //被选中的组件名及状态。全部选中的状态是0，全不选是2，有选中是1
console.log('选中的框是：'+ itemName.name + ' 状态是：'+ itemName.status.toString())
})
Text('全选').fontSize(20)
Checkbox({name: 'checkbox1', group: 'checkGroup'})
.selectedColor('#f00')//选中的颜色
.select(false) //这个优先级高于多选框群组的selectAll
.onChange((value: Boolean) =>{
console.log('checkbox1 是否选中：' + value)
})
Text('看书').fontSize(20)
Checkbox({name: 'checkbox2', group: 'checkGroup'})
.selectedColor('#f00')//选中的颜色
.select(false)
.onChange((value: Boolean) =>{
console.log('checkbox2 是否选中：' + value)
})
Text('跑步').fontSize(20)
Checkbox({name: 'checkbox3', group: 'checkGroup'})
.selectedColor('#f00')//选中的颜色
.select(false)
.onChange((value: Boolean) =>{
console.log('checkbox3 是否选中：' + value)
})
Text('钓鱼').fontSize(20)
}.width('100%')
.margin({bottom:10})7、Radio
cpp
Row(){
Text('性别：').fontSize(20)
//单选框组件 （记得写多组，不然点击看不出效果）
Radio({value: '男', group: 'sex'})
.height(20)
.width(20)
.checked(true)
.onChange((isChecked: Boolean)=>{
if (isChecked) {
console.log('男生 是否选中：' + isChecked)
}
})
Text('男').fontSize(20)
Radio({value: '女', group: 'sex'})
.height(20)
.width(20)
.checked(true)
.onChange((isChecked: Boolean)=>{
if (isChecked) {
console.log('女生 是否选中：' + isChecked)
}
})
Text('女').fontSize(20)
}.width('100%')三、布局
1、Column
cpp
//垂直方向布局容器
Column({space:20}){ //组件间的间距
Text('组件一').fontSize(20).fontColor('#00f').lineHeight(FontWeight.Medium)
Text('组件二').fontSize(20).fontColor('#00f').lineHeight(FontWeight.Medium)
}.backgroundColor('#f00')
.width('100%')
.height(100)
.justifyContent(FlexAlign.Center)//这里是column里面组件 主轴的布局方式。有居中，有放在开始，有放在结束等。
.alignItems(HorizontalAlign.Start) //这里是column里面组件 交叉轴的布局方式。2、Row
cpp
//水平方向布局容器
Row(){
Text('组件一').fontSize(20).fontColor('#00f').lineHeight(FontWeight.Medium)
Text('组件二').fontSize(20).fontColor('#00f').lineHeight(FontWeight.Medium)
}.backgroundColor('#0f0')
.width('100%')
.height(50)
.justifyContent(FlexAlign.Center)//主轴的布局方式，这是是居中
.alignItems(VerticalAlign.Top) //交叉轴的布局方式，这里是放在顶部
Text('组件三').fontSize(20).fontColor('#00f').lineHeight(FontWeight.Medium)
.margin(20)3、Stack
cpp
//堆叠布局，后面的组件会覆盖在前面的组件上面
Stack(){
Image($r('app.media.icon'))
.width(50)
.height(50)
Text('hello world')//这个控件覆盖在image上面
}
.width('90%')
.border({radius: 20})
.backgroundColor('#f00')四、快速开启简单的鸿蒙页面
这是根据上面提到的组件和布局整理出来的，一个页面。下面是效果图。
最后呢，将我整理的这些组件都放到这个项目中，后面有新增，也会一并上传。开发中，某些api忘记了，可以重新拿出来看看。
以上代码地址：https://github.com/shenshizhong/ViewUseDemo
总结
1、罗列鸿蒙基础组件的使用
2、几个重要的布局组件的使用
3、快速撸一个简单的鸿蒙页面
如果对你有一点点帮助，那是值得高兴的事情。：)