快速开发一个鸿蒙的页面

���章目录

• 前言
• 常用组件
• 快速开启简单的鸿蒙页面
• 总结

  一、前言

  鸿蒙要想快速上手，那么就需要对基础的组件使用比较熟悉，这里就罗列开发中常见的基础组件的使用。

  只要是写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忘记了，可以重新拿出来看看。

  总结

  1、罗列鸿蒙基础组件的使用

  2、几个重要的布局组件的使用

  3、快速撸一个简单的鸿蒙页面

  如果对你有一点点帮助，那是值得高兴的事情。：)

  我的csdn：http://blog.csdn.net/shenshizhong

  我的简书：http://www.jianshu.com/u/345daf0211ad