获得徽章 9
- 一、线性布局
概括：按垂直或水平方向顺序排列子视图。
核心机制：通过orientation设置方向。layout_weight权重属性按比例分配剩余空间，如两个子视图均设weight="1"则平分空间。gravity控制整体对齐，layout_gravity控制单个子视图位置。
应用场景：登录表单垂直排列、工具栏按钮水平排列。
---
二、相对布局
概括：通过子视图之间或与父容器的相对关系定位。
核心机制：通过layout_toLeftOf、layout_above等属性建立兄弟视图约束；通过layout_alignParentTop、layout_centerInParent等对齐父容器。所有约束需通过@id引用其他视图，且被引用视图需先定义。
应用场景：标题栏（返回按钮居左、标题居中）、表单页标签与输入框对齐。
---
三、帧布局
概括：子视图默认堆叠在左上角，后添加的覆盖在先添加的上方。
核心机制：利用堆叠特性实现图层效果。通过layout_gravity控制子视图位置（如居中、底部），这是唯一的定位方式。支持foreground属性在所有子视图之上绘制固定前景。
应用场景：Fragment容器、启动页（背景+居中Logo+底部进度条）、图片文字水印。
---
四、表格布局
概括：以行和列的形式组织子视图，类似HTML表格。
核心机制：使用<TableRow>定义行，行内子视图自动成为列。stretchColumns指定拉伸列，shrinkColumns指定收缩列，collapseColumns隐藏列。通过layout_span实现跨列。表格布局本身是LinearLayout子类，支持在根节点设置列控制属性。
应用场景：设置页面多行多列配置、计算器按钮网格、对齐的多列输入项。
---
五、总结
四种布局各有侧重：
· 线性布局：适合简单线性排列和等分需求
· 相对布局：适合视图间存在依赖关系的界面
· 帧布局：适合图层叠加和Fragment容器场景
· 表格布局：适合规则的行列结构界面（虽常被GridLayout或RecyclerView替代，但在简单表格场景中仍有简洁性）
以下是示例图
1是线性布局
2是相对布局
3、4是帧布局
5、6是表格布局展开评论3 - 2020年9月18日，vue3正式版发布了，前几天把文档整体读了一遍，感触很深，可以解决我项目中的一些痛点，于是就决定重构之前那个vue2的开源项目。
本篇文章就记录下重构vue2项目的过程，欢迎各位感兴趣的开发者阅读本文。14 - TypeScript 从入门到实践系列，一共五篇，希望能帮助你在学习 TypeScript 的路上走得更加稳一点
210 - 近期比较火爆的vue前端框架分享
vue-admin-beautiful 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型，它集合了layuiAdmin，antDesign Pro，vue-element-admin几乎全部的优点，并同时发布了多个版本，这不是一个重复的轮子，这可能是一个好看的重复轮子```bash# 克隆项目git clone
github.com 进入项目目录cd vue-element-admin-beautiful# 安装依赖cnpm i# 本地开发 启动项目npm run serve```
默认版演示地址：mpfhrd48.sanxing.uz7.cn
传统中后台演示地址：mpfhrd48.sanxing.uz7.cn
github永久免费开源地址：github.com 展开675 - 2981
![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
codepen.io