控件布局行

[creaticodeteacher1-mail]

简介

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

基本的思路是把整个舞台划分成一或者多“行”，并把它们从上到下地堆叠起来。对于每一行，你可以把它划分成一或者多个“单元”，然后把控件放置在这些单元中。例如，在以下例子中，你可以把舞台划分成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个单位的填充。

• 第一行为舞台高度的40%，其3个单元的宽度为40%、20%和40%。按钮“b1”和“b2”插入到第一和第三个单元中。
• 第二行为舞台高度的10%并将其留空（没有按钮）。
• 第三行占剩余50%的舞台高度，其3个单元将放置其余3个按钮。

 
以下是最终结果：

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

https://play.creaticode.com/projects/2dc702e7d79e6a0362c8d51d