HarmonyOS鸿蒙NEXT场景化UI Demo
HarmonyOS鸿蒙NEXT场景化UI Demo 本贴持续更新中，开发者也可在鸿蒙场景化示例gitee仓中根据需求寻找示例代码。
基于Navigation.Dialog的透明页面特性，可以用于实现弹窗效果，而且Navigation.Dialog存在于路由栈中，天然可以实现切换页面弹窗不消失。
本示例展示了密钥管理，包括：密钥生成/销毁、密钥导入、密钥证明、密钥协商、密钥派生相关功能。以及秘钥使用，包括：加解密、签名/验签、访问控制相关功能。
本示例实现自定义tabbar滚动功能。
本示例基于Asset Store Kit关键资产存储服务提供的关键资产信息存储能力，实现了一个免密登录的场景，通过将用户的账户密码存储为关键资产信息，来实现 记住账户密码的效果，从而实现用户免密登录。
本示例为文本场景的整合demo，主要包括六个场景示例：多行文本只展示一行、跑马灯案例、展示全文、Text实现部分文本高亮和超链接样式、文本高亮标记功能、文字截断。
本示例将介绍如何使用@kit.TestKit编写单元测试脚本，实现单元测试与UI测试。
本示例介绍弧形菜单的场景化案例。
本示例基于XComponent组件实现了上下滑动视频浏览效果，同时提供了另一种XComponent组件实现的上下滑动视频浏览效果，用于与XComponent组件案例对比。
本示例实现如下个人页功能：
- 支持个人主页的头像、个人签名以及昵称信息修改同步
- 支持超限定行数（5行）的个人签名信息展开与折叠展示
- 支持网格化展示文集封面与文集标题
本示例基于Canvas绘制一个时间卡尺UI组件，滑动卡尺，时间随之发生改变。
本示例通过windowClass.setWindowLayoutFullScreen设置页面是否全屏。
本示例实现了简单的滑动解锁按钮和倒计时结束按钮，能够实现滑动解锁，长按2秒结束或者按原设定时间结束。
本示例展示了一个List嵌套Demo，其功能为List中嵌套List。
本示例基于显式动画、List组件实现了文件推动、插入效果。
本示例展示了一个日期格式转化的Demo，其功能为将一个时间戳转换为当前的时间。
本示例基于原生能力，实现对单个页面设置为隐私模式，使其可以禁止截屏，录屏及分享屏幕等行为。
本示例基于显式动画、List组件实现了ListItem的上下拖动、ListItem切换以及ListItem插入的效果。
本示例使用UDP发送数据，通过设置broadcast参数来启用或禁用广播模式。
广播模式应用场景：
- 自动发现设备：通过广播发送消息，可以快速发现网络中的其他设备。
- 通知所有设备：当需要向网络中的所有设备发送相同的消息时，广播模式非常有用。
本示例基于Canvas组件，构建了一个有关电影院购票选座场景，实现了选座/退座功能。
该示例利用网格布局实现下拉筛选框效果，构建下拉筛选框多选日期弹窗页面。
该示例实现了List横向滑动容器高度自适应，通过List模拟美团首页菜单横向滚动高度自适应效果。
本示例实现了一个可滑动面板的体验，轻量的内容展示窗口，方便在不同尺寸中切换。
本示例基于@ohos.window实现了创建和关闭两个子窗口的功能。
本示例主要演示了一些常用基础组件的使用方法。
本示例基于ArkUI基础组件、布局，实现个人中心页的页面和功能。
本示例是ArkTS编写的关于UI页面，方便开发者后续进行进一步开发。
本示例基于Slider组件和自定义弹窗实现了安全验证，将滑块从左滑动到右的效果。
本示例基于Navigation和GridRow组件实现安全隐私弹窗。应用首次进入时，会有弹窗请求安全隐私信息，用户可点击对应的隐藏协议跳转到对应隐藏协议的详情页面。从详情页面返回时，安全隐私的弹窗依然存在，用户可以继续进行授权/查看的操作。
本示例实现了计算器的计算功能，包括加减乘除四个基本运算，小数计算、百分数计算以及清除结果功能。
本示例主要简单构建页面加载 loading 布局。
本示例使用组件默认属性overlay实现组件级水印效果。
本示例在一个非@Entry的类中创建一个CustomDialogController弹窗，以此来实现不依赖entry的弹窗。
本示例通过List组件实现时间轴（横轴）构建。
本示例主要讲解组件间通信方式，包含以下几种场景：
- 父子组件单向通信
- 父子组件双向通信
- 前后代组件双向同步
- 组件嵌套类双向同步
本示例基于Navigation实现以下四种自定义弹窗。
- 用户隐私协议弹窗
- 切换页面弹窗不消失
- 半模态弹窗
- 动态半模态弹窗
本示例通过设计单独的路由模块和动态加载方法，解决一个Navigation组件下多har/hsp间路由跳转依赖耦合问题。
本示例实现自定义键盘，有三种模式：数字输入模式、英文键盘和中文键盘。
本示例通过设置nestedScroll属性，实现Tab组件的TabBar和List组件吸顶效果。
本示例使用Gauge将数据展示为环形图表来实现渐变前景色。
本示例通过 setPreferredOrientation 方法来控制窗口的横竖屏显示，通过设置组件的 rotate 属性来控制组件的横竖屏显示。
本项目通过RegExp正则匹配实现了高亮关键字功能。
本项目实现了点击、滑动都可实现Tab切换动效，包含文字切换。
本示例基于图片处理能力、Canvas组件以及组合手势拖动组件实现了为图片添加文字水印和水印图像的功能，添加的水印可拖动。
本示例使用@CustomDialog实现隐私弹窗，使用AppStorage+PersistentStorage保存用户是否同意。
本示例使用Swiper（滑块视图容器）实现卡片轮播的功能。
本示例是一个联系人列表demo，使用三方库@ohos/pinyin4js实现中文排序，根据联系人的姓名首字母进行排序； 动态获取所有联系人的首字母，在页面右侧生成字母导航，支持快速定位到某字母行。
本示例基于PanGesture（手势处理）实现了图片添加贴图，并通过手势更新贴图位置的功能。
本示例使用BarPosition（Tabs页签位置）实现了Tabs左对齐的功能。
本示例是使用ArkTS编写的会议发布UI页面，该页面提供了会议内容和人员的填写功能，方便开发者后续进行进一步开发。
本示例基于属性resizable实现图片局部拉伸的功能。
本示例基于abilityAccessCtrl实现了应用获取相机权限，位置信息以及步数信息三种常见权限的功能，每个权限都需要向用户申请，用户确认后才可开启。
本示例基于组合手势实现图片视频的预览功能，支持双击缩放图片，双指缩放图片，拖动图片以及点击视频进行预览。
本示例基于用户首选项实现刷新服务卡片数据的功能。
本示例基于Grid网格容器实现图片九宫格展示功能，使用swipr实现图片滑动预览功能。
本示例基于Want实现应用内点击按钮，即可拉起系统短信界面，并预设短信接收人以及短信内容。
本示例基于effectKit能力实现给图片添加不同滤镜，一键还原图片以及保存图片的功能。
本示例实现点击底部TabBar切换展示页面，同时会有选中的图标变化动效，中间凸起的底部导航。
本示例构建自定义水印组件，利用Video组件的属性为视频添加水印并附有视频播放、暂停、倍速等功能。
跳转短信、浏览器、设置、相机、拨号、应用市场等系统应用和已知bundlename、abilityname的三方应用。
跳转相机拍照后返回照片展示。
跳转三方应用，模拟简易支付。
跳转web页，拉起相机和三方应用。
本示例构建了一个视频播放进度条案例，主要实现的功能是为正在播放的视频添加一个刻度条组件用以表示进度。
本项目基于Canvas组件进行图片计数、图片局部涂鸦遮盖、图片局部自动绘制圆圈路径功能实现：
- 支持图片内部圆圈计数，可通过按钮增加或减少已有数值。
- 支持画笔对图片进行局部涂鸦遮盖，可切换画笔颜色以及线条粗细程度，可用橡皮擦功能撤销当前涂鸦路径
- 支持图片局部自动绘制圆圈路径并填充颜色以及数字标识，可调整切换圆圈路径底部颜色
本示例通过原生组件实现日历页面，根据不同场景利用ForEach或LazyForEach进行数据循环渲染。
- 对Image组件设置clipShape属性，并通过PathShape传入不同的裁剪命令，将Image组件裁剪为不同形状。
- 使用Path组件，通过设置commands属性，并传入不同的绘制命令，绘制出带圆角的不同形状的组件。
本示例实现以下三种功能：
- 利用 NetConnection 监听当前网络连接状态。
- 监听网络类型（wifi、蜂窝网络）。
- 判断蜂窝网络类型（3G\4G\5G）和信号强度。
本示例介绍以下五种常见的弹窗场景化案例。
- 应用启动时的隐私政策和用户协议弹窗
- 网络请求完成的结果提示弹窗
- 应用返回上一级页面的退出确认弹窗
- 个人信息填写的信息弹窗
- 应用使用过程中出现的付费类广告弹窗
本示例主要展示了图片应用场景相关demo。主要包括了图片预览、图片编辑美化、场景变化前后对比、图片切割九宫格、两张图片拼接、AI抠图、图片加水印等场景示例。
图片预览
图片编辑美化
场景变化前后对比
图片切割九宫格
两张图片拼接
AI抠图
图片加水
更多关于HarmonyOS鸿蒙NEXT场景化UI Demo的实战教程也可以访问 https://www.itying.com/category-93-b0.html
HarmonyOS鸿蒙NEXT场景化UI Demo展示了鸿蒙操作系统在用户界面设计上的创新和优化。该Demo通过多个实际应用场景，演示了鸿蒙系统在UI交互、动画效果、布局设计等方面的能力。具体包括：
- 动态布局：鸿蒙NEXT支持根据设备屏幕尺寸和用户操作动态调整UI布局，确保在不同设备上都能提供一致的用户体验。
- 流畅动画：Demo中展示了鸿蒙系统在动画效果上的优化，通过硬件加速和系统级优化，实现了流畅的过渡动画和交互效果。
- 场景化设计：鸿蒙NEXT的UI设计注重场景化，能够根据用户当前的使用场景自动调整UI元素和功能，提升用户体验。
- 多设备协同：Demo还展示了鸿蒙系统在多设备协同方面的能力，用户可以在不同设备间无缝切换，UI元素和状态会自动同步。
通过这些场景化UI设计，鸿蒙NEXT旨在提供更加智能、高效和一致的用户体验，满足不同设备和场景下的需求。
更多关于HarmonyOS鸿蒙NEXT场景化UI Demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
HarmonyOS鸿蒙NEXT的场景化UI Demo展示了其分布式能力和多设备协同的设计理念。通过统一的开发框架，开发者可以实现一次开发，多端部署。Demo中展示了智能家居、办公、出行等场景，突显了设备的无缝连接和智能交互。例如，手机可以作为智能家居的控制中心，平板可以无缝接续手机的工作任务。开发者可以利用ArkUI框架，快速构建响应式布局和动态交互，提升用户体验。
