鸿蒙学习-服务卡片基础

用过华为手机的都知道,鸿蒙系统里面有一个很好用的功能,那就是服务卡片。

所以我们学习鸿蒙必然要学习服务卡片的编写,下面我们一起看下。

效果图:

创建卡片

在entry目录右击,选择new->Service Widget

出现如图页面:

有三种模板可供选择,默认选择第一款点击Next:

在这一步我们填写自己服务卡片的name、详情选择语言与卡片尺寸,卡片尺寸默认是2*2,可以选择加上其他尺寸,然后填写对应ability的名字,点击finish就完成了服务卡片的创建。

配置文件

通过上面的步骤后我们观察一下文件目录:

我们可以看到多了红框内的三个部分,第一个是卡片的页面布局页面,第二个是卡片的生命周期管理,第三个就是配置文件。除了途中的三个部分,在module.json5内部也有部分变化:

其中 ohos.extension.form是固定字符串。

我们先来看下配置文件:

其中大部分相信大家看名称就能明白是什么,我们重点看下以下几个参数:

  • updateEnabled:是否支持周期性刷新
  • scheduledUpdateTime:卡片的定点刷新时间,采用24小时制精确到分钟
  • updateDuration:卡片定时刷新的更新周期,单位是30分钟,取值为自然数

两种刷新方式任选其一,当两个同事配置时,定时刷新优先生效。

  • defaultDimension:默认卡片尺寸
  • supportDimensions:卡片尺寸种类

生命周期

下面我们看下卡片的生命周期,打开 EntryFormAbility页面:

如图中我已经将各个方法的作用注释出来,可以直接看图。需要注意的是onConfigurationUpdate方法默认的文件中并没有,如果我们要使用的话需要自己写出来。

卡片页面

最后我们来看下卡片页面:

注意这里的名称和你创建时的命名有关。

以上就是创建后会生成的相关内容,我们修改下卡片页面:

kotlin 复制代码
build() {
  Row() {
    Column() {
      Text($r('app.string.name_color6'))
        .fontSize($r('app.float.font_size'))
        .fontColor(Color.White)

      Text($r('app.string.code_color6'))
        .fontSize($r('app.float.font_size'))
        .fontColor(Color.White)
    }
    .width(this.FULL_WIDTH_PERCENT)
  }
  .backgroundColor($r('app.color.color6'))
  .height(this.FULL_HEIGHT_PERCENT)
  .onClick(() => {
    postCardAction(this, {
      "action": this.ACTION_TYPE,
      "abilityName": this.ABILITY_NAME,
      "params": {
        "message": this.MESSAGE
      }
    });
  })
}

这里我给卡片添加了一个背景颜色,然后添加了两个Text。

跑起来后就是文章开始时的卡片样式,我这里就不再放图了。

还记得我在创建时给卡片选择了三个样式:12,22,2*4

下面我们看下跑起来以后的效果,当我们跑起来以后长按应用图标,然后点击服务卡片就会进入如下页面:

我们会发现这个页面一共有三个样式的卡片供我们选择,当然我们选择几个这里就是几个样式,如果我们只选择2 * 2的那么这里就会只有一个2 * 2样式的卡片供我们选择。

以上就是鸿蒙里服务卡片相关的基础内容,希望对大家有所帮助。

当然只是这样还远远到不了我们的开发要求,比如我们希望点击卡片跳转相关页面,数据交互等等如何实现呢,下一篇我们将进一步了解卡片的事件以及数据交互。

如果文中有错误之处,欢迎评论指出,我们共同进步!

相关推荐
安卓开发者15 小时前
鸿蒙NEXT应用接入快捷栏:一键直达,提升用户体验
java·harmonyos·ux
HMS Core15 小时前
消息推送策略:如何在营销与用户体验间找到最佳平衡点
华为·harmonyos·ux
Brianna Home15 小时前
【案例实战】鸿蒙分布式调度:跨设备协同实战
华为·wpf·harmonyos
Bert丶seven15 小时前
鸿蒙Harmony实战开发教学(No.4)-RichText组件基础到高阶介绍篇
华为·harmonyos·arkts·鸿蒙·鸿蒙系统·arkui·开发教程
鸿蒙小白龙16 小时前
openharmony之分布式蓝牙实现多功能场景设备协同实战
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
爱吃水蜜桃的奥特曼17 小时前
玩Android Harmony next版,通过项目了解harmony项目快速搭建开发
android·harmonyos
鸿蒙小白龙18 小时前
openharmony之分布式购物车开发实战
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
鸿蒙小白龙18 小时前
openharmony之分布式相机开发:预览\拍照\编辑\同步\删除\分享教程
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
安卓开发者21 小时前
鸿蒙NEXT鼠标光标开发完全指南
华为·计算机外设·harmonyos
●VON1 天前
重生之我在大学自学鸿蒙开发第九天-《分布式流转》
学习·华为·云原生·harmonyos·鸿蒙