鸿蒙开发者社区

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.概述在数据分析、金融、健康等应用中，数据统计卡片是展示关键指标和趋势的重要UI组件。本教程将详细讲解如何使用HarmonyOSNEXT的Row组件创建一个专业的数据统计卡片，实现两端对齐布局和响应式图标，打造出既美观又实用的数据可视化界面。2.数据统计卡片的设计原则在设计数据统计卡片时，需要考虑以下几个关键原则：1.信...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.概述在电商应用和内容展示类应用中，商品列表项是一个核心UI组件，它需要在有限的空间内高效展示商品图片、标题、价格等多种信息。本教程将详细讲解如何使用HarmonyOSNEXT的Row组件结合Column组件创建一个精美的商品列表项，实现图文混排与多行文本的完美展示。2.商品列表项的设计原则在设计商品列表项时，需要考虑以下几...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.概述在移动应用界面设计中，水平滚动的标签列表是一种常见且实用的UI元素，它可以在有限的屏幕空间内展示多个分类或选项。本教程将详细讲解如何使用HarmonyOSNEXT的Row组件结合Scroll容器创建一个水平滚动的标签列表，帮助开发者构建出流畅、美观的分类导航界面。2.水平滚动标签列表的设计原则在设计水平滚动标签列表时，...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.概述在即时通讯应用中，聊天气泡是一个核心UI元素，它需要能够区分发送方和接收方的消息，并以不同的样式和位置显示。本教程将详细讲解如何使用HarmonyOSNEXT的Row组件创建反向排列的消息气泡，重点介绍reverse属性的巧妙应用，帮助开发者构建出专业、美观的聊天界面。2.聊天气泡的设计原则在设计聊天气泡时，需要考虑以...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.概述在移动应用界面设计中，带图标的操作按钮是一种常见且实用的UI元素，它结合了图标的直观性和文本的描述性，能够有效提升用户体验。本教程将详细讲解如何使用HarmonyOSNEXT的Row组件创建一个带图标的操作按钮，重点介绍垂直对齐与视觉平衡的实现技巧，帮助开发者打造出专业、美观的交互界面。2.图标按钮的设计原则在设...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.概述在应用开发中，表单是用户输入信息的重要界面元素。一个设计良好的表单不仅能提高用户体验，还能使界面更加美观整洁。本教程将详细讲解如何使用HarmonyOSNEXT的Row组件创建一个表单输入框，重点介绍标签与输入框之间的弹性空间分配技术，帮助开发者构建出专业、美观的表单界面。2.表单布局的设计原则在设计表单布局时...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.概述HarmonyOSNEXT应用开发中，一个常见的需求是根据不同设备类型（如手机、平板）提供不同的用户界面体验。本教程将详细讲解如何使用Row组件创建响应式图文导航项，实现在不同设备上的智能适配，提供最佳的用户体验。2.响应式设计的重要性响应式设计是现代应用开发的核心理念之一，它能够让应用在不同尺寸和类型的设备上...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.引言在上一篇教程中，我们介绍了如何使用Row组件创建水平排列的功能按钮组，并讲解了基础间距与对齐的设置方法。本篇教程将深入探讨Row组件的高级特性、布局技巧以及在实际应用中的最佳实践，帮助开发者更好地掌握HarmonyOSNEXT的水平布局能力。2.Row组件的高级属性除了基础的space和对齐属性外，Row组件还提供了一些高级...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.概述HarmonyOSNEXT提供了丰富的布局组件，其中Row组件是一种常用的水平布局容器，可以将子组件按照水平方向排列。本教程将详细讲解如何使用Row组件创建一个水平排列的功能按钮组，重点介绍基础间距与对齐的设置方法。2.Row组件基础介绍Row组件是HarmonyOSNEXT中用于水平布局的容器组件，它可以将子组件沿水平方向排列。在...

关键容器组件：Scroll、Swiper、Grid、List。从上至下、外向内的容器层级分别是：红色：上下滚动组件scroll黄色：列组件column蓝色：轮播组件swiper绿色：表格组件grid黑色：列表组件list红色：列表项组件listitem+层叠组件stack如下图所示：cke2284.pngcke1921.png1.农民叔叔标题标题Text('农民叔叔').fontWeight(FontWeight.Medium).fontSize(24).fontColor($r('sys.color.ohosidcolortextprimary')).margin({top:12,left:12}...

在做UI设计时，我们经常会碰到这样一个需求：要在某个图标、按钮或列表项的角落加一个小小的提示，比如红点、新消息数量、状态标签之类的。这时候就轮到​​Badge​​组件登场了。如果你想要一个简单优雅、可配置灵活的信息标记功能，​​Badge​​就是官方给你的标准答案。组件简介：Badge是干什么的？​​Badge​​是一个「信息标记容器组件」，可以附加在你指定的任何子组件上，用来做提示提醒，比如：红点数字（199+）文本...

使用Tabs容器组件实现底部导航栏，切换内容页签。如下所示：cke1550.gif一、创建一个容器页面MainPage.etscke9441.png二、自定义tabBar组件组件输入参数包括：导航按钮标题、选项索引、默认未选择图标、被选择图标。BuilderTabBuilder(title:string,index:number,selectedImg:Resource,normalImg:Resource){Column(){Image(this.currentIndexindexselectedImg:normalImg).width(25).height(25)Text(title).margin({top:4}).font...

【HarmonyOS5】鸿蒙中的UIAbility详解（一）一、UIAbility是什么？Stage模型中的组件类型名，即UIAbility组件，包含UI，提供展示UI的能力，主要用于和用户交互。UIAbility类似于传统移动开发Android中的Activity或者Fragment。类似IOS开发中的UIViewController。UIAbility是HarmonyOS应用框架的核心组件，负责管理应用的用户界面生命周期和上下文信息。二、设置指定启动页面启动页面必须设置：否则应用启动后会白屏。避免应用启...

【HarmonyOS5】鸿蒙中的UIAbility详解（二）一、前言今天我们继续深入讲解UIAbility，根据下图可知，在鸿蒙中UIAbility继承于Ability，开发者无法直接继承Ability。只能使用其两个子类：UIAbility和ExtensionAbility。本文将对UIAbility的三种启动模式，数据如何传递，订阅UIAbility生命周期变化，订阅设备的信息变化进行讲解。二、UIAbility的三种启动模式singleton（单实例模式），说人话就是单例模式，App任务进度中该UIAbil...

【HarmonyOS5】鸿蒙中的UIAbility详解（三）一、前言本文是鸿蒙中的UIAbility详解系列的最终章。主要针对UIAbility的冷启动和热启动，对于want数据的处理。UIAbility的备份恢复，UIAbility的接续等高级功能的概念和使用讲解。二、UIAbility启动模式：冷启动与热启动的Want数据处理1.冷启动（ColdStart）应用首次启动或被系统完全终止后重新创建。冷启动，应用会从onCreate函数中进入，通过want参数，我们可以处理其中携带的信息...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.引言在上一篇教程中，我们介绍了聊天页面的整体布局结构和消息列表区域的实现。本篇教程将继续深入探讨ChatPage组件的底部输入区域的实现，重点讲解Row布局的使用、条件渲染表情按钮以及Stack层叠布局在交互元素中的应用。通过这些技巧，我们可以创建一个既美观又实用的聊天输入界面，提升用户体验。2.底部输入区域实现2....

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.引言在HarmonyOSNEXT应用开发中，聊天界面是一种常见且复杂的界面类型，它需要展示消息列表、输入区域以及各种交互元素。本教程将详细讲解如何使用Column组件作为主容器，结合Stack组件实现层叠布局，创建一个现代化的聊天界面。通过ChatPage组件的实际案例，我们将展示如何构建包含消息列表和输入区域的复合布局，帮助开...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.引言在上一篇教程中，我们介绍了详情页的整体布局结构和顶部标题栏的实现。本篇教程将继续深入探讨DetailPage组件的中间内容区域和底部按钮栏的实现，重点讲解Flex布局的使用、文本溢出处理以及按钮样式设计等高级布局技巧。通过这些技巧，我们可以创建一个既美观又实用的详情页面，提升用户体验。2.中间内容区域实现2.1F...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.引言在HarmonyOSNEXT应用开发中，详情页是一种常见且重要的界面类型，它需要展示丰富的内容并提供良好的用户体验。本教程将详细讲解如何使用Column组件作为主容器，结合Row、Flex等组件的嵌套使用，创建一个结构清晰、层次分明的详情页面。通过DetailPage组件的实际案例，我们将展示如何构建包含固定区域和弹性区域的复合...

项目已开源，开源地址：https:gitcode.comnutpiHarmonyosNextCaseStudyTutorial，欢迎fork&star效果演示1.引言在上一部分中，我们介绍了任务列表的基础结构、数据模型设计以及外层Column的实现。本教程将继续深入探讨TaskItem组件的内部结构，包括Row布局的实现、条件渲染的使用以及交互事件的处理，帮助开发者掌握更复杂的布局和交互技巧，创建功能丰富、用户体验良好的任务列表界面。2.TaskItem组件设计2.1组件定义与状态管理...