如何为 Pinterest 类型的砖石布局制作卡片式布局？答案

【问题标题】：How can I make a card type layout for a Pinterest-type masonry layout?如何为 Pinterest 类型的砖石布局制作卡片式布局？
【发布时间】：2022-09-30 05:49:25
【问题描述】：

我正在开发一个 Flutter/Dart 救援猫收养应用程序，并且我有一个可用的猫的 Pintrest 风格砖石网格布局。我有一张卡片的草稿，上面有一张猫的照片，下面是基本信息，比如名字、品种、特征和位置。

我想要一个如下所示的卡片布局，但不知道如何将卡片的顶部和底部四舍五入并具有可变高度的图像。对于图像，我希望它有一个固定的宽度，但它的高度是可变的，它足够高，不会切断图像的侧面或顶部或底部。这些图像有多种宽度和高度。白色文本部分的高度和宽度都应该是固定的。该卡应如下所示：

我对 Flutter 很陌生。这种卡片布局怎么做？

标签： flutter mobile flutter-layout flutter-card

【解决方案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,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
),

结果图片->

【讨论】：

谢谢拉文德拉！！！一个问题是图片动态调整大小以使宽度恒定，并且根据图像高度与卡片固定宽度之间的比率计算图像高度？抱歉，我不确定我之前解释得是否足够好。谢谢
你的问题解决了没有？我只是按照您的期望设计相同的图像
谢谢，我下班后会试试的。