Nativescript Stacklayout布局不正确？

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

<StackLayout  orientation="horizontal" #myStack>

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

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

</StackLayout>

问题：

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

基本上情况就是这样：

所以我希望右边的绿色滚动到左边，我基本上是想把myStack移到左边

如何使绿色区域从右侧滑动

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

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

有几种方法可以实现这一点。 -使用固定宽度的容器-

请注意，我们的容器GridLayout将

列设置为600


另一个选项是不创建固定大小的容器来使用ScrollView（它将测量其子对象，以便子对象应该具有预定义的大小-在您的示例中为width=“300”）-




在上面的示例中，不需要容器元素（仅用于创建动画按钮）。
ScrollView
将测量其子级（300+300=600宽度），并占用所需的空间。
如何使用GridLayout作为内部布局并将宽度设置为300。或者将外部布局设置为GridLayout并将columns属性设置为“300300”。这似乎仅适用于根GridLayout。为什么它不适用于根堆栈布局？
  ngOnInit(): void {
        setTimeout(() => {
               this.myStack.nativeElement.animate({
                translate: { x: -300, y: 0 },
                duration: 2000,
                curve: enums.AnimationCurve.easeIn
            });
         },1000)
   }

<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>