Silahkan kode dan gambar di bawah ini. Saya mencoba untuk memperluas gambar sebanyak mungkin tetapi tetap mempertahankan harga dan tombol "Tambahkan ke Keranjang" harus dipasang di bagian bawah layar.

Pada atribut XML gambar, ketika saya mencoba stretch="none" gambarnya terlalu kecil.

Ketika saya mencoba stretch="aspectFit" itu mengembang tetapi memotong harganya.

Idealnya harga harus diperbaiki di atas "Tambahkan ke Keranjang" tapi saya juga tidak bisa melakukannya dengan benar.

Dengan cara apa pun saya berhasil membuat "Add to Cart" tetap di bagian bawah dengan menggunakan row=1 dan row=2 alih-alih row=0 dan row=1.

Tapi sekarang masalahnya adalah saya tidak bisa membuat gambar itu berkembang dengan baik dan tidak menimpa harganya.

Saya terbuka untuk saya melakukan ini sepenuhnya salah dan BTW saya telah membaca semua dokumen dan Google ini sampai mati. Butuh waktu tiga jam untuk menyelaraskan tombol itu ke bagian bawah layar. Saya biasanya lebih suka masalah matematika.

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

Gambar 1 (dengan stretch="none" gambar terlalu kecil dan perataan harga salah)

This image is too small

Gambar 2 (dengan stretch="aspectFill" gambar terlalu besar dan harganya telah ditimpa)

This image is too big

0
Eugene van der Merwe 18 Juni 2020, 00:22

1 menjawab

Jawaban Terbaik

* dalam GridLayout berarti akan mengambil sisa ruang yang tersedia, sedangkan auto akan mengambil ruang yang diperlukan untuk anak.

Jika Anda memindahkan Label yang berisi harga keluar dari StackLayout di baris 1, dan meletakkannya di barisnya sendiri, mirip dengan tombol checkout, itu akan membuat gambar dapat diperluas sebanyak mungkin sampai di mana label harga berada.

<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>
1
William Juan 18 Juni 2020, 12:51