布局可组合是创建UI的非常重要且重要的组件。 JetPack Compose提供了预定义的布局，例如列，行，框和约束layout。

布局合并的常见属性：

使用列垂直显示小部件：

在合并中，有一个列作为带有垂直方向的线性层状。它只是将所有儿童小部件作为垂直列布局。违约，违约的所有孩子将在顶部位置和水平对齐处垂直排列。默认情况下。如下：

@preview
@composable
Fun columnexample（）{

列（
modifier = modifier.fillmaxsize（）
）{
图像（
bitmap = imagebitmap.imageresource（id = r.drawable.espresso_small），
contentDescription = null
）
text（text =“咖啡”，fontsize = 25.sp）
}
}

在上面的示例中，我们没有使用任何与对齐相关的属性。因此，让我们看看如果我们设置与图像和文本堆肥的对齐方式，输出将如何。

重量

我们可以使用重量（重量值）修饰符在列布局中的修饰符中的重量将组件分为相等的部分。让我们看到下面的基本示例：

@preview
@composable
Fun columnexampleWitweight（）{
列（
水平安排= Alignment.Centerhorizo​​ntally，
修改器=修饰符
.fillmaxwidth（）
）{
图像（
bitmap = imagebitmap.imageresource（id = r.drawable.espresso_small），
contentDescription = null，
modifier.Wewight（2F）
）
文字（
text =“浓缩咖啡”，
fontsize = 25.sp，
修改器=修饰符
。重量（2F）
。 ）
}
}

布局对齐

默认情况下，列中的所有儿童都在左上角的位置对齐。我们可以使用以下比对在列布局中的孩子对齐

使用列布局，我们具有恒定的对齐。centerhorizo​​ntal界面是：


1.开始

2. centerhorizo​​ntally

3.结束

上面的参数用于沿水平轴水平对齐组件。

列（
修改器=修饰符
.fillmaxsize（）
.background（color.black），
水平安排= Alignment.Centerhorizo​​ntally，
）{
图像（
bitmap = imagebitmap.imageresource（id = r.drawable.espresso_small），
contentDescription = null
）
text（text =“咖啡”，fontsize = 25.sp，color = color.white）
}

布局布置

该布置可用于控制孩子沿着与垂直圆柱（如圆柱）相同的轴的轴的位置。可以使用垂直布置参数在列布局上设置布置值。

列组合具有垂直布置参数，该参数接受如下的值

1.安排。top-在内容区域的顶部垂直排列内容

2.布置。中心 - 在内容区域中垂直排列内容

3.布置。bottom-垂直在内容区域的底部排列内容。

列（
修改器=修饰符
.fillmaxsize（）
.background（color.black），
水平安排= Alignment.Centerhorizo​​ntally，
垂直方向=安排。中心
）{
图像（
bitmap = imagebitmap.imageresource（id = r.drawable.espresso_small），
contentDescription = null
）
text（text =“咖啡”，fontsize = 25.sp，color = color.white）
}

使用行水平显示小部件：

在合并中，有一行作为与水平方向的线性层压。它只是将所有儿童小部件作为水平行进行布局。默认情况下，所有行布局中的所有孩子都将在顶部位置和水平对齐中进行垂直排列。如下：

行（
修改器=修饰符
.fillmaxsize（）
.background（color.black），
）{
图像（
bitmap = imagebitmap.imageresource（id = r.drawable.espresso_small），
contentDescription = null，
modifier = modifier.size（100.dp）
）
text（text =“咖啡”，fontsize = 25.sp，color = color.white）
}

重量

我们可以使用权重（权重）修饰符在行布局中的修饰符中添加重量。让我们看到下面的基本示例：

@preview
@composable
fun rowexamplewweight（）{

行（
修改器=修饰符
.fillmaxsize（）
.background（color.black），
）{
图像（
bitmap = imagebitmap.imageresource（id = r.drawable.espresso_small），
contentDescription = null，
modifier = modifier.Wewight（1F）
）
文字（
text =“浓缩咖啡”，
fontsize = 25.sp，
颜色=颜色。白色，
modifier = modifier.Wewight（1F）
）
}
}

布局对齐

默认情况下，所有的孩子都在左上角的位置对齐。我们可以使用以下对齐方式将孩子在行布局中对齐

使用行布局，我们具有恒定的对齐。中心界面是：

4.顶部

5.中心

6.底部

上面的参数用于沿水平轴水平对齐组件。

布局布置

该布置可用于控制孩子沿着与父容器相同的轴的位置，例如水平的行。可以使用水平布置参数在行布局上设置安排值。

列组合具有一个垂直布置参数，该参数接受如下的值

1.安排。启动 - 将内容水平放置到内容区域

2.布置。中心 - 在内容区域中水平安排内容

3.安排。端 - 将内容在行末尾放置到水平的内容区域。

行（
修改器=修饰符
.fillmaxsize（）
.background（color.black），
垂直安装=对齐。 ）{
图像（
bitmap = imagebitmap.imageresource（id = r.drawable.espresso_small），
contentDescription = null，
modifier = modifier.Wewight（1F）
）
文字（
text =“浓缩咖啡”，
fontsize = 25.sp，
颜色=颜色。白色，
modifier = modifier.Wewight（1F）
）
}

布局布置间距

在整个内容区域之间，每个子组件之间的每个子组件之间的空间间隔。可以通过使用需要以下值之一的水平排列和垂直排列参数来实现间距。


1.安排。 2.安排。之间的spacebetbet-所有孩子在父母的布局中均等。在第一个孩子和最后一个孩子之后没有添加空间。

3.安排。测距 - 所有孩子都在父母的布局中均等。它包括第一个孩子之前和最后一个孩子之后的半间距。

以下示例与行相结合

使用 1.太空：

@composable
有趣的textcell（value：string）{
Val Cellmodifier =修饰符
.padding（5.dp）
.size（100.dp，100.dp）
.border（width = 2.dp，color = color.red）
.wrapContentheight（）

文字（
文字=值，
修饰符= CellModifier，
fontsize = 20.sp，
fontWeight = fontWeight.bold，
textual Asset = textive.center
）
}

现在，调用上述函数以创建可复杂的文本，如下所示：

行（
垂直安装=对齐。 Horizo​​ntalArrangement =安排。 modifier = modifier.fillmaxsize（）
）{
textcell（value =“ a”）
textcell（value =“ b”）
textcell（value =“ c”）
}

2.SpaceBeteween

行（
垂直安装=对齐。 Horizo​​ntalArrangement =布置。 modifier = modifier.fillmaxsize（）
）{
textcell（value =“ a”）
textcell（value =“ b”）
textcell（value =“ c”）
}

3.spacearound

行（
垂直安装=对齐。 Horizo​​ntalArrangement =安排。 modifier = modifier.fillmaxsize（）
）{
textcell（value =“ a”）
textcell（value =“ b”）
textcell（value =“ c”）
}

以下示例与列可合并。另外，我们将使用相同的textcell（）用于列示例

1.spaceevenly

列（
水平安排= Alignment.Centerhorizo​​ntally，
垂直方向=安排。 modifier = modifier.height（600.dp）
）{
textcell（value =“ a”）
textcell（value =“ b”）
textcell（value =“ c”）
}

2.SpaceBeteween

列（
水平安排= Alignment.Centerhorizo​​ntally，
垂直方向=安排。 modifier = modifier.height（600.dp）
）{
textcell（value =“ a”）
textcell（value =“ b”）
textcell（value =“ c”）
}

3.spacearound

列（
水平安排= Alignment.Centerhorizo​​ntally，
垂直方向=布置。接线，
modifier = modifier.height（600.dp）
）{
textcell（value =“ a”）
textcell（value =“ b”）
textcell（value =“ c”）
}

框布局

使用JetPack Compose开发应用程序时，盒子是第三大最合并的框。盒子可以组合的孩子将孩子彼此叠放。默认情况下，孩子们将被置于最高位置。堆叠顺序是在盒子布局中宣布儿童的顺序，第一个孩子将在堆栈的底部，最后一个孩子在堆栈顶部都可以看到。

在盒子布局中对齐孩子

使用盒子布局，我们可以指定孩子的位置，以使我们的子元素在盒子内对齐。有3个垂直选项可用的顶部，中心和底部。水平选项是，开始，中心和结束。因此，如下所示，我们孩子的盒子内布局有9个可能的对齐方式：

这是盒布局的简单示例

box（contentalment = alignment.center，
modifier = modifier.size（400.dp，400.dp））{

textcell（“ 1”）
textcell（“ 2”）
textcell（“ 3”）
}

BoxScope修饰符

可用以下框架修饰符应用于框布局中的子组件。


1.对齐（） - 将孩子与框内容布局中的指定对齐值对齐。一组对齐值与上面列出的框内容对齐的值相同。

2. matchparentsize（） - 如果将此修饰符指定给孩子，则孩子的大小将与父盒相同。

现在，添加以下函数以在框布局中添加文本单元格，如下所示，以将文本布局添加到所有不同的位置。

@composable
有趣的TextCellBox（值：字符串，修饰符：修饰符）{
Val Cellmodifier =修饰符
.wrapContentheight（）
.size（30.dp，30.dp）
.border（width = 2.dp，color = color.red）

文字（
文字=值，
modifier = cellmodifier.then（modifier），
fontsize = 20.sp，
fontWeight = fontWeight.bold，
textual Asset = textive.center
）
}

这是将文本添加到所有位置的框示例。

box（modifier = modifier.size（高度= 150.dp，width = 200.dp）.padding（15.dp））{
textCellbox（value =“ a”，modifier = modifier.align（alignment.topstart））
textCellbox（value =“ b”，modifier = modifier.align（alignment.topcenter））
textCellbox（value =“ c”，modifier = modifier.align（alignment.topend））
textCellbox（value =“ d”，modifier = modifier.align（alignment.centerstart））
textCellbox（value =“ e”，modifier = modifier.align（alignment.center））
textCellbox（value =“ f”，modifier = modifier.align（alignment.centerend））
textCellbox（value =“ g”，modifier = modifier.align（alignment.bottomstart））
textCellbox（value =“ h”，modifier = modifier.align（alignment.bottomcenter））
textCellbox（value =“ i”，modifier = modifier.align（alignment.bottomend））

}

现在，让我们检查一下MatchParentsize（）修饰符如何通过一个简单的示例来工作。

盒子（
修饰符
.size（200.dp）
.background（color.blue）
）
{

文字（
text =“中心”，
修改器=修饰符
.padding（10.dp）
.background（color.red）
.matchparentsize（）
.wrapContentheight（），
fontsize = 20.sp，
fontWeight = fontWeight.bold，
textual Asset = textive.center
）

}

使用clip（）修饰符

clip（）修饰符用于将指定的形状渲染到框可组合布局。为了定义组合的形状，调用clip（）修饰符的值，例如矩形，圆形，圆形，圆形的cornershape或cutcornershape。

下面的示例将夹紧框可组合，并用蓝色绘制圆圈。当渲染时，它看起来像盒子出现在下图中。

盒子（
修饰符
.size（300.dp）
.padding（50.dp）
.clip（圆形）
.background（color.blue）
）

要绘制不同的形状，例如圆角，只需将夹子修饰符中的值作为圆形尺寸更改，然后将半径传递给每个方向以绘制所需的角。如果仅作为半径传递单个值，则将其应用于所有角落。让我们看看一个简单的示例，上面有一个圆形的角框和一个简单的文字。

盒子（
修饰符
。 .size（300.dp）
.padding（50.dp）
.background（color.blue）
）
{

文字（
text =“你好！”，
修改器=修饰符
.padding（20.dp）
。 .background（color.red）
.matchparentsize（）
.wrapContentheight（），
fontsize = 20.sp，
fontWeight = fontWeight.bold，
textual Asset = textive.center
）
}

约束布局

约束layaut根据孩子之间的约束来定位孩子。它类似于ConstraintLayout，我们用来在Android开发中添加视图。

生成参考

默认情况下，约束layout中的孩子将位于内容区域的左上角，假设应用程序在左至右和上下的位置上运行。在分配约束之前，堆肥必须分配参考。该过程中有两个步骤生成参考文献并在应用约束之前将其分配给组合。

createref（）函数用于创建单个参考，结果分配给常数，例如

        Val text1 = createRef()

另外，如果要通过调用相同的createrefs（）函数在单个步骤中创建多个引用，如下所示：

val（text1，text2，text3）= createrefs（）

分配参考

创建参考后，它可以使用Constraints（）修饰符函数应用于单个组合。例如，将文本1分配给文本可合并。正如我们在给定的示例中可以看到的那样，约束（）修改器函数具有尾随的lambda，我们可以在其中指定组合的约束。

约束layout {
val img = createref（）
图像（
bitmap = imageBitmap.imageresource（id = r.drawable.espresso_small），contentDescription = null，modifier = modifier.constraintas（img）{
//在此处添加约束
}）

}

添加约束

组合的最常见约束是在合并的一侧和另一个可综合或父限制本身的另一侧之间的。使用constraints（）修饰符函数添加约束，并通过call link（）函数在训练lambda块内声明。

让我们看看如何通过更新上述示例代码来使用link（）函数来实现约束布局。

撰写示例1.0

约束layout {
val img = createref（）
图像（
bitmap = imageBitmap.imageresource（id = r.drawable.espresso_small），contentDescription = null，modifier = modifier.constraintas（img）{
top.linkto（parent.top，保证金= 16.dp）
start.linkto（parent.start，保证金= 16.dp）
}）

}

在上面的示例中，我们已将图像视图的约束设置为左侧 - 父限制实例的最高位置，均为16。DPMargin。

除了linkto（）函数外，还有其他函数要应用约束，组件还可以分别相对于父级本身或任何其他组件，分别使用CenterHorizo​​nthorizo​​ntalyto（）和中心为（）将组件居中。例如，

图像（
bitmap = imageBitmap.imageresource（id = r.drawable.espresso_small），contentDescription = null，modifier = modifier.constraintas（img）{
中心为（父）
Centerhorizo​​ntally（父母）
}）

在上面的示例中，图像将在垂直轴上垂直定位，并在垂直轴上从中心位置，并在约束layout的水平轴上从中心到父。

CenterAround（）函数可用于将组件垂直或水平相对于另一个组件的侧面定位。

现在，在学会添加约束后，让您创建一个简单的视图，并如下所示。

约束layout（
修改器=修饰符
.fillmaxsize（）
.background（color.black）
）{
val img = createref（）
val txttitle = createref（）
val txtDescription = createref（）
val txtTagline = createref（）
图像（
bitmap = imagebitmap.imageresource（id = r.drawable.espresso_small），
contentDescription = null，
修改器=修饰符
.constrainas（img）{
top.linkto（parent.top，保证金= 16.dp）
start.linkto（parent.start，保证金= 16.dp）
}
.background（color.blue）
。 .size（80.dp）
.wrapContentheight（）
）

   Text("Espresso", modifier = Modifier.constrainAs(txtTitle) {
       top.linkTo(parent.top)
       linkTo(start = img.end, end = parent.end, startMargin = 10.dp, endMargin = 16.dp)
       width = Dimension.fillToConstraints
   }, fontSize = 24.sp, color = Color.White)

   Text(
       text = "Espresso is coffee of Italian origin, brewed by forcing a small amount of nearly boiling water under pressure (expressing) through finely-ground coffee beans.",
       modifier = Modifier.constrainAs(txtDescription) {
           top.linkTo(txtTitle.bottom, margin = 5.dp)
           linkTo(txtTitle.start, txtTitle.end)
           width = Dimension.fillToConstraints
       }, color = Color.White
   )

   Text(
       text = "This is example of ConstraintLayout",
       modifier = Modifier.constrainAs(txtTagline) {
           linkTo(parent.start, parent.end)
           top.linkTo(txtDescription.bottom, margin = 10.dp)
       }, color = Color.White
   )

}

对立的约束

到目前为止，我们已经看到了如何将约束对组件设置为带有边距的父母内的固定位置。相反的约束是沿着相同轴的两侧形成的约束，从水平或垂直的轴限制。例如，在水平轴上的按钮上应用对方约束。

val btnopposed = createref（）
按钮（onclick = {}，modifier = modifier.constrainas（btnopposed）{
top.linkto（txttagline.bottom，保证金= 20.dp）
start.linkto（parent.start）
end.linkto（parent.end）
}）{
文本（“中心按钮”）
}

如上图中所见，相对约束将在约束布局中将组件定位在水平中心位置。 link（）函数可以接受参数以简化可以声明为以下示例的相对约束，通过更新上述代码。

val btnopposed = createref（）
按钮（onclick = {}，modifier = modifier.constrainas（btnopposed）{
top.linkto（txttagline.bottom，保证金= 20.dp）
linkto（parent.start，parent.end）
}）{
文本（“查看细节”）
}

lambda块中指向（）函数的链接在lambda块中具有两个参数，该参数将用一条代码线水平地放置中心的按钮。如果您需要在父级垂直或水平位置组件中心定位，则可以使用以下代码行实现相同的结果。

中心价（父）
Centerhorizo​​ntally（父）

约束Bais

使用将组件安排在特定轴上的相对约束上的中心位置。当将偏置应用于受约束的组件时，它将相对于可用空间移动。让我们以一个简单的例子了解基础约束。

将以下代码添加到上一个撰写示例1.0，并如下更新按钮代码块。

val btnopposed = createref（）
val（imgllike，imgshare）= createrefs（）

图像（
iCONS.FELL.FARAITE，
contentDescription = null，
modifier = modifier.constrainas（imgllike）{
linkto（btnopposed.top，btnopposed.bottom）
linkto（parent.start，parent.end，bias = 0.05f）
}，
colorfilter = colorfilter.tint（color.white）
）

图像（
iCons.filed.share，
contentDescription = null，
modifier = modifier.constrainas（imgshare）{
linkto（btnopposed.top，btnopposed.bottom）
linkto（parent.start，parent.end，bias = 0.15f）
}，colorfilter = colorfilter.tint（color.white）
）

button（onclick = {}，modifier = modifier.constrainas（btnoppose）{
top.linkto（txttagline.bottom，保证金= 20.dp）
linkto（parent.start，parent.end，bias = 0.9f）
}）{
文本（“查看细节”）
}

在此示例按钮中，视图详细信息将位于父宽度的90％。相同的分享和喜欢的图标也受到偏见的约束，并定位为父母的5％和15％。

约束余量

我们可以将保证金设置为可根据我们的需求，组件和另一个元素（例如可合and屏障，指南）或父级约束layaut的侧面等组件之间的差距。

请考虑以上示例以获取保证金。水平偏置约束设置将控制组件在布局右侧的位置。

将边距约束添加到组件后，出现固定间隙，即使在调整偏置时也无法移动组件。在以下的代码中添加了30 dp的代码中，并且在按钮中的右手约束是可以组合的，即使将偏见设置为100％也无法移动。

val btnclose = createref（）
butt（onclick = {}，modifier = modifier.constrainas（btnclose）{
bottom.linkto（parent.bottom，保证金= 30.dp）
linkto（parent.start，parent.end，bias = 1.0f，endmargin = 30.dp）
}）{
文字（文本=“关闭”）
}

即使屏幕方向更改，或将任何其他组件或视图添加到按钮的右侧，

即使屏幕方向更改，也可以保留按钮的右侧。即使我们没有指定偏差设置，边距也将被应用，并且不会影响组件的定位。

在约束层中使用链条

当我们需要在同一轴上或垂直方向上排列两个以上的组件，而周围的间距相等，我们可以在约束层中使用链约束。可以通过使用createHorizo​​ntalchain（）或CreatevertilityChain（）的功能之一来创建两个或多个组件的链约束。


这两个功能都需要使用Createref（）或Createrefs（）创建的组件引用的传递参数。让我们通过一个简单的例子来理解链的约束，在它们周围的间距平等的情况下水平排列3个按钮。

val（gertnfood，getnfashion，extntravel）= createrefs（）
createHorizo​​ntalchain（gertnfood，gertnfashion，optntravel）

outlined button（
onClick = {}，
修改器=修饰符
.constrainas（gertnfood） bottom.linkto（btnclose.top，边距= 20.dp）
Centerhorizo​​ntally（父母）
}）{
文字（文字=“食物”）
}
outlined button（
onClick = {}，
修改器=修饰符
。 bottom.linkto（btnclose.top，边距= 20.dp）
Centerhorizo​​ntally（父母）
}）{
文字（文字=“时尚”）
}
outlined button（
onClick = {}，
修改器=修饰符
。 bottom.linkto（btnclose.top，边距= 20.dp）
Centerhorizo​​ntally（父母）
}）{
文字（文字=“旅行”）
}

也可以使用包装，传播或散布的样式来安排链条约束。


1.包装：将所有组件分组在一起并放置在可用空间中心的样式。


2.传播：所有组件均匀分布的样式

3.Spreadinside：所有组件均匀分布但第一个和最后一个组件均固定到两端的样式。

要更改样式，您需要在createHorizo​​ntalchain（）或createVerallyTallyChain（）中添加样式参数。将样式从默认的扩展链更改为everaverinside如下。

CreateHorizo​​ntalchain（
gentfood，
gertnfashion，
gertntravel，
链式=链式style.spreadinside
）

将链样式更改为EveraverIndide后，将在预览窗格中生成以下预览。

使用指南

约束layout提供水平或垂直指南。准则是用户看不见的无形线。准则有助于开发人员轻松限制视图和设计布局。当许多组件需要与水平或垂直等特定轴线保持一致时，指南很有用。指南的值可以为父母的高度或宽度的百分比。

以下功能调用将为父母的起始边缘创建垂直指南。

createGuidelineFromStart（分数= 0.25F）

以下功能调用将创建对父底边缘的水平指南，指南将位于底部边缘的60dp上方。

createGuidelineFrombottom（offset = 60.dp）

现在，让我们使用父母40％的指南创建一个简单的示例，并在指南上方的顶部显示横幅图像，在图像下方，我们可以显示一些描述或其他内容。


在横幅图像下方，我们设置了类似图像并共享图像。在底部，有一个按钮“查看细节”。类似和共享图像再次设置为垂直指南，在上半年我们设置了类似图像，在另一半我们设置了共享图像。

约束layout（
修改器=修饰符
.fillmaxsize（）
）{

val（img，imgllike，imgshare，btnviewdetail）= createrefs（）
Val GuidElineCoverimage = createGuidelineFromTop（0.4F）
VAL GUIDELINEMIDDLEVERTICALLINE = createGuideline从（0.5F）

图像（
bitmap = imagebitmap.imageresource（id = r.drawable.espresso_small），
contentDescription = null，
修改器=修饰符
.constrainas（img）{
top.linkto（parent.top）
bottom.linkto（guideLinecoverimage）
高度=尺寸。filltoconstraints
}
.background（color.blue）
.wrapContentWidth（）
.fillmaxhet（）
）

图像（
iCONS.FELL.FARAITE，
contentDescription = null，
修改器=修饰符
.constrainas（imgllike）{
top.linkto（img.bottom，10.dp）
linkto（parent.start，guideLinemidDlevertIcalline）
}
.size（50.dp），
colorfilter = colorfilter.tint（color.gray）
）

图像（
iCons.filed.share，
contentDescription = null，
修改器=修饰符
.constrainas（imgshare）{
top.linkto（img.bottom，10.dp）
linkto（guidelinemiddleverticalline，parent.end）
}
.size（50.dp），
colorfilter = colorfilter.tint（color.gray）
）

button（onclick = {}，modifier = modifier.constrainas（btnviewdetail）{
linkto（parent.start，parent.end）
bottom.linkto（parent.bottom）
宽度=尺寸。filltoconstraints
}）{
文本（“查看细节”）
}
}

这是上述代码的预览。在图像中，您可以看到类似图像和共享图像之间的垂直虚线，这是一个指南，但是当我们运行时，用户看不到它。

另外，让我们以另一个简单的示例使用指南显示按钮。

约束layout（
修改器=修饰符
.wrapcontentsize（）
.padding（30.dp）
）{
val（button1，button2，button3）= createrefs（）
val verticalguideline = createGuideline从（0.6F）

   Button(onClick = { }, modifier = Modifier.constrainAs(button1) {
       top.linkTo(parent.top)
       end.linkTo(verticalGuideline, margin = 20.dp)
   }) {
       Text("Button 1")
   }

   Button(onClick = { }, modifier = Modifier.constrainAs(button2) {
       top.linkTo(button1.bottom)
       start.linkTo(verticalGuideline, margin = 40.dp)
   }) {
       Text("Button 2")
   }

   Button(onClick = { }, modifier = Modifier.constrainAs(button3) {
       top.linkTo(button2.bottom)
       end.linkTo(verticalGuideline, margin = 20.dp)
   }) {
       Text("Button 3")
   }

}

与障碍物合作

使用以下4个可用功能为一个或多个组件的特定侧创建屏障约束。

1.CreatestartBarrier（）

2.CreateendBarrier（）

3.CreateTopBarrier（）

4.Createbottombarrier（）

每个功能都接受需要创建具有可选余量参数的屏障的组件的参考。

val barrier = createEndBarrier（button1，button2，margin = 30.dp）

createEndBarrier（）函数将创建从按钮1或button2的最宽度宽度定位的垂直屏障。因此，开始并使用末端来创建垂直屏障，顶部和底部用于水平屏障。

要了解障碍，让我们创建一个示例代码以了解场景。实现以下示例代码。

约束layout（
修改器=修饰符
.size（300.dp，200.dp）
.padding（10.dp）
）{

val（button1，button2，button3）= createrefs（）

button（onclick = {}，modifier = modifier
.constrainas（button1）{
top.linkto（parent.top）
start.linkto（parent.start）
}
.width（100.dp））{
文本（“按钮1”）
}

button（onclick = {}，modifier = modifier
.constrainas（button2）{
top.linkto（button1.bottom，保证金= 20.dp）
start.linkto（parent.start）
}
.width（100.dp））{
文本（“按钮2”）
}

button（onclick = {}，modifier = modifier.constrainas（button3）{
linkto（parent.top，parent.bottom）
linkto（button1.end，parent.end，startmargin = 10.dp）
宽度=尺寸。filltoconstraints
高度=尺寸。

}）{
文本（“按钮3”）
}
}

在上面的示例中，按钮3安排到按钮1的右侧。按钮3需要其尺寸以填充可用的最大可用空间。还需要确保按Button1和button2的大小更改为响应它们。

在上面的代码示例中，如果按钮1的大小设置为200。dp增加了其宽度，则按钮3的大小将被更改，请参见下面的屏幕截图。

现在，如果Button2的宽度更改不会影响按钮3的大小，但它会影响Button3的Button3，如您在下面的屏幕截图中所看到的。

显然，这看起来不好。不是吗？之所以发生这种情况，是因为Button3仅受Button1的约束，并且不受按Button2的更改影响。要解决上述问题，我们需要将Button3设置为Button1和Button3的右侧。我们可以使用障碍约束来实现这一目标。

使用以下授予的代码更新上面的示例代码。
约束layout（
修改器=修饰符
.size（300.dp，200.dp）
.padding（10.dp）
）{

val（button1，button2，button3）= createrefs（）
val屏障= CreateEndBarrier（button1，button2）

button（onclick = {}，modifier = modifier
.constrainas（button1）{
top.linkto（parent.top）
start.linkto（parent.start）
}
.width（100.dp））{
文本（“按钮1”）
}

button（onclick = {}，modifier = modifier
.constrainas（button2）{
top.linkto（button1.bottom，保证金= 20.dp）
start.linkto（parent.start）
}
.width（180.dp））{
文本（“按钮2”）
}

button（onclick = {}，modifier = modifier.constrainas（button3）{
linkto（parent.top，parent.bottom）
linkto（button1.end，parent.end，startmargin = 10.dp）
start.linkto（屏障，保证金= 10.dp）
宽度=尺寸。filltoconstraints
高度=尺寸。filltoconstraints
}）{
文本（“按钮3”）
}
}

如果您对Android应用程序开发有任何疑问，请与我们的Android app developers连接。