Nativescript Stacklayout 布局不正确？

Question

我有这个简单的布局标记：

<StackLayout  orientation="horizontal" #myStack>

        <StackLayout  width="300" backgroundColor="red">
        </StackLayout>

        <StackLayout width="300" backgroundColor="green">
        </StackLayout>

</StackLayout>

如你所见，两者的宽度都是 300：

让我们看看这个：

请注意，绿色也是 300，但我们只看到它的一部分，因为 300+300 > screen size。

好的，让我们尝试将#myStack (!!) 动画到左边，以便看到左边的绿色：

  ngOnInit(): void {
        setTimeout(() => {
               this.myStack.nativeElement.animate({
                translate: { x: -300, y: 0 },
                duration: 2000,
                curve: enums.AnimationCurve.easeIn
            });
         },1000)
   }

问题：

右边的白色区域是什么？那里应该还有一个绿色部分

基本上是这样的：

所以我希望从右边滚动到左边的绿色，我基本上是在尝试向左移动 #myStack。

如何让绿色区域从右侧滑动？

PLAYGROUND

Answer 1

复制/粘贴this answer，以便社区可以看到提供的解决方案：

@RoyiNamir 这是预期的行为。 发生的情况是，默认情况下，根布局将具有有效的宽度（和高度）作为屏幕尺寸。 如果您希望有效宽度大于屏幕宽度，则需要显式创建较宽的容器。

有几种方法可以实现这一目标。 - 使用固定宽度的容器 - demo Playground here

<GridLayout rows="auto, *" columns="600" backgroundColor="lightgray">
    <Button row="0" text="animate" (tap)="animate()"></Button>
        <StackLayout row="1" orientation="horizontal" #myStack>
            <StackLayout width="300" backgroundColor="red">
                <Label text="Label"></Label>
            </StackLayout>

            <StackLayout width="300" backgroundColor="green">
                <Label text="Label"></Label>
            </StackLayout>
        </StackLayout>
</GridLayout>

请注意，我们的容器 GridLayout 将 columns 设置为 600。

• 另一种选择不是创建固定大小的容器来使用 ScrollView（它将测量其子级，因此子级应具有预定义的大小 - 在您的情况下为 width="300"） - demo Playground here

在上面的示例中，不需要容器元素（仅用于创建动画按钮）。 ScrollView 将测量其子项（300 + 300 = 600 宽度）并占用所需空间。