Search code examples
nativescriptnativescript-layout

NativeScript layout expand image to fill screen while keeping button snapped to bottom

Please code and images below. I'm trying to expand the image as much as possible but retain the price and the "Add to Cart" button must be snapped to the bottom of the screen.

On the image XML attributes, when I try stretch="none" the image is too small.

When I try stretch="aspectFit" it expands but cuts off the price.

Ideally the price needs to be fixed above "Add to Cart" but I just can't get that right either.

By hook or crook I managed to get "Add to Cart" to stick to the bottom by using row=1 and row=2 instead of row=0 and row=1.

But now the problem is I can't get that image to expand properly and not overwrite the price.

I'm open to I'm doing this totally wrong and BTW I have read all the docs and Google this to death. It took me three hours to align that button to the bottom of the screen. I generally prefer math problems.

<GridLayout rows="auto, *, auto">
      <StackLayout row="1">
        <Label :text="product.title" />
        <Image
          :src="getImage"
          loadMode="async"
          stretch="none"
          horizontalAlignment="center"
          class="m-t-10 m-b-10"
        />
        <Label :text="getPrice" horizontalAlignment="center" />
      </StackLayout>
      <GridLayout row="2">
        <Button @tap="addProductToCart(product)" text="Add to Cart" class="-outline -rounded-sm"></Button>
      </GridLayout>
</GridLayout>

Image 1 (with stretch="none" the image is too small and the price alignment incorrect)

This image is too small

Image 2 (with stretch="aspectFill" the image is too big and the price has been overwritten)

This image is too big

Solution

  • The * in the GridLayout means that it will take up the remaining space available, where as auto will take up the space required for the child.

    If you move the Label that contains the price out of the StackLayout on row 1, and put it in its own row, similar to the checkout button, that should make the image be able to expand as much as possible up to where the price label is.

    <GridLayout rows="auto, *, auto, auto">
      <StackLayout row="1">
        <Label :text="product.title" />
        <Image
          :src="getImage"
          loadMode="async"
          stretch="aspectFit"
          horizontalAlignment="center"
          class="m-t-10 m-b-10"
        />
      </StackLayout>
        <Label row="2" :text="getPrice" horizontalAlignment="center" />
      <GridLayout row="3">
        <Button @tap="addProductToCart(product)" text="Add to Cart" class="-outline -rounded-sm"></Button>
      </GridLayout>
</GridLayout>