深入了解uniapp布局

Uniapp是一个开放、跨平台的移动应用开发框架，可以支持以Vue.js为基础进行开发，同时支持多个平台，如iOS、Android、H5等。在开发uniapp应用时，了解并掌握uniapp的布局方式是很重要的。

一、绝对定位布局

绝对定位布局是在一个元素相对于其包含元素的位置进行定位。在uniapp中，提供了 uni-position、uni-rel 和 uni-abs 三种定位类名，其中 uni-position 用于通过相对定位来布局元素，而 uni-rel 和 uni-abs 用于实现绝对定位布局。

1、使用uni-rel类名

<div class="demo">
  <div class="box box1 uni-rel">1</div>
  <div class="box box2 uni-rel">2</div>
  <div class="box box3 uni-rel">3</div>
</div>

上述的代码中，我们使用了 uni-rel 类名来实现容器内元素的相对定位。通过相对定位，可以控制元素之间的位置关系，实现更为灵活的布局方式。

2、使用uni-abs类名

<div class="demo">
  <div class="box box1 uni-rel">1</div>
  <div class="box box2 uni-abs top:0 left:0">2</div>
  <div class="box box3 uni-abs top:0 right:0">3</div>
</div>

使用 uni-abs 类名可以实现元素的绝对定位，该元素的位置相对于最近的具有定位属性的父级元素。通过修改元素的top、left、bottom、right属性，可以实现元素精准的定位。

二、Flex弹性布局

Flex弹性布局中容器的子元素会自动排列，并根据自身的伸缩性以及排列方向进行排列。在uniapp中，我们可以使用 uni-hairline--top、uni-hairline--bottom、uni-hairline--left、uni-hairline--right、uni-hairline--surround等类名来实现边框的绘制。

1、使用flex-direction决定容器子元素的排列方向

<div class="demo-flex">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>

.demo-flex{
  display: flex;
  flex-direction: row;
}
.box{
  width: 100px;
  height: 100px;
  background-color: #999;
  margin-right: 10px;
  border: 1px solid #000;
}

在上述的代码中，我们将容器设置了display: flex;，并通过设置 flex-direction: row;，决定了容器子元素在主轴上的排列方向为从左到右。

2、使用justify-content实现容器内元素的对齐

<div class="demo-flex">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
</div>

.demo-flex{
  display: flex;
  justify-content: center;
}
.box{
  width: 100px;
  height: 100px;
  background-color: #999;
  margin-right: 10px;
  border: 1px solid #000;
}

使用 justify-content 属性，可以实现容器内元素的对齐方式。在上述代码中，我们将容器内的元素在水平方向上居中对齐。

三、Grid栅格布局

Grid栅格布局，是将页面划分为N行M列的网格，通过设置元素所占据的列数或行数，控制元素在网格中占据的位置。在uniapp中，可以使用 uni-grid 类名来实现栅格布局。

1、使用uni-grid类名创建栅格容器

<div class="demo">
  <div class="box item1 uni-grid col-1 row-1">1</div>
  <div class="box item2 uni-grid col-2 row-1">2</div>
  <div class="box item3 uni-grid col-1 row-2">3</div>
  <div class="box item4 uni-grid col-2 row-2">4</div>
</div>

.demo{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.box{
  background-color: #999;
  border: 1px solid #000;
}

上述代码中，我们使用 uni-grid 和 col-x/row-x 类名来定义栅格容器和元素在网格中的位置。同时，我们也可以通过设置grid-template-columns、grid-template-rows等属性来控制栅格的列数和行数。

2、使用uni-grid-area属性设置元素在网格中的位置

<div class="demo">
  <div class="box item1 uni-grid-area 1 / 1 / 2 / 2">1</div>
  <div class="box item2 uni-grid-area 1 / 2 / 2 / 3">2</div>
  <div class="box item3 uni-grid-area 2 / 1 / 3 / 2">3</div>
  <div class="box item4 uni-grid-area 2 / 2 / 3 / 3">4</div>
</div>

.demo{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.box{
  background-color: #999;
  border: 1px solid #000;
}

在代码中，我们使用 uni-grid-area 属性，配合网格中元素所占据的行列数，来控制元素在栅格容器中的位置。使用该属性可以让栅格布局更加灵活和精细。

四、总结

本文介绍了uniapp布局的三种方法：绝对定位布局、Flex弹性布局和Grid栅格布局。其中，每一种布局都有其优劣之处，需要开发者们根据实际情况进行选择。在实际开发中，可以将多种布局方式组合使用，实现更为灵活和细致的页面效果。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/155437.html