0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙应用布局ArkUI:【其他常用布局容器和组件】介绍

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-05-15 20:22 次阅读

其他常用布局容器和组件

  • 创建轮播(Swiper)实现轮播图功能

开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

image.png

  • 栅格布局(GridRow/GridCol)和Grid布局类似,但是可以根据设置的分割点动态显示列数。特别适合做多设备适配布局

image.png

  • Badge实现消息小红点和消息数功能

image.png

  • WaterFlow实现瀑布流功能

image.png

image.png

  • Web实现加载本地、远程网页功能
  • QRCode实现二维码功能

image.png

  • TextTimer实现倒计时显示功能

image.png

  • DataPanel数据面板组件,使用占比图展示多个数据的占比情况

image.png

  • Gauge以环形图表形式展示数据

image.png

  • Marquee走马灯效果
  • PatternLock图形密码锁组件

image.png

  • Rating评分组件

image.png

  • Stepper步骤导航器组件,主要用于引导介绍功能

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 组件
    +关注

    关注

    1

    文章

    517

    浏览量

    17902
  • 鸿蒙
    +关注

    关注

    57

    文章

    2392

    浏览量

    43008
收藏 人收藏

    评论

    相关推荐

    使用TMUXHS4412多路复用器的PCIe®Gen 4.0应用布局指南

    电子发烧友网站提供《使用TMUXHS4412多路复用器的PCIe®Gen 4.0应用布局指南.pdf》资料免费下载
    发表于 09-14 10:41 0次下载
    使用TMUXHS4412多路复用器的PCIe®Gen 4.0应<b class='flag-5'>用布局</b>指南

    鸿蒙ArkTS容器组件:Scroll

    可滚动的容器组件,当子组件布局尺寸超过父组件的尺寸时,内容可以滚动。
    的头像 发表于 07-12 15:24 1327次阅读

    鸿蒙ArkTS容器组件:Flex

    以弹性方式布局组件容器组件
    的头像 发表于 07-08 10:19 572次阅读
    <b class='flag-5'>鸿蒙</b>ArkTS<b class='flag-5'>容器</b><b class='flag-5'>组件</b>:Flex

    鸿蒙用布局ArkUI【基础运用案例】

    平级导航的复合网格视图常出现在同时展示多种不同内容的界面。
    的头像 发表于 05-17 11:19 505次阅读
    <b class='flag-5'>鸿蒙</b>应<b class='flag-5'>用布局</b><b class='flag-5'>ArkUI</b>【基础运用案例】

    鸿蒙ArkUI开发:常用布局【创建网格(Grid/GridItem)】

    网格布局主要用于处理固定行列的UI,也支持动态调整。很类似iOS中的UICollectionView。
    的头像 发表于 05-15 16:24 839次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发:<b class='flag-5'>常用布局</b>【创建网格(Grid/GridItem)】

    鸿蒙ArkUI开发:常用布局【 创建列表(List)】

    列表容器是为了高效处理长列表的容器,能支持横向、竖向滚动,数据分组,分组头悬浮等功能
    的头像 发表于 05-15 15:30 847次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发:<b class='flag-5'>常用布局</b>【 创建列表(List)】

    鸿蒙ArkUI开发:常用布局【相对布局

    相对布局可以让子元素指定兄弟元素或父容器作为锚点,基于锚点做位置布局
    的头像 发表于 05-14 20:50 646次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发:<b class='flag-5'>常用布局</b>【相对<b class='flag-5'>布局</b>】

    鸿蒙ArkUI开发:常用布局【交叉轴】

    垂直于主轴方向的轴线。Row容器交叉轴为纵向,Column容器交叉轴为横向。
    的头像 发表于 05-14 09:52 663次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发:<b class='flag-5'>常用布局</b>【交叉轴】

    鸿蒙ArkUI开发:常用布局【弹性布局方向图】

    FlexDirection.Row(默认值):主轴为水平方向,子组件从起始端沿着水平方向开始排布
    的头像 发表于 05-14 09:23 406次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发:<b class='flag-5'>常用布局</b>【弹性<b class='flag-5'>布局</b>方向图】

    鸿蒙ArkUI开发:常用布局【主轴】

    线性布局的子元素在线性方向上(水平方向和垂直方向)依次排列
    的头像 发表于 05-13 17:33 901次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发:<b class='flag-5'>常用布局</b>【主轴】

    鸿蒙ArkUI之【如何选择布局?】

    声明式UI提供了以下9种常见布局,开发者可根据实际应用场景选择合适的布局进行页面开发。
    的头像 发表于 05-13 15:37 512次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>之【如何选择<b class='flag-5'>布局</b>?】

    HarmonyOS实战开发-Flex布局性能提升使用指导

    长度分配设置为最常用场景的布局结果,使子组件主轴长度总和等于Flex容器主轴长度。 最后 如果大家觉得这篇内容对学习鸿蒙开发有帮助,我想邀请
    发表于 05-10 14:26

    HarmonyOS开发案例:【常用组件布局

    HarmonyOS ArkUI提供了丰富多样的UI组件,您可以使用这些组件轻松地编写出更加丰富、漂亮的界面。
    的头像 发表于 05-09 18:20 1286次阅读
    HarmonyOS开发案例:【<b class='flag-5'>常用</b><b class='flag-5'>组件</b>与<b class='flag-5'>布局</b>】

    HarmonyOS开发ArkUI案例:【常用布局容器对齐方式】

    基于ArkTS扩展的声明式开发范式,实现Flex、Column、Row和Stack四种常用布局容器对齐方式。
    的头像 发表于 05-08 16:47 1703次阅读
    HarmonyOS开发<b class='flag-5'>ArkUI</b>案例:【<b class='flag-5'>常用布局</b><b class='flag-5'>容器</b>对齐方式】

    鸿蒙ArkUI实例:【自定义组件

    组件是 OpenHarmony 页面最小显示单元,一个页面可由多个组件组合而成,也可只由一个组件组合而成,这些组件可以是ArkUI开发框架自
    的头像 发表于 04-08 10:17 697次阅读