网站首页 > 知识剖析 正文
anchors(锚)是一种指定元素与其他元素位置关系的方法。
anchors属性又可以分为AnchorLine、Margin和Offset三个部分。
1.AnchorLine是anchors指定位置关系的基础,AnchorLine有top、bottom、
left、right、horizontalCenter、verticalCenter和baseline七条。
从图上看很直观,前六条线分别是元素的四条边外加水平居中线和垂直居中线。baseline是相对于文字而言的。
知道了有这么多条AnchorLine,那么又该如何使用呢?
AnchorLine属性的值也是AnchorLine,换句话说就是用元素的AnchorLine和另一个元素的AnchorLine去对齐。
例如a设置了anchors.left为b的left就表示a的左边和b的左边对齐。
2.margin可以作为AnchorLine的补充,分为topMargin、bottomMargin、leftMargin和rightMargin。分别表示上下左右四个方向的边距。也可以用margins一次性设置四个方向的边距。margin的取值是浮点型。
接上一个例子:
3. 之前说AnchorLine有七条,可以margin只有四个,那另外三种AnchorLine怎么进一步调整位置呢?
答案就是使用Offset。horizontalCenterOffset、verticalCenterOffset和baselineOffset,从名字就可以看出分别对应水平居中、垂直居中和baseline。
例:
4.除了以上对齐方式,anchors还有两个特殊的属性,anchors.fill和anchors.centerIn,分别表示填满元素和在元素中居中。两个属性的取值是Item(元素)
示例:
centerIn的效果和同时使用水平居中和垂直居中对齐是一样的,有兴趣可以试一试。
---> 文章来源于我的个人博客:fearlazy
---> 编程是一件怎么也学不会的事情,但是如果能享受学习的过程也是挺好的。
- 上一篇: 超优秀 仿B站蒙版弹幕组件Barrage-UI
- 下一篇: 一文讲解HTML元素类型
猜你喜欢
- 2024-11-22 UI: 为啥你这个页面边框1px看起来这么粗?
- 2024-11-22 开源推荐!一款支持pc端&移动端的滑动验证码组件
- 2024-11-22 Android 约束布局
- 2024-11-22 Android常用布局总结之(LinearLayout、GridLayout等4种)
- 2024-11-22 Visual Studio跨平台开发实战(4):Xamarin Android控制项介绍
- 2024-11-22 开源版SearchGPT来了,两张3090就可复现,超越Perplexity付费版
- 2024-11-22 不得不佩服,美观小巧的网页内容编辑器——ContentTools
- 2024-11-22 HTML中一些常见的特殊标签样式属性
- 2024-11-22 4.10「HarmonyOS鸿蒙开发」自定义布局
- 2024-11-22 NBA勇士队的五个历史荣誉,你见证过几个?揭晓勇士队的球队文化
- 05-14HTML5教程从《HTML+CSS基础课程》学习笔记中的技巧
- 05-14HTML 简介
- 05-14豆包给我输出的html在线象棋源码(有点简单)
- 05-14零基础学习HTML之html框架内嵌框架和head头信息设置
- 05-14nodejs搭建服务器显示静态html页面
- 05-14一个简单的个人网站模板
- 05-14DinkToPdf: .Net轻松搞定Html转PDF生成,几分钟上手!
- 05-148行代码实现一个websoket
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)