快速开发一个鸿蒙的页面

文章目录

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

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

只要是写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、快速撸一个简单的鸿蒙页面

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

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

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

相关推荐
问道飞鱼21 分钟前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
周胡杰1 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦3 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳12 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼15 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳16 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
DC_BLOG17 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
博睿谷IT99_1 天前
入门华为人工智能,HCIA/HCIP/HCIE该怎么选?
人工智能·华为·华为认证
江湖有缘1 天前
基于华为欧拉系统安装FileGator文件管理器
华为