在想要的视图中,有一个两列的网格列表,它的项目设计需要在卡片的背景中设置一个图像,卡片有一定的半径,图像是网络图像,但卡片大小会根据网络图像而波动。我也试过这个,但没有用。
这是代码
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}'),
)
],
);},),),],),);
Run Code Online (Sandbox Code Playgroud)
在这里,我想要但在 2 列中。
在这里我得到
当我向卡中添加图像时,卡顶部的半径被覆盖。我该如何解决?
当我向卡中添加图像时,卡顶部的半径被覆盖。我该如何解决?
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.yellow),
home: Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(title: Text('Demo'),),
body: SizedBox(
height: 310.0,
child: Card(
elevation: 3.0,
color: Colors.white,
margin: EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 0.0,),
Image.network('https://img.zcool.cn/community/012157578c405f0000012e7e69e7cd.jpg@1280w_1l_2o_100sh.jpg'),
SizedBox(height: 16.0,),
Row(
children: <Widget>[
SizedBox(width: 16.0,),
Text('??', style: Theme.of(context).textTheme.headline,),
SizedBox(width: 16.0,),
Text('????', style: Theme.of(context).textTheme.subhead,),
],
),
SizedBox(height: 16.0,),
],
),
))),
);
}
}
Run Code Online (Sandbox Code Playgroud)
这是渲染