第9天 | 鸿蒙App开发实战，XML创建布局，共性很重要
xsobi 2025-01-11 18:16 1 浏览
XML声明布局的方式更加简便直观，是开发App的核心内容之一，咱们完全有必要搞清楚。每一个Component和ComponentContainer对象大部分属性都支持在XML中进行设置，它们有各自的XML属性，也有共同的属性。
这一节说一下组件共同的属性，至于有"个性"的内容，在介绍具体组件时，再详细讲解。所有组件都有的属性，如下：
- ID
ohos:id="$+id:text"组件唯一编号，可用于区分不同的组件。尤其在DependentLayout布局中，组件之间需要描述相对位置关系，描述时要通过ID来指定对应组件。
在Java类中，是通过组件ID，查找组件的，如果ID名相同，会返回第一个组件，因此你要保证ID的唯一性，避免出现与预期不符合的问题。
2. 布局参数
为必选属性，值可为数字，也可为match_parent等。
ohos:width="20vp"
ohos:height="10vp"具体的数值：10（以像素为单位）、10vp（以屏幕相对像素为单位）。
match_parent：表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小；
match_content：表示组件大小与它的内容占据的大小范围相适应。
ohos:min_width="10vp"
ohos:min_height="8vp"min_width用于调整组件的最小宽度，min_height用于调整组件的最高度。
3. 前景背景
值可为图片，也可以为颜色值。
ohos:background_element="$media:bg"
ohos:foreground_element="#FFFFFF"找一张背景图，放到media目录下，并在ability_main.xml文件中进行引用，运行虚拟机之后，效果如下：
4. 边距
外边距：清除周围的（外边框）元素区域，没有背景颜色，是完全透明的。
ohos:margin="10vp"margin 可以一次性改变所有上下左右的外边距。如果要单独设置某个外边距，可用如下中的一个或多个。
ohos:top_margin="10vp"
ohos:bottom_margin="10vp"
ohos:left_margin="10vp"
ohos:right_margin="10vp"内边距：用于在任何定义的边界内的元素内容周围生成空间。
ohos:padding="8vp"padding可以一次性改变所有上下左右的内边距。如果要单独设置某个内边距，可用如下中的一个或多个。
ohos:top_padding="8vp"
ohos:bottom_padding="8vp"
ohos:left_padding="8vp"
ohos:right_padding="8vp"外边距和内边距的示意图如下所示：
好了，组件共性说完了，关注我，下一节更精彩。学开发鸿蒙App，不是每个人都能找到这里的，恭喜你找到了老陈。一个当了10多年技术总监的老家伙，总爱在今日头条@老陈说编程上，分享Python、Java和App(Android、iOS和鸿蒙)方面的干货。关注我，你就赚翻了
相关推荐
- bootstrap入门
-
bootstrap是一个前端ui框架，它把我们网页开发常用的功能都写好了，我们使用它可以像搭积木一样的轻松的开发网站，不过现在都流行前后端分析了，而且layui也比较好用，个人觉得无论哪个ui框架，我...
- BootStrap简介及应用要点
-
BootStrap简介BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架，他是后端程序员的福音，使它们只需要专注业务逻辑，...
- 如何在Bootstrap Studio中使用图标字体?
-
BootstrapStudioforMac是一款网站设计制作工具，图标字体类似于普通的Web字体，但是它们包含矢量形状，而不是字母和数字。那么如何在BootstrapStudio中使用图标字体...
- Bootstrap5.0-全球流行的前端开源UI工具包迎来了大版本更新
-
Bootstrap5.0正式发布了，带来了很多亮点，还学得动吗？Bootstrap介绍...
- BootstrapBlazor 模板适配移动设备使用笔记
-
项目模板BootstrapBlazorApp模板为了方便大家利用这套组件快速搭建项目，作者制作了项目模板（ProjectTemplates），使用dotnetnew命令行模式，使用步骤...
- bootstrap的tab标签页的使用
-
标签tab页在，当前的web中应用十分广泛，君不见，在博客的右侧出现的最新文章和随机文章中有它的身影，在大型门户网站中也有它的身影，可以说其无处不在的刷着存在感。既然其如此嚣张的存在，我们没有理由不应...
- 使用 Bootstrap 的最简单方法 - 让你的 HTML 看起来赏心悦目
-
什么是BootstrapBootstrap是一个免费的开源CSS框架，使得前端Web开发变得更加简单。...
- Bootstrap-table 使用总结
-
一、什么是Bootstrap-table？在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这...
- 建议收藏:哪些电子发票有XML格式?
-
报销时，财务要求提供发票XML格式。但不是所有的电子发票都有哦，目前只有数电发票（全面数字化的电子发票）有XML格式！目前的数电发票有下面这几大类：1、电子发票（增值税专用发票）：适用于增值税一般纳税...
- Mybatis中mapper的xml解析详解
-
上一篇文章分析了mapper注解关键类MapperAnnotationBuilder，今天来看mapper的项目了解析关键类XMLMapperBuilder。基础介绍回顾下之前是在分析configur...
- word修改文中任意一处文字，其他地方相同的内容自动修改
-
我们工作写方案处理word的时候，经常会遇到这么一种情况，即文中存在多处相同的文字内容，可能是词语，也可能是段落。当我们修改了其中一处后，其他地方还得手动修改，十分不便。今天给大家分享一下，在word...
- 第9天 | 鸿蒙App开发实战，XML创建布局，共性很重要
-
XML声明布局的方式更加简便直观，是开发App的核心内容之一，咱们完全有必要搞清楚。每一个Component和ComponentContainer对象大部分属性都支持在XML中进行设置，它们有各自的X...
- 可扩展标记语言格式XML
-
1，XML（eXtensibleMarkupLanguage）：指可扩展标记语言，一种数据表示格式，被设计用来传输和存储数据，不用于表现和展示数据。2，XML和基于XML的语言的整个结构是...
- 比较一下JSON与XML两种数据格式?
-
JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...
- PROFINET工业以太网教程(16)-GSDML文件详解
-
前面的文章（PROFINET工业以太网教程(10)——GSD文件）我们介绍过GSD文件，它的全称是“GeneralStationDescription”，中文翻译为“通用站描述文件”。GSD文件的...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- dedecms模版 (53)
- c 视频教程下载 (33)
- listview排序 (33)
- firebug 使用 (31)
- characterencodingfilter (33)
- getmonth (34)
- hibernate教程 (31)
- label换行 (33)
- curlpost (31)
- android studio 3 0 (34)
- android应用开发 (31)
- html转js (35)
- 索引的作用 (33)
- checkedlistbox (34)
- localhost 8080 (32)
- 多态 (32)
- xmlhttp (35)
- mysql更改密码 (34)