我如何为具有如下卡片的 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,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
),

结果图片->

我如何为具有如下卡片的 pinterest 类型砌体布局制作卡片类型布局

How can I make a card type layout for a pinterest type masonry layout that has a card that looks like this

mobile

flutter

flutter-layout

flutter-card