我想让我的 gridview 占据整个屏幕,但我找不到办法做到这一点。 我已经检查了多个博客,例如: https://medium.com/nusanet/flutter-gridview-bad48c1f216c
但这对我来说似乎不起作用。 即使我使用 MediaQuery Data 获取屏幕宽度和高度以适应 childAspectRation。
这里是我的网格视图:
GridView.count(
childAspectRatio: (widthScreen / heightScreen),
shrinkWrap: true,
crossAxisCount: 2,
physics: NeverScrollableScrollPhysics(),
crossAxisSpacing: 15,
mainAxisSpacing: 10,
padding: const EdgeInsets.all(5),
children: <Widget>[
CardItem(
imageUrl: 'assets/images/apprendreajouer.jpg',
title: 'Apprendre à jouer',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Cours",
pageKey: 1,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/exercices.jpeg',
title: 'Exercice',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Exercices",
pageKey: 2,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/partition.jpg',
title: 'Partition',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Partition",
pageKey: 3,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/dictionnaire.jpeg',
title: 'Mon dictionnaire',
function: () {
Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => ListLevelsPage(
pageTitle: "Dictionnaire d'accords",
pageKey: 4,
context: context,
),
),
);
},
),
CardItem(
imageUrl: 'assets/images/examen.jpeg',
title: 'Examen',
),
CardItem(
imageUrl: 'assets/images/apropos.jpg',
title: 'A propos',
),
],
),
下面是我想要的图片:
更新我使用@Thierry 源代码得到的内容:
答案 0 :(得分:0)
您的代码存在一些差异。
你不能定义:
children
为您的 GridView
childAspectRatio
个,共 widthScreen / heightScreen
个crossAxisCount: 2
如果将 childAspectRatio
的数量减少到 4,您可以保留 crossAxisCount
和 children
。
如果您想要 3 children
上的 6 Rows
,请将 childAspectRatio
更改为 MediaQuery.of(context).size.aspectRatio * 3 / 2
。
如果您想要 2 children
上的 6 Rows
,则将 crossAxisCount
增加到 3,并将 childAspectRatio
更改为 MediaQuery.of(context).size.aspectRatio * 2 / 3
。
注意:您可以继续这样。如果你想要 m Rows
的 n children
,childAspectRatio
应该是 m/n
。
children
on 3 Rows
)import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
),
);
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('GridView Demo')),
body: LayoutBuilder(
builder: (context, constraints) => GridView.count(
childAspectRatio: constraints.biggest.aspectRatio * 3 / 2,
shrinkWrap: true,
crossAxisCount: 2,
physics: NeverScrollableScrollPhysics(),
children: List.generate(
6,
(index) => Padding(
padding: const EdgeInsets.all(4.0),
child: CardItem(
imageUrl: 'assets/images/abstract$index.jpg',
title: 'Abstract $index',
),
),
).toList(),
),
),
);
}
}
class CardItem extends StatelessWidget {
final String imageUrl;
final String title;
final VoidCallback function;
const CardItem({Key key, this.imageUrl, this.title, this.function})
: super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: function,
child: Card(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(imageUrl),
fit: BoxFit.cover,
alignment: Alignment.topCenter,
),
),
child: Text(title),
),
),
);
}
}