【愚公系列】《微信小程序与云开发从入门到实践》015-组件的布局

🚀前言

在微信小程序的开发过程中，组件布局是构建用户界面的核心要素之一。合理的布局不仅能提升界面的美观性，更能显著增强用户体验。随着小程序功能的不断丰富，布局的灵活性和适应性变得尤为重要。本篇文章将重点探讨微信小程序中组件的布局方式，包括常用的布局模型、布局技巧以及在实际开发中的应用实例。

无论是简单的静态页面，还是复杂的动态交互，掌握布局的基本原则和技巧都将帮助开发者更高效地实现设计目标。我们将介绍如何使用微信小程序提供的各类布局组件，结合具体示例，深入分析如何创建响应式、易于维护的布局结构。

无论你是刚入门的小程序开发者，还是希望提升开发水平的资深工程师，这篇文章都将为你提供实用的指导和灵感。让我们一起探索微信小程序组件的布局之道，打造出更加优雅和高效的小程序应用吧！

🚀一、组件的布局

目前为止，已经接触了不少容器组件，这些容器组件本身非常简单，掌握起来也很容易。但是对于任意一个小程序页面的开发工作，你真能够游刃有余地完成么?页面开发的最大挑战是能够让组件完全按照开发者的意愿布局在正确的位置以及渲染出正确的尺寸，定位和尺寸的控制是页面开发中最重要的技能。

本节将综合介绍WXSS中支持的布局方式，如这些布局方式是如何使用的、布局原理是怎样的。本节的内容对于页面开发来说至关重要，相信通过本节的学习，以后面对任何复杂的小程序页面你都会有清晰的布局思路。

🔎1.布局的两个重要概念

🦋1.1 布局中的定位与尺寸

定位和尺寸是布局技术中的两个重要概念。定位决定了一个元素应该出现在哪里，尺寸决定了一个元素的大小。

☀️1.1.1 定位

谈到定位，首先需要了解的是样式表中的 position 属性。position 属性的值可以设置为以下几种类型，每种类型表示不同的定位模型：

• static：静态定位，组件将正常生成元素框，作为文档流的一部分。默认值。
• relative：相对定位，元素框会相对正常文档流中的位置发生偏移，偏移量通过 top、right、bottom、left 属性设置。
• absolute：绝对定位，元素框不再占有文档流中的位置，将相对于页面进行绝对定位。
• fixed：固定定位，元素框不再占有文档流中的位置，将相对于浏览器窗口进行绝对定位，滚动页面时元素位置不变。
• sticky：黏性定位，元素通常表现为 relative 定位，但当滚动超过指定阈值时，元素将变为 fixed 定位。常用于固定在视口顶部的导航条。
• inherit：继承父元素的 position 属性。

☀️1.1.2 定位的使用

• static 定位意味着元素在文档流中按照正常顺序排列，且不受 top、right、bottom、left 属性影响。
• relative 定位使元素相对其原始位置偏移，原始位置仍占据空间。
• absolute 定位使元素脱离文档流，相对于最近的已定位的父元素（不是 static 定位的元素）进行定位。
• fixed 定位使元素脱离文档流，相对于浏览器窗口进行定位，滚动页面时元素保持固定。
• sticky 定位则让元素在滚动时可以在某个阈值处“粘住”，直到滚动超过设定的阈值时变为 fixed 定位。

☀️1.1.3 影响定位的关键属性

• float：控制元素脱离文档流并成为浮动元素，但由于其有许多局限性，现代网页设计中已很少使用。
• display：用来设置元素生成的框类型，常用于布局中，特别是在弹性盒模型（Flexbox）中，display 属性设置为 flex，帮助实现灵活的布局。

☀️1.1.4 尺寸设置

在设置元素的尺寸时，可以采用相对单位（如百分比）或绝对数值的方式。需要注意的是，一个完整的元素框的尺寸不仅包括内容区，还包括：

• 外边距（margin）
• 边框（border）
• 内边距（padding）
• 内容区（content）

这些部分合起来，构成了一个元素的总尺寸。理解了盒模型的布局原理后，我们可以更精准地控制元素的尺寸。

🦋2.1 盒模型

理解布局的盒模型原理是设置元素尺寸的基础。盒模型描述了元素的结构，包括：

• 内容区：实际显示内容的位置。
• 内边距（padding）：内容与边框之间的空间。
• 边框（border）：环绕元素内容的边框。
• 外边距（margin）：元素与其他元素之间的空间。

盒模型的原理决定了如何计算元素的实际尺寸，尤其是在使用 box-sizing 属性时，是否将内边距和边框包含在元素的总宽度和高度中。

🔎2.几种常用的定位方式

在示例工程的 pages 文件夹下新建一个名为 positionDemo 的页面文件，并编写本节的测试代码。以下示例将介绍不同的定位方式，包括 static、relative、absolute、fixed 和 sticky。

🦋2.1 static 定位

static 是默认的 position 属性值。设置元素为静态定位时，元素按照文档流正常排列。静态定位的元素无法通过 top、left 等属性来偏移。

示例：positionDemo.wxml

<!-- pages/positionDemo/positionDemo.wxml -->
<view class="view1">视图 1</view>
<view class="view2">视图 2</view>
<view class="view3">视图 3</view>
<view class="view4">视图 4</view>

示例：positionDemo.wxss

/* pages/positionDemo/positionDemo.wxss */
.view1 {
   
  background-color: red;
  width: 100px;
  height: 30px;
  color: white;
}

.view2 {
   
  background-color: blue;
  width<