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

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

3天内不再提示

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

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-05-14 09:23 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

弹性布局方向图

Flex({ direction: FlexDirection.Row })

image.png

  1. FlexDirection.Row(默认值):主轴为水平方向,子组件从起始端沿着水平方向开始排布
  2. FlexDirection.RowReverse:主轴为水平方向,子组件从终点端沿着FlexDirection. Row相反的方向开始排布
  3. FlexDirection.Column:主轴为垂直方向,子组件从起始端沿着垂直方向开始排布
  4. FlexDirection.ColumnReverse:主轴为垂直方向,子组件从终点端沿着FlexDirection. Column相反的方向开始排布
  5. 开发前请熟悉鸿蒙开发指导文档:[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

主轴为水平方向的Flex容器示意图

image.png

审核编辑 黄宇

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

    关注

    60

    文章

    2862

    浏览量

    45365
收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    【HarmonyOS 5】鸿蒙中常见的标题栏布局方案

    【HarmonyOS 5】鸿蒙中常见的标题栏布局方案 ##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 (金融理财
    的头像 发表于 07-11 18:30 655次阅读
    【HarmonyOS 5】<b class='flag-5'>鸿蒙</b>中常见的标题栏<b class='flag-5'>布局</b>方案

    【汇思博SEEK100开发板试用体验】03 简约风天气APP开发--首页UI布局及组件介绍

    布局弹性布局等,那些暂时用不到。 线性布局(LinearLayout)是开发中最常用
    发表于 07-08 13:32

    【HarmonyOS next】ArkUI-X新闻热搜聚合App【进阶】

    通过ArkUI-X将鸿蒙下的新闻热搜聚合App转换为iOS 一、项目背景与技术选型 1.1 项目概述 本案例基于鸿蒙(HarmonyOS)开发的聚合热搜热榜应用,通过调用韩小韩博客提供
    发表于 06-28 21:43

    【HarmonyOS next】ArkUI-X休闲益智儿童拼图【进阶】

    项目,我们验证了ArkUI-X框架的强大跨端能力。无论是华为的鸿蒙系统,还是iOS平台,都能保持90%以上代码复用率,真正实现了\"一次开发,多端部署\"的理想状态。期待
    发表于 06-28 21:41

    HarmonyOS NEXT应用元服务布局优化利用布局边界减少布局计算

    对于组件的宽高不需要自适应的情况下,建议在UI描述时给定组件的宽高数值,当其组件外部的容器尺寸发生变化时,例如拖拽缩放等场景下,如果组件本身的宽高是固定的,理论上来讲,该组件在布局阶段不会参与
    发表于 06-26 11:13

    HarmonyOS NEXT应用元服务布局优化精简节点数

    建议开发者优先使用Code Linter扫描工具进行代码检查,重点关注@performance/hp-arkui-remove-container-without-property规则。若扫描结果
    发表于 06-26 10:21

    HarmonyOS NEXT应用元服务布局优化精简节点数

    建议开发者优先使用Code Linter扫描工具进行代码检查,重点关注@performance/hp-arkui-remove-container-without-property规则。若扫描结果
    发表于 06-26 10:21

    网格布局介绍

    设置rowsTemplate或仅设置columnsTemplate属性,网格单元按照设置的方向排列,超出Grid显示区域后,Grid拥有可滚动能力。 9 横向可滚动网格布局 如果设置
    发表于 06-25 06:27

    UI开发概述

    。- 基本语法 - 状态管理 - 渲染控制 开发布局介绍了几种常用布局方式。- 常用布局 添加组件介绍了几种常用的内置组件、自定义组件以及
    发表于 06-24 06:36

    HarmonyOS NEXT应用元服务布局优化ArkUI框架执行流程

    一、 ArkUI框架执行流程 在使用ArkUI开发中,我们通过布局组件和基础组件进行界面描述,这些描述会呈现出一个组件树的结构,基础组件在其中为叶子结点,
    发表于 06-23 09:41

    HarmonyOS NEXT应用元服务布局合理使用布局组件

    布的组件是按照特定的方向线性放置,如横向/纵向/Z序方向。除上述布局类型外,还有一些复杂布局能力,如Flex、List、Grid、RelativeContainer和自定义
    发表于 06-20 15:48

    鸿蒙5开发宝藏案例分享---性能体验设计

    ;性能优化\"关键词! **如果大家在实战中遇到卡顿难题,欢迎在评论区交流~ 也欢迎关注我,后续会持续分享鸿蒙开发实战技巧! **✨ 希望这篇接地气的总结能帮你避开性能深坑!如果觉得有用,记得点赞收藏哟 ? 下期见!
    发表于 06-12 16:45

    鸿蒙Next实现瀑布流布局

    鸿蒙开发环境。打开 DevEco Studio,新建一个鸿蒙应用项目,选择合适的模板(如 Empty Feature Ability),设置项目名称、包名等信息,完成项目创建。 ## 二、
    发表于 06-10 14:17

    鸿蒙5开发宝藏案例分享---一多开发实例(图片美化)

    ?【鸿蒙开发宝藏案例分享】一次搞定多端适配的图片美化应用开发思路!? Hey小伙伴们~ 今天在翻鸿蒙文档时挖到一个超实用的大宝藏!原来官方早就悄悄提供了超多\"一多
    发表于 06-03 16:09

    鸿蒙5开发宝藏案例分享---一多开发实例(长视频)

    ;) 看完是不是觉得鸿蒙的\"一多开发\"也没那么玄乎?其实只要掌握自适应布局+模块化设计,一套代码征服多设备真的可以轻松实现!大家在开发中还遇到过哪些头秃的适配问题?欢迎在评论区开聊
    发表于 06-03 15:58