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>

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

Let's see this :

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

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

Question:

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

Basically this is the situation :

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 ?

PLAYGROUND

回答1:

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

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

Note that our container GridLayout has columns set to 600.

Another option is instead of creating fixed size container to use ScrollView (which will measure its children so the children should have predefined size - in your case width="300") - demo Playground here

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.

来源：https://stackoverflow.com/questions/48701445/nativescript-stacklayout-does-not-layout-properly

标签

nativescript

angular2-nativescript