OpenHarmony应用开发—ArkUI组件集合

最新推荐文章于 2024-09-23 23:04:35 发布
最新推荐文章于 2024-09-23 23:04:35 发布
阅读量1k 收藏 25
点赞数 11
分类专栏： HarmonyOS OpenHarmony 鸿蒙开发 文章标签： 嵌入式硬件 鸿蒙开发 OpenHarmony 组件化 移动开发 ArkUI 驱动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maniuT/article/details/139356026
版权
HarmonyOS 同时被 3 个专栏收录
871 篇文章 15 订阅
订阅专栏
OpenHarmony
694 篇文章 19 订阅
订阅专栏
鸿蒙开发
504 篇文章 2 订阅
订阅专栏

介绍

本示例为 ArkUI 中组件、通用、动画、全局方法的集合。

效果预览

使用说明：

1.点击组件、通用、动画、全局方法四个按钮或左右滑动切换不同视图。

2.点击二级导航（如通用属性、通用事件等），若存在三级导航则展开三级导航（如 Border 边框、点击事件等）；若不存在三级导航，则跳转至详情页面。

3.  若存在三级导航（如 Border 边框、点击事件等），点击跳转至详情页面。

工程目录

entry/src/main/ets/
|---component
|   |---AttributeModificationTool.ets                    // 组件
|   |---IntroductionTitle.ets                            // 首页介绍标题组件
|   |---TabContentNavigation.ets                         // 切换组件
|   |---TitleBar.ets                                     // 详情页面标题组件
|---Application
|   |---MyAbilityStage.ts             
|---data
|   |---CollectionCategory.ts                            // 数据分类
|   |---ResourceDataHandle.ts                            // 源数据
|---MainAbility
|   |---MainAbility.ts             
|---model
|   |---CategoricalDataType.ts                           // 数据类型
|---util
|   |---Logger.ts                                        // 打印
|   |---ShowToast.ets                                    // 弹窗                      
|---pages
|   |---Index.ets                                        // 首页
|   |---animations                                       // 动画
|   |   |---AnimationData.ets
|   |   |---interpolationCalculationSample   
|   |   |   |---InterpolationCalculationSample.ets       // 插值计算
|   |   |---pageTransitionSample
|   |   |   |---PageTransitionSample.ets                 // 页面间转场
|   |   |   |---PageTransitionSampleTo.ets     
|   |   |---shareElementTransitionSample
|   |   |   |---ShareElementTransitionSample.ets         // 共享元素转场
|   |   |   |---ShareElementTransitionSampleTo.ets
|   |   |---floatingSample
|   |   |   |---FloatingWindowSample.ets                 // 悬浮窗
|   |   |---folderSample
|   |   |   |---FolderSample.ets                         // 文件夹展开
|   |   |---systemIcon
|   |   |   |---SystemIcon.ets                           // 系统图标
|   |   |---gallerySample
|   |   |   |---GalleryCardSample.ets                    // 图库卡片展开
|   |   |---multiplexSample
|   |   |   |---MultiplexSample.ets                      // 多任务
|   |   |---shopSample
|   |   |   |---ShopCardSample.ets                       // 商店卡片展开
|   |   |---layoutAnimationSample
|   |   |   |---LayoutAnimationSample.ets                // 布局动效
|   |   |---sideBarTransitionSample
|   |   |   |---SideBarTransitionSample.ets              // 侧边栏动效
|   |   |---sizeTransitionSample
|   |   |   |---SizeTransitionSample.ets                 // 尺寸变换动效
|   |---components                                       // 详情页面
|   |   |---ComponentData.ets
|   |   |---auxiliary         // 辅助
|   |   |   |---alphabetIndexerSample
|   |   |   |   |---AlphabetIndexerSample.ets            // 字母索引条
|   |   |   |---badgeSample
|   |   |   |   |---BadgeSample.ets                      // 标记
|   |   |   |---panelSample
|   |   |   |   |---PanelSample.ets                      // 弹出面板
|   |   |   |---refreshSample
|   |   |   |   |---RefreshSample.ets                    // 下拉刷新
|   |   |   |---scrollbarSample
|   |   |   |   |---ScrollBarSample.ets                  // 滚动条
|   |   |---blankAndDivider                              // 空白与分分隔
|   |   |   |---dividerSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---DividerSample.ets
|   |   |---buttonAndSelection                           // 按钮与选择
|   |   |   |---buttonSample
|   |   |   |   |---ButtonSample.ets                     // 按钮
|   |   |   |---checkboxSample
|   |   |   |   |---CheckboxSample.ets                   // 勾选框
|   |   |   |---counterSample
|   |   |   |   |---CounterSample.ets                    // 计数器
|   |   |   |---datePickerSample
|   |   |   |   |---DatePickerSample.ets                 // 日期选择器
|   |   |   |---radioSample
|   |   |   |   |---RadioSample.ets                      // 单选按钮
|   |   |   |---ratingSample
|   |   |   |   |---RatingSample.ets                     // 评分条
|   |   |   |---selectSample
|   |   |   |   |---SelectSample.ets                     // 选择菜单
|   |   |   |---sliderSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---SliderSample.ets                     // 滑动条
|   |   |   |---textPickerSample
|   |   |   |   |---TextPickerSample.ets                 // 文本选择器
|   |   |   |---timePickerSample
|   |   |   |   |---TimePickerSample.ets                 // 时间选择器
|   |   |   |---toggleSample
|   |   |   |   |---ToggleSample.ets                     // 切换按钮
|   |   |---canvasAndGraphicDrawing                      // 画布与图形绘制
|   |   |   |---canvasSample
|   |   |   |   |---CanvasSample.ets                     // 画布
|   |   |   |---circleSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---CircleSample.ets                     // 圆形
|   |   |   |---ellipseSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---EllipseSample.ets                    // 椭圆
|   |   |   |---lineSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---LineSample.ets                       // 直线
|   |   |   |---pathSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---PathSample.ets                       // 路径
|   |   |   |---polygonSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---PolygonSample.ets                    // 多边形
|   |   |   |---polylineSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---PolylineSample.ets                   // 折线
|   |   |   |---rectSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---RectSample.ets                       // 矩形
|   |   |   |---shapeSample
|   |   |   |   |---ShapeSample.ets                      // 指定图形
|   |   |---imageVideoAndMedia
|   |   |   |---imageAnimatorSample
|   |   |   |   |---ImageAnimatorSample.ets              // 逐帧播放图片
|   |   |   |---imageSample
|   |   |   |   |---ImageControlPanel.ets
|   |   |   |   |---ImageSample.ets                      // 图片
|   |   |   |---pluginComponentSample
|   |   |   |   |---PluginComponentSample.ets            // 嵌入式显示
|   |   |   |---videoSample
|   |   |   |   |---VideoControlPanel.ets
|   |   |   |   |---VideoSample.ets                      // 视频
|   |   |   |---xcomponentSample
|   |   |   |   |---XComponentSample.ets                 // 绘制组件
|   |   |---canvas
|   |   |   |---attributesSample
|   |   |   |   |---AttributesSample.ets                 // 属性
|   |   |   |---gradientSample
|   |   |   |   |---GradientSample.ets                   // 渐变对象
|   |   |   |---image_bitmapSample
|   |   |   |   |---Image_bitmapSample.ets               // 位图对象
|   |   |   |---methodsSample
|   |   |   |   |---MethodsSample.ets                    // 方法
|   |   |   |---path2dSample
|   |   |   |   |---Path2dSample.ets                     // 路径对象
|   |   |   |---shadowsSample
|   |   |   |   |---ShadowsSample.ets                    // 阴影
|   |   |   |---transformSample
|   |   |   |   |---TransformSample.ets                  // 转换
|   |   |---informationPresentationAndDynamicEffects
|   |   |   |---dataPanelSample
|   |   |   |   |---DataPanelSample.ets                  // 数据面板
|   |   |   |---gaugeSample
|   |   |   |   |---GaugeSample.ets                      // 仪表盘
|   |   |   |---loadingProgressSample
|   |   |   |   |---LoadingProgressSample.ets
|   |   |   |---listSample                               // 列表
|   |   |   |   |---ListSample.ets
|   |   |   |---marqueeSample
|   |   |   |   |---MarqueeSample.ets                    // 跑马灯
|   |   |   |---radioSample
|   |   |   |   |---RadioSample.ets                      // 单选
|   |   |   |---progressSample
|   |   |   |   |---ProgressSample.ets                   // 进度条
|   |   |   |---qrCodeSample
|   |   |   |   |---QRCodeSample.ets                     // 二维码
|   |   |   |---textclockSample
|   |   |   |   |---TextClockSample.ets                  // 文字时钟
|   |   |   |---textTimerSample
|   |   |   |   |---TextTimerSample.ets                  // 文字计时器
|   |   |---listAndGrid
|   |   |   |---gridItemSample
|   |   |   |   |---GridItemControlPanel.ets
|   |   |   |   |---GridItemSample.ets                   // 网格容器子组件
|   |   |   |---gridSample
|   |   |   |   |---GridControlPanel.ets
|   |   |   |   |---GridSample.ets                       // 网格容器
|   |   |   |---listItemSample
|   |   |   |   |---ListItemSample.ets                   // 列表容器子组件
|   |   |   |---listSample
|   |   |   |   |---ListControlPanel.ets
|   |   |   |   |---ListSample.ets                       // 列表容器
|   |   |---navigation
|   |   |   |---navigationSample
|   |   |   |   |---NavigationSample.ets                 // 导航
|   |   |   |   |---NavigationSecondPage.ets
|   |   |   |   |---NavigationThirdPage.ets
|   |   |   |---navRouterSample
|   |   |   |   |---NavRouterSample.ets                  // 导航
|   |   |   |---stepperAndStepperItemSample
|   |   |   |   |---StepperAndStepperItemSample.ets      // 步骤导航器
|   |   |   |---tabContentSample
|   |   |   |   |---TabContentSample.ets                 // 页签子组件
|   |   |   |---tabSample
|   |   |   |   |---TabControlPanel.ets
|   |   |   |   |---TabSample.ets                        // 页签
|   |   |---rowsAndColumns
|   |   |   |---columnSample
|   |   |   |   |---ColumnControlPanel.ets
|   |   |   |   |---ColumnSample.ets                     // 列容器
|   |   |   |---columnSplitSample
|   |   |   |   |---ColumnSplitSample.ets                // 列分割容器
|   |   |   |---rowSample
|   |   |   |   |---RowControlPanel.ets
|   |   |   |   |---RowSample.ets                        // 行容器
|   |   |   |---rowSplitSample
|   |   |   |   |---RowSplitSample.ets                   // 行分割容器
|   |   |   |---sideBarContainerSample
|   |   |   |   |---SideBarContainerControlPanel.ets
|   |   |   |   |---SideBarContainerSample.ets           // 侧边栏
|   |   |---scrollAndSwipe
|   |   |   |---scrollSample
|   |   |   |   |---ScrollSample.ets                     // 滚动
|   |   |   |---swiperSample
|   |   |   |   |---SwiperControlPanel.ets
|   |   |   |   |---SwiperSample.ets                     // 轮播
|   |   |---stackFlexAndGrid
|   |   |   |---flexSample                              
|   |   |   |   |---FlexControlPanel.ets
|   |   |   |   |---FlexSample.ets                       // 弹性布局
|   |   |   |---gridContainerSample
|   |   |   |   |---GridContainerControlPanel.ets
|   |   |   |   |---GridContainerSample.ets              // 栅格系统
|   |   |   |---stackSample
|   |   |   |   |---StackControlPanel.ets
|   |   |   |   |---StackSample.ets                      // 层叠布局
|   |   |---textAndInput
|   |   |   |---patternLockSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---PattternLockSample.ets               // 密码锁
|   |   |   |---searchSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---SearchSample.ets                     // 搜索栏
|   |   |   |---imageSpanSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---imageSpanSample.ets                  // 行内图像
|   |   |   |---textAreaSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---TextAreaSample.ets                   // 文本域
|   |   |   |---richTextSample
|   |   |   |   |---RichTextSample.ets                   // 富文本
|   |   |   |---spanSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---SpanSample.ets                       // 行内文本
|   |   |   |---textInputSample
|   |   |   |   |---TextInputSample.ets                  // 文本输入
|   |   |   |---textSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---TextSample.ets                       // 文本
|   |   |---web
|   |   |   |---webSample
|   |   |   |   |---WebSample.ets                        // 网页
|   |---globalMethods                                    // 详情页面
|   |   |---GlobalMethodData.ets
|   |   |---dialogs
|   |   |   |---alertDialogSample
|   |   |   |   |---AlertDialogSample.ets                // 警告弹窗
|   |   |   |---customDialogSample
|   |   |   |   |---CustomDialog.ets
|   |   |   |   |---CustomDialogSample.ets               // 自定义弹窗
|   |   |   |---dateDialogSample
|   |   |   |   |---DateDialogSample.ets                 // 日期选择弹窗
|   |   |   |---timeDialogSample
|   |   |   |   |---TimeDialogSample.ets                 // 时间选择弹窗
|   |   |   |---actionSheetDialogSample
|   |   |   |   |---ActionSheetDialogSample.ets          // 列表选择弹窗
|   |   |   |---textPickerDialogSample
|   |   |   |   |---TextPickerDialogSample.ets           // 文本滑动选择器弹窗
|   |   |   |---menuSample
|   |   |   |   |---MenuSample.ets                       // 菜单
|   |---universal                                        // 详情页面
|   |   |---UniversialData.ets
|   |   |---events
|   |   |   |---areaChangeEventSample
|   |   |   |   |---AreaChangeEventSample.ets            // 组件区域变化事件
|   |   |   |---clickEventSample
|   |   |   |   |---ClickEventSample.ets                 // 点击事件
|   |   |   |---dragEventSample
|   |   |   |   |---component                            // 组件拖拽
|   |   |   |   |   |---FormComponentDrag.ets
|   |   |   |   |   |---GridItemDrag.ets
|   |   |   |   |   |---HyperlinkDrag.ets
|   |   |   |   |   |---ImageDrag.ets
|   |   |   |   |   |---ListItemDrag.ets
|   |   |   |   |   |---TextDrag.ets
|   |   |   |   |   |---VideoDrag.ets
|   |   |   |   |---DragEventSample.ets                  // 拖拽事件
|   |   |   |---focusEventSample
|   |   |   |   |---FocusEventSample.ets                 // 焦点事件
|   |   |   |---keyPressEventSample
|   |   |   |   |---KeyPressEventSample.ets              // 按压事件
|   |   |   |---mountUnmountEventSample
|   |   |   |   |---MountUnmountEventSample.ets          // 挂载卸载事件
|   |   |   |---mouseEventSample
|   |   |   |   |---MouseEventSample.ets                 // 鼠标事件
|   |   |   |---scrollEventSample
|   |   |   |   |---ScrollEventSample.ets                // 滚动事件
|   |   |   |---touchEventSample
|   |   |   |   |---TouchEventSample.ets                 // 触摸事件
|   |   |---gesture
|   |   |   |---bindGestureSample
|   |   |   |   |---BindGestureSample.ets                // 绑定手势方法
|   |   |   |---combinedSample
|   |   |   |   |---CombinedSample.ets                   // 组合手势
|   |   |   |---longPressSample
|   |   |   |   |---LongPressSample.ets                  // 长按手势
|   |   |   |---panSample
|   |   |   |   |---PanSample.ets                        // 拖动手势
|   |   |   |---pinchSample
|   |   |   |   |---PinchSample.ets                      // 捏合手势
|   |   |   |---rotationSample
|   |   |   |   |---RotationSample.ets                   // 旋转手势
|   |   |   |---swipeSample
|   |   |   |   |---SwipeSample.ets                      // 滑动手势
|   |   |   |---tapGestureSample
|   |   |   |   |---TapGestureSample.ets                 // Tap手势
|   |   |---properties
|   |   |   |---foregroundSample
|   |   |   |   |---ForegroundSample.ets                 // 前景
|   |   |   |---backgroundSample
|   |   |   |   |---BackgroundSample.ets                 // 背景
|   |   |   |---borderSample
|   |   |   |   |---BorderSample.ets                     // 边框
|   |   |   |---componentBlurredSample
|   |   |   |   |---ComponentBlurredSample.ets           // 分布式迁移标识
|   |   |   |---componentIDSample
|   |   |   |   |---ComponentIDSample.ets                // 组件标识
|   |   |   |---displaySample
|   |   |   |   |---DisplaySample.ets                    // 显示
|   |   |   |---effectsSample
|   |   |   |   |---EffectsSample.ets                    // 互动
|   |   |   |---flexSample
|   |   |   |   |---FlexSample.ets                       // flex布局
|   |   |   |---focusControlSample
|   |   |   |   |---FocusControlSample.ets               // 焦点控制
|   |   |   |---fontSample
|   |   |   |   |---FontSample.ets                       // 字体
|   |   |   |---gridSettingsSample
|   |   |   |   |---GridSettingsSample.ets               // 栅格设置
|   |   |   |---interactionSample
|   |   |   |   |---InteractionSample.ets                // 图像效果
|   |   |   |---layoutConstraintSample
|   |   |   |   |---LayoutConstraintSample.ets           // 布局约束
|   |   |   |---locationSample
|   |   |   |   |---LocationSample.ets                   // 位置设置
|   |   |   |---pictureBorderSample
|   |   |   |   |---PictureBorderSample.ets              // 图片边框设置
|   |   |   |---restoreIdSample
|   |   |   |   |---RestoreIdSample.ets                  // 分布式迁移标识
|   |   |   |---rotateSample
|   |   |   |   |---RotateSample.ets                     // 旋转
|   |   |   |---scaleSample
|   |   |   |   |---ScaleSample.ets                      // 缩放
|   |   |   |---shapeCropSample
|   |   |   |   |---ShapeCropSample.ets                  // 形状裁剪
|   |   |   |---safeAreaSample
|   |   |   |   |---SafeAreaSample.ets                   // 安全区域
|   |   |   |---sizeSample
|   |   |   |   |---SizeSample.ets                       // 尺寸
|   |   |   |---transformSample
|   |   |   |   |---TransformSample.ets                  // 变换矩阵
|   |   |   |---translateSample
|   |   |   |   |---TranslateSample.ets                  // 图像变换

具体实现

本示例使用  Tabs容器组件  搭建整体应用框架，每个  TabContent内容视图 使用  List容器组件 布局，在每个  ListItem 中使用  循环渲染 加载此分类下分类导航数据，底部导航菜单使用  TabContent中tabBar属性 设置自定义样式 。

● 将组件库分成四大类，切换查看

○ 组件模块：

■ 空白与分隔

● 封装自定义组件：CommonItemSlider，CommonItemSelect，CommonItemColorSelect

● 接口参考： @ohos.app.ability.common

■ 按钮与选择

● 使用全局组件 ShowToast,TitleBar,IntroductionTitle 实现按钮，时间选择器，单选按钮，选择菜单，滑动条，切换按钮，勾选框，文本选择器，时间选择器，计数器，评分条组件功能

● 使用 getStringArrayData，getStringData 获取数据 ResourceDataHandle.ets

■ 滚动与滑动

● 使用全局组件 TitleBar 实现滚动，翻页组件功能

■ 信息展示与功效

● 使用全局组件 TitleBar，AttributeModificationTool 实现二维码，进度条，跑马灯，文字计时器，文字时钟，仪表盘，数据面板组件功能

● 使用 getStringArrayData，getStringData 获取数据 ResourceDataHandle.ets

■ 文本与输入

● 使用全局组件 ShowToast，TitleBar，AttributeModificationTool,IntroductionTitle 实现行内文本，行内图像，文本输入，文本，富文本组件功能

● 使用 getStringArrayData，getStringData 获取数据 ResourceDataHandle.ets

■ 辅助

● 使用全局组件 TitleBar 实现标记，滚动条，下拉刷新，弹出面板，字母索引条组件功能

● 使用 getStringArrayData，getStringData 获取数据 ResourceDataHandle.ets

■ 画布

● 使用全局组件 TitleBar, CanvasGradient, CanvasPattern, ImageBitmap, Path2D 等实现图形绘制属性，图形绘制方法，渐变对象绘制，路径对象绘制，位图的绘制，阴影绘制，变换绘制

● 使用 getStringArrayData，getStringData 获取数据 ResourceDataHandle.ets

○ 通用模块：

■ 通用事件

● 用到全局组件 TitleBar，IntroductionTitle 实现页面

● resetBallMotion，isSideReached，calculateReachedSide，decideMoveDirection 方法计算区域坐标，moveBall 方法移动球体

■ 通用属性

● 使用全局组件 TitleBar，AttributeModificationTool 实现组件页面

● 接口参考： @ohos.promptAction

○ 动画模块：

■ 转场动画

● 用到全局组件 TitleBar，IntroductionTitle 实现页面

● 接口参考： @ohos.promptAction

■ 插值计算

● 用到全局组件 TitleBar，IntroductionTitle 实现页面

● 接口参考： @ohos.curves ，  @ohos.router

■ 显示动画

● 用到全局组件 TitleBar，IntroductionTitle 实现页面

● 接口参考： animateTo

■ 属性动画

● 用到全局组件 TitleBar，IntroductionTitle 实现页面

● 接口参考： animation

■ 路径动画

● 用到全局组件 TitleBar，IntroductionTitle 实现页面

● 接口参考： path

○ 全局方法模块：

■ 弹窗使用全局组件 ShowToast，TitleBar，IntroductionTitle 实现弹窗组件页面

● 使用 getStringArrayData，getStringData 获取数据 ResourceDataHandle.ets

依赖

不涉及。

约束与限制

1.本示例仅支持标准系统上运行，支持设备：RK3568。

2.本示例仅支持 API10 版本 SDK，版本号：4.0.10.1,镜像版本号：[OpenHarmony_4.0.10.1]

3.本示例涉及使用系统接口，FormComponent 组件相关接口，需要手动替换 Full SDK 才能编译通过，具体操作可参考 替换指南 。

4.本示例需要使用 DevEco Studio 3.1 Release (Build Version: 3.1.0.500, built on April 28, 2023)才可编译运行。

5.本示例涉及 ohos.permission.GET_BUNDLE_INFO_PRIVILEGED、ohos.permission.REQUIRE_FORM 为 system_basic 级别（相关权限级别可通过 权限定义列表  查看），需要配置高权限签名，可参考 应用apl等级说明 。

6.本示例涉及系统接口，需要配置系统应用签名，可以参考 修改harmonyappprovision配置文件 ，把配置文件中的“app-feature”字段信息改为“hos_system_app”。

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo code/UI/ArkTsComponentCollection/ComponentCollection/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

如果大家想更加深入的学习 OpenHarmony 开发的内容，不妨可以参考以下相关学习文档进行学习，助你快速提升自己：

OpenHarmony 开发环境搭建：https://qr18.cn/CgxrRy

《OpenHarmony源码解析》：https://qr18.cn/CgxrRy

  • 搭建开发环境
  • Windows 开发环境的搭建
  • Ubuntu 开发环境搭建
  • Linux 与 Windows 之间的文件共享
  • ……

系统架构分析：https://qr18.cn/CgxrRy

  • 构建子系统
  • 启动流程
  • 子系统
  • 分布式任务调度子系统
  • 分布式通信子系统
  • 驱动子系统
  • ……

OpenHarmony 设备开发学习手册：https://qr18.cn/CgxrRy

在这里插入图片描述

OpenHarmony面试题（内含参考答案）：https://qr18.cn/CgxrRy

HarmonyOS（鸿蒙）ArkUI组件
小炫风技术旅行
03-17 528
方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。一:Image图片的数据源，支持本地图片和网络图片属性名称参数类型描述altstring |加载时显示的占位图，支持本地图片（png、jpg、bmp、svg和gif类型），不支持网络图片。默认值：null从API version 9开始，该接口支持在ArkTS卡片中使用。
基于OpenHarmony/HarmonyOS操作系统的ArkUI框架深入学习
一键难忘的博客
09-23 2490
ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具，帮助您提升HarmonyOS应用界面开发效率30%。您只需使用一套TS/JS API，就能在多个HarmonyOS设备上提供生动而流畅的用户界面体验。
二、ArkUI界面设计1（组件-样式-基础）
最新发布
FXNup的博客
09-23 871
简单文本属性&图片属性介绍
【鸿蒙开发示例代码】云开发服务
weixin_44349071的博客
08-19 1181
本示例展示了使用CloudFoundationKit提供的云函数、云存储、云数据库能力的方法，包含：1.云函数的call函数调用功能。2.云存储的上传下载删除功能。3.云数据库的增删改查功能。需要使用@kit.CloudFoundationKit。
ArkUI组件
m0_56308072的博客
12-09 2016
方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。ArkUI提供了非常多的组件供开发者使用，我们在使用时直接去查看官方文档即可。
HarmonyOS ArkUI--基础组件
qq_44761778的博客
06-02 1186
组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等，例如下面这个常用的登录界面就是由这些基础组件组合而成。
OpenHarmony教程指南—ArkUI中组件、通用、动画、全局方法的集合
m0_70749039的博客
03-07 1001
本示例为ArkUI中组件、通用、动画、全局方法的集合。 本示例使用 Tabs容器组件搭建整体应用框架，每个 TabContent内容视图 使用 div容器组件 嵌套布局，在每个 div 中使用 循环渲染 加载此分类下分类导航数据，底部导航菜单使用 TabContent中tabBar属性 设置自定义样式 。通过组件、通用、动画、全局方法四个大类展现了ArkUI的能力，并把四大类中的功能进行了分类，方便开发者查看，每个示例又结合了不同的展现方式，以契合实际应用场景为主生动的体现了ArkUI能力的用法。
ArkUI-X：跨平台OpenHarmony应用框架适配解决方案
资源摘要信息:"ArkUI-X应用框架适配层是OpenHarmony系统中用于保证应用开发模式兼容性的一个重要组件。ArkUI-X的作用是在不同的硬件平台和操作系统上模拟OpenHarmony应用框架的运行环境，对应用的生命周期进行管理，...
OpenHarmony实战开发-chart开发指导
2401_82546228的博客
04-29 966
chart为图表组件，用于呈现线形图、柱状图和量规图界面。
鸿蒙os编码_如何看待鸿蒙OS代码示例?
weixin_32257101的博客
12-24 288
首先，DependentLayout.LayoutConfig xxx = new DependentLayout.LayoutConfig(xxx)这是啥？？原谅我Java写的不多，不过我觉得这句代码不应该是LayoutConfig xxx = new DependentLayout.LayoutConfig(xxx)吗？类型名有DependentLayout.LayoutConfig这样调用的...
鸿蒙应用开发例子程序
10-18
鸿蒙应用开发例子程序，一个简单的入门例子，通过xml布局，java代码开发。详细说明请看https://blog.csdn.net/xgw1010/article/details/109107834
ArkUI 组件
DN三叶草的博客
12-03 1824
组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。在ArkUI中，还支持多种布局方式，如Flex布局、Grid布局等。同时，为了提升用户体验，ArkUI还提供了丰富的动画效果和自定义动画能力。此外，ArkUI还支持多种绘制能力，以满足开发者绘制自定义形状的需求，支持图形绘制、颜色填充、文本绘制
鸿蒙代码全部开源，一起来写个 Demo 呗！
热门推荐
程序员吴师兄的博客
09-19 1万+
点击上方“五分钟学算法”，选择“星标”公众号重磅干货，第一时间送达鸿蒙2.0终于来了！1第三极操作系统9月10日，余承东在华为开发者大会2020上宣布，鸿蒙2.0（HarmonyOS ...
ArkUI 组件参数、属性、事件、子组件配置了解
JOJOYYDSA的博客
12-29 870
鸿蒙方舟开发框架ArkUI
HarmonyOS ArkUI常用布局及组件库介绍
weixin_44640245的博客
01-03 1619
HarmonyOS ArkUI常用布局及组件库介绍
HarmonyOS4.0 ArkUI组件
二十多岁的你迷茫又着急，想要车子，想要房子，想要享受旅行，你那么浮躁，拿什么看透人生！
11-30 997
HarmonyOS 4.0 ArkUI基础组件：Text（文本）、Image（图片）、TextInput（文本输入）、Button（按钮）、LoadingProgress（加载进度）
第五篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例：ArkUI 组件库常用布局方式
jackchuanqi的博客
01-26 1175
ArkUI 是 ArkTS 框架中的一个UI组件库，提供了多种布局方式来帮助开发者构建灵活和美观的界面。以下是 ArkUI 中常用的布局方式：Flex 布局：ArkUI 的 Flex 布局使用 FlexContainer 和 FlexItem 组件来实现。FlexContainer 用于创建一个容器，其中的子元素按照水平或垂直方向排列，并根据设置的比例自动调整大小。FlexItem 用于定义 FlexContainer 中的子元素，可以设置元素的大小、对齐方式和伸缩性等属性。
鸿蒙开发技术点案列示例—图形引擎服务场景化接口示例代码
m0_70749039的博客
05-31 433
图形引擎服务场景化接口示例代码演示了如何调用SceneView、ARView和FaceView进行图形渲染。
掌握OpenHarmony的ArkTS自定义组件开发指南
- 开发OpenHarmony应用需要特定的开发环境和工具，例如DevEco Studio，这是一个专门为HarmonyOS和OpenHarmony应用开发提供的集成开发环境（IDE），集成了代码编辑、项目构建、应用调试等功能。 12. 资源和权限管理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值