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 >屏幕尺寸.

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.

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

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") - 演示游乐场在这里

在上面的示例中，不需要容器元素(仅用于创建动画按钮).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屋！