鸿蒙前端学习
文章平均质量分 80
weightOneMillion
学海无涯,而我是沧海一粟
展开
-
鸿蒙界面开发——组件(7):组件导航 & 页面路由
here。定义页面跳转配置项。使用资源文件进行定义,通过资源管理@ohos.resourceManager在运行时对资源文件解析。在ets文件中配置路由加载配置项,一般包括路由页面名称(即pushPath等接口中页面的别名),文件所在模块名称(hsp/har的模块名),加载页面在模块内的路径(相对src目录的路径)。原创 2024-09-10 10:58:38 · 1348 阅读 · 0 评论 -
鸿蒙界面开发——组件(8):图形绘制
绘制组件的父组件,父组件中会描述所有绘制组件均支持的通用属性。1、绘制组件使用Shape作为父组件,实现类似SVG的效果。2、绘制组件单独使用,用于在页面上绘制指定的图形。子组件包含Rect、Path、Circle、Ellipse、Polyline、Polygon、Image、Text、Column、Row、Shape子组件。原创 2024-09-10 10:57:24 · 708 阅读 · 0 评论 -
鸿蒙界面开发——组件(6):属性字符串(StyledString)文本输入
MutableStyledString继承于StyledString,以下统一简称StyledString。是功能强大的标记对象,可用于字符或段落级别设置文本样式。通过将StyledString附加到文本组件, 可以通过多种方式更改文本,包括修改字号、添加字体颜色、使文本可点击以及自定义方式绘制文本等。方便灵活应用文本样式的对象,可通过(Text组件的控制器)中的方法与Text组件绑定,原创 2024-09-06 09:45:52 · 1171 阅读 · 0 评论 -
鸿蒙界面开发——组件(5):菜单Menu & 绑定菜单
不支持作为普通组件单独使用。Menu 以垂直列表形式显示的菜单。包含MenuItem、MenuItemGroup子组件。布局过程中,期望每个菜单项的宽度一致。若子组件设置了宽度,则以尺寸计算规则为准。不设置宽度的情况:菜单组件会对子组件MenuItem、MenuItemGroup设置默认2栅格的宽度,若菜单项内容区比2栅格宽,则会自适应撑开。设置宽度的情况:菜单组件会对子组件MenuItem、MenuItemGroup设置减去padding后的固定宽度。原创 2024-09-05 16:22:39 · 956 阅读 · 0 评论 -
鸿蒙界面开发——组件(3):视频组件video
string | Resource 否 视频的数据源,支持本地视频和网络视频。Resource格式可以跨包/跨模块访问资源文件,常用于访问本地视频。string格式可用于加载网络视频和本地视频,常用于加载网络视频。说明:视频支持的格式是:mp4、mkv、TS。元服务API: 从API version 11开始,该接口支持在元服务中使用。number | string | PlaybackSpeed8+ 否视频播放倍速。原创 2024-09-04 11:57:37 · 1497 阅读 · 0 评论 -
鸿蒙界面开发——组件(4):图标小符号 (SymbolGlyph/SymbolSpan) & 气泡提示Popup
开发者可以使用构建器CustomPopupOptions创建自定义气泡,@Builder中可以放自定义的内容。除此之外,还可以通过popupColor等参数控制气泡样式。// popup构造器定义弹框内容build() {Column() {})builder: this.popupBuilder, // 气泡的内容*******************************placement:Placement.Bottom, // 气泡的弹出位置。原创 2024-09-04 11:56:56 · 1040 阅读 · 0 评论 -
鸿蒙界面开发——通用属性(1)width&height&margin&padding等尺寸设置
设置组件自身的宽度,缺省时使用元素自身内容需要的宽度。在TextInput组件中,width设置auto表示自适应文本宽度。在AlphabetIndexer组件中,width设置auto表示自适应宽度最大索引项的宽度。在Row、Column、RelativeContainer组件中,width、height设置auto表示自适应子组件。原创 2024-09-03 16:01:14 · 330 阅读 · 0 评论 -
鸿蒙界面开发——组件(2):文本显示 (Text/Span) &文本输入 (TextInput/TextArea) &显示图片 (Image) & 自定义弹窗 (CustomDialog)
使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框,此装饰器内进行自定义内容(也就是弹框内容)。})build() {Column() {Text('我是内容')创建构造器,与装饰器呼应相连。@Entry@Component//创建构造器,与装饰器呼应相连。})点击与onClick事件绑定的组件使弹窗弹出。@Entry@Component//创建构造器,与装饰器呼应相连。原创 2024-09-02 08:24:49 · 1206 阅读 · 0 评论 -
鸿蒙界面开发(12):选项卡布局(Tabs)
对于底部导航栏,一般作为应用主页面功能区分,为了更好的用户体验,会组合文字以及对应语义图标表示页签内容,这种情况下,需要自定义导航页签的样式。设置自定义导航栏需要使用tabBar的参数,以其支持的的方式传入自定义的函数组件样式。例如这里声明tabBuilder的自定义函数组件,传入参数包括页签文字title,对应位置index,以及选中状态和未选中状态的图片资源。通过当前活跃的currentIndex和页签对应的targetIndex匹配与否,决定UI显示的样式。//参数) {//结构。原创 2024-09-02 08:24:31 · 842 阅读 · 0 评论 -
鸿蒙界面开发(六):栅格布局
GridRow为栅格容器组件,需与栅格子组件GridCol在栅格布局场景中联合使用。原创 2024-08-31 11:18:38 · 925 阅读 · 0 评论 -
鸿蒙界面开发(五):相对布局
相对布局的容器,支持容器内部的子元素设置相对位置关系,适用于界面复杂场景的情况,对多个子组件进行对齐和排列。子元素,基于锚点做相对位置布局。锚点:通过锚点设置当前元素基于哪个元素确定位置。对齐方式:通过对齐方式,设置当前元素是基于锚点的上中下对齐,还是基于锚点的左中右对齐。原创 2024-08-31 11:18:11 · 416 阅读 · 0 评论 -
鸿蒙界面开发——组件(1):按钮Button&单选框Radio&切换按钮Toggle&进度条 (Progress)
/ xxx.ets@Entry@Component@Builder//定义自定义结构样式build() {Column() {//设置选中样式类型.width(80)})通过selectedColor属性设置Toggle打开选中后的背景颜色。通过switchPointColor属性设置Switch类型的圆形滑块颜色,仅对type为ToggleType.Switch生效。原创 2024-08-29 11:27:29 · 1067 阅读 · 0 评论 -
鸿蒙界面开发(11):滚动容器(Scroll)
当子组件的布局尺寸超过Scroll时,内容可以滚动。原创 2024-08-28 17:08:02 · 315 阅读 · 0 评论 -
鸿蒙ArkTS语言学习(五):扩展(函数)@Extend&@Styles&@Builder
除了组件、样式、事件外,还可以封装结构。结构的复用。用于封装相似的结构。可以全局也可以局部。//全局自定义构建函数定义的语法:使用方法:如果不涉及组件状态变化,建议使用全局的自定义构建方法。//局部定义的语法:使用方法:@Builder通过按引用传递的方式传入参数,才会触发动态渲染UI,并且参数只能是一个。@Builder如果传入的参数是两个或两个以上,不会触发动态渲染UI。@Builder传入的参数中同时包含按值传递和按引用传递两种方式,不会触发动态渲染UI。原创 2024-08-28 10:27:46 · 397 阅读 · 0 评论 -
鸿蒙界面开发(十):轮播 (Swiper)图布局&宽高比例apsectRatio
Swiper支持通过customContentTransition设置自定义切换动画,可以在回调中对视窗内所有页面逐帧设置透明度、缩放比例、位移、渲染层级等属性实现自定义切换动画。// 同组页面完全滑出视窗外时,重置属性值} else {// 同组页面未滑出视窗外时,对同组中左右两个页面,逐帧根据position修改属性值} else {})原创 2024-08-27 15:53:45 · 1049 阅读 · 0 评论 -
鸿蒙界面开发(八):Grid网格布局&Badge角标组件
在目标组件的外层包裹一层Badge角标组件支持位置:右上,左,右也可以使用绝对定位实现更灵活的角标位置。原创 2024-08-27 14:27:26 · 1828 阅读 · 0 评论 -
鸿蒙界面开发(四):支付宝首页开发实战
主体的滚动窗口又包括一个快捷导航栏和一个导航窗口、以及主体部分。利用了层叠布局和一个scroll滚动组件。包括底部导航、顶部导航、主体的滚动窗口。原创 2024-08-26 14:39:24 · 412 阅读 · 1 评论 -
鸿蒙界面开发(四):层叠布局&绝对定位
层叠布局(StackLayout)用于在屏幕上预留一块区域来显示组件中的元素,提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠,容器中的子元素依次入栈,后一个子元素覆盖前一个子元素,子元素可以叠加,也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力,其使用场景有广告、卡片层叠效果等。层叠布局优先使用层叠布局Stack组件。如图1,Stack作为容器,容器内的子元素的顺序为Item1->Item2->Item3。图1 层叠布局。原创 2024-08-26 10:38:59 · 686 阅读 · 0 评论 -
鸿蒙界面开发(三):弹性布局
常用于页面头部导航栏的均匀分布、页面框架的搭建、多行数据的排列等。Flex组件布局方向为。原创 2024-08-26 08:39:25 · 274 阅读 · 0 评论 -
鸿蒙界面开发(二):线性布局
Column容器内子元素按照垂直方向排列,Row容器内子元素按照水平方向排列。主轴:线性布局容器在,子元素默认沿主轴排列。Row容器主轴为水平方向,Column容器主轴为垂直方向。。Row容器交叉轴为垂直方向,Column容器交叉轴为水平方向。间距:布局子元素的间距。原创 2024-08-22 16:31:47 · 1100 阅读 · 0 评论 -
鸿蒙ArkTS语言学习(四):泛型&空安全&模块导入导出
泛型类型和函数允许创建的代码在各种类型上运行,而不仅支持单一类型。原创 2024-08-21 14:39:13 · 845 阅读 · 0 评论 -
鸿蒙界面开发(一):基础界面实战
build(){}函数里写代码,预览器看效果。原创 2024-08-20 11:44:45 · 253 阅读 · 0 评论 -
鸿蒙ArkTS语言学习(一):基础知识
变量、函数、联合变量、枚举、对象、接口原创 2024-08-15 16:26:19 · 404 阅读 · 0 评论 -
EcoDev Studio 与 gitlab【拉取项目,切换分支,再修改提交】
错误方法:我先创建了一个空项目,然后想利用git直接将空项目上传到gitlab仓库的分支。正确做法:先拉项目,切换分支,将空项目(空项目的子文件及子文件夹,一整个目录好像不行)复制到分支目录中,提交。原创 2024-08-15 11:40:57 · 385 阅读 · 0 评论 -
鸿蒙前端开发——工具安装与项目创建
直接下一步。原创 2024-08-14 16:50:28 · 257 阅读 · 0 评论