Nativescript Stacklayout无法正确布局? [英] Nativescript Stacklayout does not layout properly?

问题描述

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

I have this simple layout markup :

<StackLayout  orientation="horizontal" #myStack>

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

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

</StackLayout>

如您所见，两者的宽度均为300:

As you can see , both are same width of 300:

让我们看看:

请注意，绿色也是300，但自300+300 > screen size以来我们只看到其中的一部分.

Notice that green is also 300 but we only see a part of it since 300+300 > screen size.

好吧，让我们尝试对左侧的#myStack(!!)进行动画处理，以查看左侧的绿色:

Ok so let's try to animate #myStack (!!) to the left , in order to see the left green :

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

问题:

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

What is this white area on the right ? there should be also a green section there

基本上就是这种情况:

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

So i'm expecting the green from the right to be scrolled to the left , i'm basically trying to move #myStack left.

如何使绿色区域从右侧滑出?

How can I make the green area slide from the right ?

游戏地

推荐答案

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

Copy/paste this answer so that the community can see the provided solutions:

@RoyiNamir，这是预期的行为. 发生的情况是，默认情况下，根目录布局将具有有效的宽度(和高度)作为屏幕尺寸. 如果要使有效宽度大于屏幕宽度，则需要显式创建更宽的容器.

@RoyiNamir this is expected behavior. What is happening is that by default the root layout will have an effective width (and height) as the screen size. You need to explicitly create the wider container if you want to have an effective width larger than the screen width.

有几种方法可以实现这一目标. -使用具有固定宽度的容器-此处为演示游乐场

There are several approaches on how to achieve that. - use container with fixed width - 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.

Note that our container GridLayout has columns set to 600.

• 另一个选择是代替使用ScrollView创建固定大小的容器(它将测量其子项，因此子项应具有预定义的大小-在您的情况下为width ="300")-

  在上面的示例中，不需要container元素(仅用于创建动画按钮). ScrollView将测量其子级(300 + 300 = 600宽度)并占用所需的空间.

  In the example above the container element is not needed (used just to create the animate Button). The ScrollView will measure its children (300 + 300 = 600 width) and will take the space needed.

  这篇关于Nativescript Stacklayout无法正确布局?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！