鸿蒙开发者社区

版本：v3.1BetaFlex更新时间:2023021709:19以弹性方式布局子组件的容器组件。说明该组件从APIVersion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用​​Column​​​、​​Row​​代替。权限列表无子组件可以包含子组件。接口Flex(value:{direction:FlexDirection,wrap:FlexWrap,justifyContent:FlexAlign,alignItems:Ite...

版本：v3.1BetaPanel更新时间:2023021709:19可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换。说明该组件从APIVersion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件可以包含子组件。接口Panel(show:boolean)参数：参数名参数类型必填参数描述showboolean是控制Panel显示或隐藏。属性名称参数类型描述typePanelType设置可滑动面板的类型。默认值：PanelType.FoldablemodePanel...

版本：v3.1BetaWeb更新时间:2023021709:19提供具有网页显示能力的Web组件。说明该组件从APIVersion8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。示例效果请以真机运行为准，当前IDE预览器不支持。需要权限访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考​​权限申请声明​​。子组件无接口Web(options:{src:ResourceStr,controller:WebControllerWebviewController}...

创建简单视图在这一小节中，我们将开始食物详情页的开发，学习如何通过容器组件Stack、Flex和基础组件Image、Text，构建用户自定义组件，完成图文并茂的食物介绍。在创建页面前，请先创建ArkTS工程，Stage模型请参考​​创建Stage模型的ArkTS工程​​​，FA模型请参考​​创建FA模型的ArkTS工程​​。构建Stack布局创建食物名称。在index.ets文件中，创建Stack组件，将Text组件放进Stack组件的花括号中，使其成为Stack组件的子...

版本：v3.1BetaColumn更新时间:2023021709:19沿垂直方向布局的容器。说明该组件从APIVersion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件可以包含子组件。接口Column(value:{space:stringnumber})参数：参数名参数类型必填参数描述spacestringnumber否纵向布局元素垂直方向间距。从APIversion9开始，space为负数时不生效。默认值：0属性除支持​​通用属性​​外，还支持以下属性：名称参数...

版本：v3.1BetaTextArea更新时间:2023030317:21多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。说明该组件从APIVersion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件无接口TextArea(value:{placeholder:ResourceStr,text:ResourceStr,controller:TextAreaController})参数：参数名参数类型必填参数描述placeholder​​ResourceStr​​否设置无输入时的提示文本。text​...

响应式布局栅格布局栅格系统作为一种辅助布局的定位工具，在平面设计和网站设计都起到了很好的作用，对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有：给布局提供一种可循的规律，解决多尺寸多设备的动态布局问题。给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。推荐使用栅格组件​​GridRow​​​和​​GridCo...

自适应布局线性布局线性布局(LinearLayout)是开发中最常用的布局。线性布局的子组件在线性方向上（水平方向和垂直方向）依次排列。通过线性容器​​Row​​​和​​Column​​实现线性布局。Column容器内子组件按照垂直方向排列，Row组件中，子组件按照水平方向排列。线性布局的排列线性布局的排列方向由所选容器组件决定。根据不同的排列方向，选择使用Row或Column容器创建线性布局，通过调整space，alignItems，justifyConten...

方舟开发框架概述方舟开发框架（简称：ArkUI），是一套构建HarmonyOS应用界面的UI开发框架，它提供了极简的UI语法与包括UI组件、动画机制、事件交互等在内的UI开发基础设施，以满足应用开发者的可视化界面开发需求。基本概念组件：组件是界面搭建与显示的最小单位。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。页面：page页面是方舟开发框架最小的调度分割单位。开发者可以将应用设计为多个功能页面，每个页...

自适应布局弹性布局弹性布局（Flex布局）是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子组件进行排列、对齐和分配空白空间。弹性布局容器:​​Flex组件​​作为Flex布局的容器，用于设置布局相关属性。子组件:Flex组件内的子组件自动成为布局的子组件。主轴:Flex组件布局方向的轴线，子组件默认沿着主轴排列。主轴开始的位置称为主轴起始端，结束位置称为主轴终点端。交叉轴:垂直于主轴方向...

版本：v3.1BetaTextPicker更新时间:2023021709:19滑动选择文本内容的组件。说明该组件从APIVersion8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件无接口TextPicker(options:{range:string[]Resource,selected:number,value:string})根据range指定的选择范围创建文本选择器。参数：参数名参数类型必填参数描述rangestring[]​​Resource​​是选择器的数据选择列表。selectednumber否设置默认...

版本：v3.1BetaWebConsoleMessageWeb组件获取控制台信息对象。示例代码参考​​onConsole事件​​。getLineNumbergetLineNumber():number获取ConsoleMessage的行数。返回值：类型说明number返回ConsoleMessage的行数。getMessagegetMessage():string获取ConsoleMessage的日志信息。返回值：类型说明string返回ConsoleMessage的日志信息。getMessageLevelgetMessageLevel():MessageLevel获取ConsoleMessage的信息级别。返回值：...

JS语法参考JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。语法支持ES6语法。模块声明使用import方法引入功能模块：importrouterfrom'ohos.router';代码引用使用import方法导入js代码：importutilsfrom'....commonutils.js';对象应用对象属性类型描述$defObject使用this.$app.$de...

版本：v3.1BetaAlphabetIndexer更新时间:2023021709:19可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件。说明该组件从APIVersion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件无接口AlphabetIndexer(value:{arrayValue:Array<string>,selected:number})参数：参数名参数类型必填参数描述arrayValueArray<string>是字母索引字符串数组，不可设置为空。selectednumber是初始选中...

添加闪屏动画绘制图形绘制能力主要是通过框架提供的绘制组件来支撑，支持svg标准绘制命令。本节主要学习如何使用绘制组件，绘制详情页食物成分标签（基本几何图形）和应用Logo（自定义图形）。绘制基本几何图形绘制组件封装了一些常见的基本几何图形，比如矩形Rect、圆形Circle、椭圆形Ellipse等，为开发者省去了路线计算的过程。FoodDetail页面的食物成分表里，给每一项成分名称前都加上一个圆形的图标作为成分标签。创建Circl...

版本：v3.1BetaSelect更新时间:2023021709:19提供下拉选择菜单，可以让用户在多个选项之间选择。说明该组件从APIVersion8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件无接口Select(options:Array<SelectOption>)SelectOption对象说明参数名参数类型必填参数描述value​​ResourceStr​​是下拉选项内容。icon​​ResourceStr​​否下拉选项图片。属性名称参数类型描述selectednumber设置下拉...

版本：v3.1BetaProgress更新时间:2023021709:19进度条组件，用于显示内容加载或操作处理等进度。说明该组件从APIversion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件无接口Progress(options:{value:number,total:number,type:ProgressType})创建进度组件，用于显示内容加载或操作处理进度。参数:参数名参数类型必填参数描述valuenumber是指定当前进度值。设置小于0的数值时置为0，设置大于t...

版本：v3.1BetaNavigation更新时间:2023021709:19Navigation组件一般作为Page页面的根容器，通过属性设置来展示页面的标题栏、工具栏、导航栏等。说明该组件从APIVersion8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件可以包含子组件。从APIVersion9开始，推荐与​​NavRouter​​组件搭配使用。接口Navigation()属性除支持​​通用属性​​外，还支持以下属性：名称参数类型描述titlestring...

版本：v3.1BetaRichText更新时间:2023021709:19富文本组件，解析并显示HTML格式文本。说明该组件从APIVersion8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件不包含子组件。接口RichText(content:string)参数:参数名参数类型必填参数描述contentstring是表示HTML格式的字符串。事件名称描述onStart(callback:()>void)加载网页时触发。onComplete(callback:()>void)网页加载结束时触发。支持标...

版本：v3.1BetaSpan更新时间:2023021709:19作为Text组件的子组件，用于显示行内文本的组件。说明该组件从APIVersion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件无接口Span(value:stringResource)参数：参数名参数类型必填参数描述valuestring​​Resource​​是文本内容。属性通用属性方法仅支持​​通用文本样式​​。名称参数类型描述decoration{type:​​TextDecorationType​​,color:...