如何為 Pinterest 類型的砌體布局制作卡片類型布局？

Question

我正在開發一個 Flutter/Dart 救援貓收養應用程序，我有一個可用的貓的 Pintrest 風格磚石網格布局。 我有一張卡片的草稿，上面顯示了一張貓的照片，下面是基本信息，如名稱、品種、特征和位置。

我想要一個如下所示的卡片布局，但不確定如何將卡片的頂部和底部四舍五入並具有可變高度圖像。 對於圖像，我希望它具有設定的寬度和可變的高度，該高度足夠高，不會切斷圖像的側面或頂部或底部。 這些圖像有各種寬度和高度。 白色文本部分的高度和寬度都應固定。 該卡應如下所示：

我是 Flutter 的新手。這個卡片布局如何完成？

Answer 1

試試下面的代碼。

Card(
  elevation: 5,
  shadowColor: Colors.grey,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(
      20,
    ),
  ),
  margin: EdgeInsets.all(5),
  child: Container(
    height: 300,
    width: 200,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(
                  10,
                ),
                topRight: Radius.circular(
                  10,
                ),
              ),
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2022/03/27/11/23/cat-7094808__340.jpg',
                ),
              ),
            ),
          ),
        ),
        Container(
          height: 2,
          color: Colors.black,
        ),
        Container(
          height: 130,
          padding: const EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20.0),
              bottomRight: Radius.circular(20.0),
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Jake',
                style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: 15,
                ),
              ),
              SizedBox(
                height: 5,
              ),
              Text(
                'Domestic Short Hair',
                style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.w500,
                  fontSize: 12,
                ),
              ),
              SizedBox(
                height: 5,
              ),
              Text(
                'Available | Kitchen | Male | Small Pale - 3.99 Mile',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 12,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
),

結果圖像->