我正在嘗試制作一個主頁并創建此影像容器，其中包含三個彼此相鄰的影像。我試著這樣做：
Container(
height: 100.0,
width: 150.0,
child: Row(
children:[
Image(image: AssetImage('')),
Column(
children:[
Image(image: AssetImage('')),
Image(image: AssetImage('')),
],
),
],
),
),
我得到的看起來像這樣
而我想要的是這個
雖然結果不是這樣。關于如何重新創建我的 figma 影像的任何想法？
uj5u.com熱心網友回復：
在您的Image小部件上，提供height和weight使用 fit: BoxFit.cover,以獲得更好的視圖，然后就可以了。
你的好容器將是
Container(
height: 100.0,
width: 150.0 4, //for padding
color: Colors.green,
child: Row(
children: [
Padding(
// for rounded border
padding: const EdgeInsets.only(right: 2.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: const Image(
image: AssetImage('assets/images/p7_image_asset.jpeg'),
width: 150 / 2,
height: 100.0,
fit: BoxFit.cover,
),
),
),
Column(
children: [
Padding(
// space between items
padding: const EdgeInsets.only(left: 2.0, bottom: 2),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image(
image:
AssetImage('assets/images/p8_image_asset.jpeg'),
fit: BoxFit.cover,
height: 100 / 2 - 2, //-2 for padding
width: 150 / 2,
),
),
),
Padding(
padding: const EdgeInsets.only(left: 2.0, top: 2),
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image(
image:
AssetImage('assets/images/p9_image_asset.jpeg'),
fit: BoxFit.cover,
height: 100 / 2 - 2, //-2 for padding
width: 150 / 2,
),
),
),
],
),
],
),
),
我會鼓勵去flutter.dev并了解這些小部件。如果你想要 GridView 檢查flutter_staggered_grid_view
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/362197.html
上一篇：tabBar的標題可以不居中嗎？