鸿蒙开发者社区

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

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

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

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

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

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

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

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

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

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

​

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

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

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

版本：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.1BetaImage更新时间:2023030317:21图片组件，支持本地图片和网络图片的渲染展示。说明该组件从APIVersion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。需要权限使用网络图片时，需要申请权限ohos.permission.INTERNET。具体申请方式请参考​​权限申请声明​​。子组件无接口Image(src:stringPixelMapResource)通过图片数据源获取图片，用于后续渲染展示。参数：参数名参数类型必填参数描...

版本：v3.1Beta焦点控制更新时间:2023021709:19自定义组件的走焦效果，可设置组件是否走焦和具体的走焦顺序，tab键或者方向键切换焦点。说明从APIVersion8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。属性名称参数类型描述focusableboolean设置当前组件是否可以获焦。说明：存在默认交互逻辑的组件例如Button、TextInput等，默认即为可获焦，Text、Image等组件则默认状态为不可获焦。不可获焦状态...

版本：v3.1BetaBlank更新时间:2023021709:19空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力。仅当父组件为RowColumn时生效。说明该组件从APIVersion7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。子组件无接口Blank(min:numberstring)参数：参数名参数类型必填参数描述minnumberstring否空白填充组件在容器主轴上的最小大小。默认值：0属性除支持​​通用属性​​外...

【本文正在参加2023年第一期优质创作者激励计划】如何获取网络的连接信息坚果，润开鸿技术专家，InfoQ签约作者，OpenHarmony布道师，多个平台的专家博主。主页：https:ost.51cto.compersonposts148302311.导入模块js网络连接管理模块importconnectionfrom'ohos.net.connection'2.connection.getConnectionPropertiesfunctiongetConnectionProperties(netHandle:NetHandle):Promise;获取netHandle对应的网络的连接信息，使用Prom...