文章目录
- 前言
- 常用组件
- 快速开启简单的鸿蒙页面
- 总结
一、前言
鸿蒙要想快速上手，那么就需要对基础的组件使用比较熟悉，这里就罗列开发中常见的基础组件的使用。
只要是写android的，对于这些组件的使用还是能很快上手的，只要多多练习。
最后呢，这里会通过基础组件的使用，将他们放到页面中，这样有更直观的体验。
二、常用的基础组件
1、Image
//图片组件 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
//文本组件 Text($r('app.string.register')) .fontSize(20) //字体大小 .lineHeight(30) //行高 .fontColor('#00f') //字体颜色 .fontWeight(FontWeight.Medium)//字体粗细 .margin({bottom: 10}) .onClick(()=>{ console.log('点击事件') })3、TextInput
//文本输入框 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
//滑动进度条 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
//下拉框组件 Select([ { value: '深圳'}, { value: '广州'}, { value: '北京'}, { value: '上海'} ]).selected(1) //默认选择的城市 .value('请选择城市') //提示文本 .font({size:20, weight: FontWeight.Medium}) .onSelect((index,value) =>{ console.log('选择的城市：' + value) })6、Checkbox
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
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
//垂直方向布局容器 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
//水平方向布局容器 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
//堆叠布局，后面的组件会覆盖在前面的组件上面 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、快速撸一个简单的鸿蒙页面
如果对你有一点点帮助，那是值得高兴的事情。：)
我的csdn：http://blog.csdn.net/shenshizhong
我的简书：http://www.jianshu.com/u/345daf0211ad
