flutter AspectRatio图片的宽高比、Card 卡片组件

AspectRatio 组件说明

// AspectRatio的主要作用是根据设置调整子元素child的宽高比。
// 当外部约束条件允许时，AspectRatio会尽可能地扩展以满足指定的宽高比。
// 如果在满足所有限制条件之后无法找到一个可行的尺寸，AspectRatio会选择满足外部约束的尺寸，忽略比例。
// aspectRatio是宽高比参考值，但具体的布局可能受到外部因素的影响。
// child是需要调整比例的子组件。

Flutter Card 组件说明

// Card组件是一个卡片块，它可以容纳多种类型的Widget。
// Card具有圆角和阴影效果，使其具有立体感。
// margin定义了Card的外边距。
// child是Card内部的子组件。
// Shape用于定义Card的阴影效果，例如其形状为圆角的长方形边。

Card与AspectRatio结合使用的 代码案例

// 下面是一个案例，展示了如何在Flutter中使用Card和AspectRatio组件。
// ListView中的每一项是一个Card，Card内部有一个按照16:9比例的图片和一个ListTile。
// ListTile显示了图片的标题和作者，并且都进行了文本溢出的处理。
return ListView(
  children: listData.map((val) {
    return Card(
      child: Column(
        children: <Widget>[
          AspectRatio(
            aspectRatio: 16 / 9,
            child: Image.network(val['imageUrl'], fit: BoxFit.cover,),  // 使用网络图片，并保持图片的比例
          ),
          ListTile(
            leading: ClipOval(
              child: Image.network(val['imageUrl'], height: 40, width: 40, fit: BoxFit.cover,),  // 圆形图片
            ),
            title: Text(val['title'],
              overflow: TextOverflow.ellipsis,  // 标题超出一行则用省略号表示
              maxLines: 1,),
            subtitle: Text(val['author'],
              overflow: TextOverflow.ellipsis,  // 作者名超出两行则用省略号表示
              maxLines: 2,),
          )
        ],
      ),
    );
  }).toList()
);