网络图像适合卡片，而不会在颤振中松散带有网格视图的卡片形状

Question

在通缉的视图中，有一个两列的网格列表，其项设计需要在卡的背景中设置图像，并且卡具有一定的半径，图像是网络图像，但卡大小根据网络图像而波动。我也尝试过this，但没有用。

这是代码

Container(
  child: Column(
  children: <Widget>[
       Expanded(
                    child: Card(
                        clipBehavior: Clip.antiAlias,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10.0),
                          child: Image.network(
                            event_response.imageLogoUrl +
                                event_response.eventList[position].event_logo,
                            fit: BoxFit.cover,
                          ),
                        )),
                  ),
                          Container(
                           padding: const EdgeInsets.all(5.0),
                           child  :Text('${event_response.eventList[position].eventName}'),
                        )
                      ],

                );},),),],),);

我想在这里，但在2列中。

我在这里得到

Answer 1

将Card包裹到Expanded中，并在BoxFit.cover中使用Image。

                Column(children: <Widget>[
                     Expanded(
                        child: Card(
                             clipBehavior: Clip.antiAlias,
                             shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0),),
                             child: Image.network(event_response.imageLogoUrl+event_response.eventList[position].event_logo, fit: BoxFit.cover,
                             )
                             ),
                         ),
                      Container(
                       padding: const EdgeInsets.all(5.0),
                       child  :Text('${event_response.eventList[position].eventName}'),
                    )

Answer 2

为了使图像的角变圆，您必须将其包装在ClipRRect小部件中，并将其边框半径设置为与卡片相同。

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
  Expanded(
    child: Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10.0),
                      child: Image.network(
            event_response.imageLogoUrl +
                event_response.eventList[position].event_logo,
            fit: BoxFit.cover,
          ),
        )),
  ),
  Container(
    padding: const EdgeInsets.all(5.0),
    child: Text('${event_response.eventList[position].eventName}'),
  )
]);