代码之家 › 专栏 › 技术社区 › Farhana Naaz Ansari Jay Dwivedi

在颤振中,网络图像适合卡而不松散的卡形状和网格视图

material-design flutter dart android

Farhana Naaz Ansari Jay Dwivedi · 技术社区 · 7 年前

在所需视图中,有一个包含两列的网格列表,其项设计需要在卡的背景中设置一个图像,卡具有一定的半径,图像是网络图像,但卡的大小随网络图像的变化而变化。我试过了 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 回复 | 直到 7 年前

dshukertjr 7 年前

为了绕过图像的角落,您必须用clipcorrect小部件将其包装起来,并使其边界半径与您的卡相同。

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}'),
  )
]);

diegoveloper 7 年前

包装你的 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}'),
                    )