Flutter:带有 Gridview 的卡片
Flutter : Card with Gridview
我是 flutter 的新手,我想做这个设计,我花了一段时间才找到要使用的东西,但每次我尝试编写代码并使用 Listview 时,它都会给我错误,或者卡片不对齐网格视图。
您可以在 Gridview Builder 中使用 Gridview 和 return 自定义样式的卡片 我将构建您需要的设计。
这是 GridView 官方文档。
[文档1
试试下面的代码希望对you.referGridView
here
有帮助
Center(
child: GridView.builder(
shrinkWrap: true,
padding: const EdgeInsets.symmetric(horizontal: 30),
itemCount: 4,
itemBuilder: (ctx, i) {
return Card(
child: Container(
height: 290,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20)),
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(5),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Image.network(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png',
fit: BoxFit.fill,
),
),
Text(
'Title',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Row(
children: [
Text(
'Subtitle',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
],
)
],
),
],
),
),
);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.0,
crossAxisSpacing: 0.0,
mainAxisSpacing: 5,
mainAxisExtent: 264,
),
),
),
您的结果屏幕->
我是 flutter 的新手,我想做这个设计,我花了一段时间才找到要使用的东西,但每次我尝试编写代码并使用 Listview 时,它都会给我错误,或者卡片不对齐网格视图。
您可以在 Gridview Builder 中使用 Gridview 和 return 自定义样式的卡片 我将构建您需要的设计。
这是 GridView 官方文档。 [文档1
试试下面的代码希望对you.referGridView
here
Center(
child: GridView.builder(
shrinkWrap: true,
padding: const EdgeInsets.symmetric(horizontal: 30),
itemCount: 4,
itemBuilder: (ctx, i) {
return Card(
child: Container(
height: 290,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20)),
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(5),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Image.network(
'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png',
fit: BoxFit.fill,
),
),
Text(
'Title',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Row(
children: [
Text(
'Subtitle',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 15,
),
),
],
)
],
),
],
),
),
);
},
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 1.0,
crossAxisSpacing: 0.0,
mainAxisSpacing: 5,
mainAxisExtent: 264,
),
),
),
您的结果屏幕->