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

Copy/paste 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 宽度），并将采用所需的 space。

Nativescript Stacklayout 布局不正确？

Nativescript Stacklayout does not layout properly?

nativescript

angular2-nativescript