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

    文章

    512

    浏览量

    17839
  • 鸿蒙
    +关注

    关注

    57

    文章

    2358

    浏览量

    42876
收藏 人收藏

    评论

    相关推荐

    使用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 1244次阅读

    鸿蒙ArkTS容器组件:Flex

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

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

    平级导航的复合网格视图常出现在同时展示多种不同内容的界面。
    的头像 发表于 05-17 11:19 463次阅读
    <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 775次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发:<b class='flag-5'>常用布局</b>【创建网格(Grid/GridItem)】

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

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

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

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

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

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

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

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

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

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

    鸿蒙ArkUI开发-Tabs组件的使用

    鸿蒙ArkUI开发-Tabs组件的使用
    的头像 发表于 01-19 16:01 1927次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkUI</b>开发-Tabs<b class='flag-5'>组件</b>的使用

    鸿蒙开发实战-(ArkUI)List组件和Grid组件的使用

    一系列相同宽度的列表项,连续、多行呈现同类数据,例如图片和文本。常见的列表有线性列表(List列表)和网格布局(Grid列表): 为了帮助开发者构建包含列表的应用,ArkUI提供了List组件和Grid
    发表于 01-18 20:18

    鸿蒙NEXT-Column和Row组件的使用

    1 概述 一个丰富的页面需要很多组件组成,那么,我们如何才能让这些组件有条不紊地在页面上布局呢?这就需要借助容器组件来实现。
    发表于 01-18 16:44