鸿蒙开发者社区

[toc](目录)主题本帖使用Dayu200为开发板，展示一个在线生鲜配送的App首页。注意：本文不涉及App上的用户互动，仅为页面设计效果的实现。设计效果图首页上半部分：首页下半部分：Dayu200的预览配置为了大幅提高UI的开发效率，降低Dayu200的使用门槛，在开发过程中，强烈建议使用DevEcoStudio3.0Beta3（OpenHarmony）的MatePadPro作为预览配置，并调整到横屏模式，最终与Dayu200上的效果近似一致。资源导入本案例为了简单起见，...

[toc](目录)主题本帖使用Dayu200为开发板，展示一个在线旅游App世界巡游团。注意：本文不涉及App上的用户互动，仅为页面设计效果的实现。设计效果图Dayu200的预览配置为了大幅提高UI的开发效率，降低Dayu200的使用门槛，在开发过程中，强烈建议使用DevEcoStudio3.0Beta3（OpenHarmony）的MatePadPro作为预览配置，并调整到竖屏模式，最终与Dayu200上的效果近似一致。资源导入本案例为了简单起见，文字与颜色直接写在代码中，仅...

本帖使用Dayu200为开发板，展示一个化妆品在线商店的App首页：溢彩美妆App。注意：本文不涉及App上的用户互动，仅为页面设计效果的实现。[toc](目录)设计预览下图是在设计软件中的效果预览：可以看到设计感潮流感十足，简洁大方，页面上有大量的留白区域和明暗背景交错，并有正常模式和方便夜间查看的暗黑模式。Dayu200暂时不能屏幕截图，手机拍照精度太低；也为了预览方便起见，Dayu200的预览配置为了大幅提高UI的开发效率，降...

前言我会用两篇文章来讲透声明式UI，分别是《给移动开发者的声明式UI入门手册》，《UI开发的革命，声明式UI到底好在哪里？》，今天这篇文章是第一篇，第二篇什么时候能发出还不确定，欢迎关注本公众号以及时接收推送。命令式UI的由来和声明式UI相对应的是命令式UI，也就是我们传统的UI编程模式。在声明式UI（响应式UI）这个概念还没出现之前，我们似乎并没有将其称作命令式UI。它好像是为了甄别两者的不同而凭空造出的概念。在...

今天来学习一下两个简单易用的图表组件Progress和DataPanel。1.Progress组件Progress是一个进度条组件，用于显示内容加载或操作处理进度。鸿蒙官方文档只给出了其接口和属性的说明，如下：javascript3.10.1Progress组件进度条，用于显示内容加载或操作处理进度。接口:Progress(value:{value:number,total:number,style:ProgressStyle})value:number指定当前进度值。total:number默认值100,指定进度总长。style:ProgressStyle默...

本节讲解评分条组件Rating的两种基本使用方法：用作表单组件和用作展示组件。首先我们看下Rating组件的接口、属性和事件的说明：javascript3.9Rating组件评分条组件。接口:Rating(options:{rating:number,indicator:boolean})rating:number默认值0，设置并接收评分值。indicator:boolean默认值false，仅作为指示器使用，不可操作。属性:.stars(number)默认值5，设置评星总数。.stepSize(number)默认值0.5，操作评级的步长。.sta...

[春节不停更，此文正在参加「星光计划春节更帖活动」](https:harmonyos.51cto.composts9923)一、前言之前我们开发了小熊派的LED灯驱动，并且编写了相应的代码调用自己的开发驱动，但是自己写的代码只能在终端以命令的形式调用，显然这样十分的不太友好。假设小熊派是我们的一个智能设备，这个LED是我们的手电筒，通过命令行的形式打开手电筒肯定不是我们所期待的，我们更希望能够在图像界面上点一个按钮从而打开我们的手电筒，...

[本文正在参加星光计划3.0–夏日挑战赛](https:ost.51cto.composts13641)前言初次接触OpenHarmony，由于习惯JS开发，所以就使用JS实现这个小练习，主要是考虑可能会常用到，于是就封装成一个小组件来玩耍了效果代码hml代码layout组件有四个插槽，one、two、three、fourhtmlxml{{$item.title}}JS代码javascriptlayout组件propsiconBaseUrl导航菜单图片路径,type:string,default:"commonimagesicon"activeBaseUrl当前激活的菜单图...

[本文正在参加星光计划3.0–夏日挑战赛](https:ost.51cto.composts13954)作者：吴亮亮简介formcomponent用于展示桌面图标和卡片。卡片类似于安卓上的小部件，可以显示于桌面上或者在一些其他系统服务页面。在展示卡片时，使用cardfrontend解析hml标记语言，这是与应用展示不同的一种方式。OpenHarmony支持的应用界面开发有js的类web(hml+css+js)和ets两种声明式，在展示卡片时单独使用了这种更轻量的卡片式(也是类web的,hml+css...

很荣幸能参与到这次DAYU200体验官的活动，感谢51CTO，感谢润和。本文主要分享如何在DAYU200上使用NAPI打通南向和北向，实现RGBLED彩灯控制器的过程。演示视频如链接[视频链接](https:ost.51cto.comshow13518)1.开发环境此实验的主要开发环境如下：DevEcoStudio版本：DevEcoStudio3.0.0.900OpenHarmony版本：OpenHarmony3.1Releasenapigenerator版本：napigenerator20220319.tar.gz（本人电脑环境WIN11+WSL2+Ubuntu20.04）2南向...

滑动条组件，用来快速调节设置值，如音量、亮度等。Slider组件默认宽度为父容器宽度的100%，可自动适配横竖屏切换。Slider组件的接口、属性和事件说明如下：typescript3.8Slider组件滑动条组件，用来快速调节设置值，如音量、亮度等。接口:Slider(value:{value:number,min:number,max:number,step:number,style:SliderStyle})value:number默认值0，当前进度值。min:number默认值0，设置最小值。max:number默认值100，设置最大值...

本节通过栅格化布局、自适应布局、响应式布局和使用资源，从App的弹性布局和多态组件两个维度，讲解如何实现一次开发多端部署。接着，建立一个ArkUIeTS的开发框架，这个可以作为开发新App的脚手架。当显示环境发生变化时（如，不同屏幕尺寸的设备切换、横竖屏切换、应用分屏），我们需要及时调整内容的布局方式以适应变化。通过栅格化布局、自适应布局和响应式布局，可以达到多设备下布局的一致性。2.6.1栅格化布局1.8vp网格系...

[[本文正在参加星光计划3.0夏日挑战赛](https:ost.51cto.composts13641)]本节讲解ArkUIeTS文本输入组件TextInput和TextArea的基本用法，分别对应单行文本输入场景和多行文本输入场景。最后，针对TextInput组件UI外观无法定制的弊端，演示HUI文本输入增强组件Input的运行效果。3.6.1TextInput组件新建TextInputSample.ets页面。TextInput组件的接口、属性和事件说明如下：typescript3.6.1TextInput组件单行文本输入组件。接口:Te...

按钮组件的使用比较简单，也是我们高频使用的一个组件。从外观上分为矩形圆角按钮、胶囊型按钮和圆形按钮。3.5.1接口按钮组件支持两个可选参数，其中：label：用于设置按钮文本。options：主要设置按钮的外观风格。也由两个可选参数组成。默认效果type为胶囊型按钮风格，开启切换效果。除非特意要实现矩形按钮或圆形按钮的效果，否则，建议不设置options参数，这样代码也简洁，整个App的按钮风格也保持一致。typescript3.5Butto...

本节演示视频播放组件Video的基本使用方法。3.4.1权限配置由于使用本地视频文件会影响App的包大小，所以通常我们的视频文件来源于网络地址，需要在config.json中做如下权限配置：json"configChanges":["orientation"]...此处配置省略..."reqPermissions":[{"name":"ohos.permission.INTERNET"},{"name":"ohos.permission.MODIFYAUDIOSETTINGS"},{"name":"ohos.permission.READMEDIA"}]如下图所示：3.4.2接口Video(value:{src:st...

本节首先解决Extend装饰器无法多页面复用的问题，介绍通过自定义组件实现标题和正文的样式复用。然后介绍图片展示组件Image和帧动画组件ImageAnimator，并同时讲解如何对图片应用图像效果及实现共享元素转场。3.3.1建立多页面可复用的组件在《3.1.1Text组件》这节中，我们使用了Extend装饰器定义了title和body，实现快速定义并复用组件的自定义样式。但是，Extend装饰器只能应用在定义该装饰器的页面里，无法通过export共享给其...

前言基于安卓平台的轮播组件Banner（https:github.comyouth5201314bannertreerelease1.4.10），实现了鸿蒙化迁移和重构，代码已经开源到（https:gitee.comisrcohosbannerohos），目前已经获得了很多人的Star和Fork，欢迎各位下载使用并提出宝贵意见！背景Banner一般位于APP的顶部或中部，通过循环播放和手动滑动的方式对一些图片进行展示，其底部通常放置一行圆圈状的指示器，表示当前正在展示的图片的页码。Banner组件播放图片...

新一届HarmonyOS开发者创新大赛（20212022）正如火如荼的进行中！🏆🏆🏆作为当前HarmonyOS生态中最火爆的全国性大赛，相信有不少开发者已经准备大显身手了。为了鼓励更多开发者参与，孵化更多优质参赛作品，帮助开发者快速提升鸿蒙是实战能力，51CTOHarmonyOS技术社区特别设立了十万元成长津贴，并开辟一系列赋能活动，为大家保驾护航！💪💪💪活动规则如下：※只需两步，即可赢得成长津贴※👉第一步：扫码或点击下方链接报名专...

OpenAtomOpenHarmony（以下简称“OpenHarmony”）工作委员会首度发起「OpenHarmony开源贡献者计划」，旨在鼓励开发者参与OpenHarmony开源建设、贡献代码或者帮助社区提交和修复Bug，与OpenHarmony社区共同成长。本期「OpenHarmony开源贡献者计划」以“战码先锋，PR征集令”为主题，联合6大OpenHarmony开源大咖，精选5大简单上手的开源代码仓（Docs、ArkUI、媒体子系统、测试子系统、启动恢复），在【战“码”先锋直播间】，在线...

本节讲解ArkUIeTS中实现页面跳转的三个方案。包括：使用Hyperlink组件打开浏览器跳转到第三方网页、使用Navigator组件跳转到App内的其它页面和使用页面路由接口router。对于目前Hyperlink组件Beta版存在的问题，给出了使用建议。3.2.1Hyperlink组件做BS架构开发的同学，应该很熟悉超级链接组件“a”，通常，链接到另一个网页，写法如下：html而在ArkUIeTS官方提供的组件中有一个和它对标的组件Hyperlink。该组件的接口写法为：t...