控件布局行

CreatiCode Teacher · 6 Mar 2023, 15:09

简介

在使用按钮或标签等控件时，我们通常希望它们的位置和大小能得到对齐。除了一个一个地找出每一个控件的位置和大小外，还有另一种不同方法可以控制控件的布局。

基本的思路是把整个舞台划分成一或者多“行”，并把它们从上到下地堆叠起来。对于每一行，你可以把它划分成一或者多个“单元”，然后把控件放置在这些单元中。例如，在以下例子中，你可以把舞台划分成2行（蓝色方框），然后把各行划分成2个或者3个单元（红色方框）：

注意，这些行和单元在舞台上是不可见的。它们只是用于计算每一个控件的位置和大小。

要使用新的布局方法，你应该首先添加一个或多个控件（不再需要设置它们的位置或大小了），然后运行以下积木把这些控件放置在一行中：

下面让我们讨论一下各项输入：

第一个输入是用于这一行的可选名称。你通常只需要使用“r1”、“r2”、“r3”等简短名称。

第二个输入是按舞台高度百分比表示的这一行的高度。例如，我们知道舞台的高度通常是360，所以如果“高度”值为50，那么这一行将占据舞台高度的一半，即180。

无论何时运行此积木，新的一行将附加到前一行的下方。例如，你可以运行以下3个积木来把舞台高度划分成3行：

接下来的6个输入让你可以把这一行划分成一个或多个单元。每个数字按该行总宽度的百分比来表示一个单元的宽度。例如，如果你要把一行划分为2个宽度相等的单元，你可以如下图那样输入：

注意，各个宽度数值加起来应该等于100。如果不是的话，它们将按比例增加或缩小，从而使总宽度变为100。

现在，我们已经设置了行的高度以及每一个单元的宽度，接下来就可以把控件插入到这些单元中了。你只需要输入将要插入到这些单元的控件的名称就可以了。注意，这些控件必须已经被添加到舞台上。当我们把这些控件插入到各单元时，它们的原始位置和大小将被忽略。

例如，假设我们已经把一行划分成3个单元，而我们希望把2个名为“b1”和“b2”的按钮插入到第一和第三个单元中，以下是实现方法：

这2个按钮将出现在左边和右边：

你可以通过设置边距值来在每一行的四周留出一些空间。例如，假设我们有高度为30%和70%的2行。当边距为0时，它们将如下图那样划分舞台：

但是，如果我们添加15个单位的边距，那么每一行将在4个边缘缩进15个单位：

在每一行内，你可以对每一个单元的四周增加额外空间，这样各个控件就不会互相紧靠在一起了。

例如，假设我们在一行中有2个单元，每一个单元中有一个按钮。如果没有设置填充，这两个按钮将互相紧靠在一起：

注意，由于边距的存在，这一行的四周存在着一些空间，但是在该行的内部，2个单元是互相紧靠的。

如果我们增加15个单位的填充，那么我们将在每一个单元的四周增加额外的空间：

在本例中，5个按钮通过3个布局行的使用被放置在舞台上。对所有行均使用了10个单位的行距和5个单位的填充。

以下是最终结果：

你可以通过以下链接自己来运行该项目：