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（它将测量其子节点，因此子节点应具有预定义的大小 - 在您的情况下宽度=＆＃34; 300＆＃34;） - {{3 }}

                                                                                                                         

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