NativeScript StackLayout 让子元素占据剩余宽度答案

【问题标题】：NativeScript StackLayout let a child element take remaining widthNativeScript StackLayout 让子元素占据剩余宽度
【发布时间】：2017-08-03 01:42:30
【问题描述】：

在 NativeScript StackLayout 中，我有三个元素 A、B 和 C。我希望中间元素 B 占据所有可用空间。这就是我想要的：

|ABBBBBBBBBBBBC|

我正在尝试使用这个简化的代码。 A和C是固定宽度的标签，B是进度条。

<StackLayout orientation="horizontal" verticalAlignment="center">
    <Label text="1" width="50"></Label>
    <Progress value="50" maxValue="100"></Progress>
    <Label text="1" width="50"></Label>
</StackLayout>

发生的情况是进度条填满了 StackLayout 的剩余空间，没有为最后一个标签留下空间。屏幕上只绘制了第一个标签和进度条本身，如下所示：

|ABBBBBBBBBBBBB|C

因此 C 元素被绘制到屏幕之外。

如果我将 2 个标签放在前面，尺寸看起来还可以。

我在这里做错了什么？

【问题讨论】：

标签： nativescript

【解决方案1】：

使用GridLayout。

<GridLayout columns="50, *, 50">
    <Label text="1" col="0"></Label>
    <Progress value="50" maxValue="100" col="1"></Progress>
    <Label text="1" col="2"></Label>
</GridLayout>

【讨论】：