Макет NativeScript расширяет изображение, чтобы заполнить экран, удерживая кнопку нажатой внизу

Question

Пожалуйста, укажите код и изображения ниже. Я пытаюсь максимально увеличить изображение, но сохраняю цену, и кнопку «Добавить в корзину» необходимо привязать к нижней части экрана.

На изображении XML, при попытке stretch="none" изображение слишком маленькое.

При попытке stretch="aspectFit" оно расширяется, но снижает цену.

В идеале цена должна быть указана выше «Добавить в корзину» но я тоже не могу это правильно понять.

Не правда ли, правдами и неправдами мне удалось получить «Добавить в корзину» , чтобы придерживаться внизу, используя row=1 и row=2 вместо row=0 и row=1.

Но теперь проблема в том, что я не могу заставить это изображение правильно расширяться и не перезаписывать цену.

Я открыт, я делаю это совершенно неправильно, и, кстати, я прочитал все документы и погуглил до смерти. Мне потребовалось три часа, чтобы выровнять эту кнопку по нижнему краю экрана. Обычно я предпочитаю математические задачи.

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

Изображение 1 (с stretch="none" изображение слишком маленькое, а выравнивание цены неверно)

Изображение 2 (с stretch="aspectFill" изображение слишком велико, а цена была перезаписана)

Answer 1

* в GridLayout означает, что он займет оставшееся доступное пространство, а auto займет пространство, необходимое для ребенка.

Если вы переместите Label который содержит цену из StackLayout в строке 1 и помещает ее в отдельную строку, аналогично кнопке оформления заказа, чтобы изображение могло максимально увеличиваться до того места, где находится ценовая метка.

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