鸿蒙开发学习——容器组件介绍

这篇具有很好参考价值的文章主要介绍了鸿蒙开发学习——容器组件介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

引言

  • 在完成自己的应用过程中,发现自己需要调整登录界面的布局,但是并不是很清楚如何调整,所以需要了解一下登录界面是如何调整元素的。通过学习发现,登录界面的容器组建,就像html中的盒子,整个网页就是由若干个盒子构成。
  • 在这里结合自己修改的登录界面好好学习修改一下。
  • 最终通过padding修改,并不是组件对齐的方式

正文

  • 下述为分布图之后的登陆界面,具体结构如下

鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

  • 个人总觉得上面的页面还有以下一些问题
    • 底部的row和底部相距太近
    • 最下面的“其他登陆方式”太靠近底部,需要往上移动
    • 最上面的image需要往上移动

容器组件基础学习

  • 主要有两个容器,分别是row和column,具体如下
    • Column表示沿垂直方向布局的容器。
    • Row表示沿水平方向布局的容器。
容器的主轴和交叉轴
  • 容器里面的主轴是容器里面的组件排列的方式,交叉轴是控制另外一个方向的,两个轴构成了一个坐标,决定容器中组件的位置。

鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

容器的属性
属性名称 描述
justifyContent 设置子组件在主轴方向上的对齐格式。
alignItems 设置子组件在交叉轴方向上的对齐格式。

下述为主轴的对齐方式

  • 需要调用FlexAlign类型的数据,分别是start、center、end等,具体见下图
    鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习
  • 不同属性应用在app的效果如下

Start
鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

center
鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习
end
鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习
SpaceBetween

鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

SpaceAround

鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习
鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

SpaceEvenly

鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

  • 不是很懂,为什么一点效果都没有,不过不影响,知道通过padding进行调整了。

下述为交叉轴对应方向
Column交叉轴属性

  • start:确实会让组中的元素都往左侧偏移
    鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习
    鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

  • end: 所有组件都是沿着交叉轴线便偏移
    鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习
    鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

  • center:
    鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

row

鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习

鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习
鸿蒙开发 主轴 交叉轴,鸿蒙开发,学习文章来源地址https://www.toymoban.com/news/detail-819577.html

总结

  • 总的来说变化的并不大,因为这个登陆界面不仅仅只有这一种对齐方式的标定位置的方式,还有很多,每一个组件都定义了margin属性、长宽等属性,所以就算设置了不同的属性,他的效果也不好,除非是应用在不同的设备中,基于像素的定位方式并不是那么有效。

到了这里,关于鸿蒙开发学习——容器组件介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:List)

    列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据,例如图片和文本。 说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 该组件内容区小于一屏时,默认没有回弹效果。需要回弹效果,可以通过edgeEffe

    2024年04月13日
    浏览(108)
  • 鸿蒙开发实战项目(六十七):常见组件和容器低代码开发示例(ArkTS)

    本文 详细代码 需订阅下面专栏获取(订阅后私信邮箱+项目名): https://blog.csdn.net/m0_68036862/category_12333038.html 目录 介绍 环境搭建 代码结构解读 创建低代码工程

    2024年02月21日
    浏览(44)
  • 鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:UIExtensionComponent (系统接口))

    UIExtensionComponent用于支持在本页面内嵌入其他应用提供的UI。展示的内容在另外一个进程中运行,本应用并不参与其中的布局和渲染。 通常用于有进程隔离诉求的模块化开发场景。 说明: 该组件从API Version 10开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的

    2024年04月13日
    浏览(48)
  • 【鸿蒙软件开发】ArkUI之容器组件Counter(计数器组件)、Flex(弹性布局)

    Counter容器组件:计数器组件,提供相应的增加或者减少的计数操作。 Flex容器组件:以弹性方式布局子组件的容器组件。 计数器组件,提供相应的增加或者减少的计数操作。 说明 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本

    2024年02月06日
    浏览(46)
  • 鸿蒙开发|鸿蒙系统的介绍(为什么要学习鸿蒙开发|鸿蒙系统的官方定义|鸿蒙和安卓、ios的对比)

    鸿蒙开发学习是一项探索性的工作,旨在开发一个全场景分布式操作系统,覆盖所有设备,让消费者能够更方便、更直观地使用各种设备。 鸿蒙系统定位为面向未来、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统。它通过分布式技术,将各种

    2024年01月15日
    浏览(41)
  • 【微信小程序 | 实战开发】常用的视图容器类组件介绍和使用(1)

    个人名片: 🐼 作者简介:一名大二在校生,喜欢编程🎋 🐻‍❄️ 个人主页🥇: 小新爱学习. 🐼 个人WeChat:hmmwx53 🕊️ 系列专栏:🖼️ 零基础学Java——小白入门必备 重识C语言——复习回顾

    2024年02月02日
    浏览(57)
  • 鸿蒙开发:UIAbility组件间交互探索实战【鸿蒙专栏-22】

    在设备内,UIAbility(用户界面能力)是系统调度的最小单元,它们负责展示用户界面和执行相关的业务逻辑。设备内的不同功能模块之间的交互是应用程序开发中的重要部分。本文将探讨设备内UIAbility之间的交互方式,包括启动应用内的UIAbility、启动其他应用的UIAbility以及通

    2024年02月05日
    浏览(41)
  • 鸿蒙开发-UI-组件

    鸿蒙开发-序言 鸿蒙开发-工具 鸿蒙开发-初体验 鸿蒙开发-运行机制 鸿蒙开发-运行机制-Stage模型 鸿蒙开发-UI 文章目录 前言 一、自定义组件 1.自定义组件基本结构 2.自定义组件参数 3.build()函数 4.自定义组件的通用样式 二、页面和自定义组件生命周期 1.页面 2.组件生命周期

    2024年01月17日
    浏览(40)
  • 鸿蒙开发OpenHarmony组件复用案例

    在开发应用时,有些场景下的自定义组件具有相同的组件布局结构,仅有状态变量等承载数据的差异。这样的组件缓存起来,需要使用到该组件时直接复用, 减少重复创建和渲染的时间,从而提高应用页面的加载速度和响应速度。 在OpenHarmony应用开发时,自定义组件被@Reus

    2024年01月19日
    浏览(67)
  • 鸿蒙开发之页面与组件生命周期

    创建文件的时候记得选择创建page文件,这样就可以在main-resources-profile-main_pages.json中自动形成页面对应的路由了。如果创建的时候你选择了ArkTS文件,那么需要手动修改main_pages.json文件中,添加相应的键值对。 在json文件中我们看到第二个页面的路由是\\\"pages/Page222\\\"。那么,我们

    2024年02月04日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包