-
简介
在使用按钮或标签等控件时，我们通常希望它们的位置和大小能得到对齐。除了一个一个地找出每一个控件的位置和大小外，还有另一种不同方法可以控制控件的布局。
基本的思路是把整个舞台划分成一或者多“行”，并把它们从上到下地堆叠起来。对于每一行，你可以把它划分成一或者多个“单元”，然后把控件放置在这些单元中。例如，在以下例子中，你可以把舞台划分成2行（蓝色方框），然后把各行划分成2个或者3个单元（红色方框）：
https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/ac84ec08-5248-47c7-9f7c-0267c73fb5b9.png" width="500" style="">
注意，这些行和单元在舞台上是不可见的。它们只是用于计算每一个控件的位置和大小。
“使用布局行”积木
要使用新的布局方法，你应该首先添加一个或多个控件（不再需要设置它们的位置或大小了），然后运行以下积木把这些控件放置在一行中：
下面让我们讨论一下各项输入：
行名称
第一个输入是用于这一行的可选名称。你通常只需要使用“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
-
C CreatiCode Teacher moved this topic from Draft on
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login