flutter - 无法在列中设置 GridView

Question

我需要将许多项目设置到 GridView 中。但我需要在 GridView 上方写一些东西，这就是为什么我需要一个包含文本和 GridView 的列。但是，如果我在 GridView 下方设置了一些文本，那么它就不起作用了。这是我的代码:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hamim Shop',
      home: Scaffold(
        body: Container(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Text('Hamim Shop'),
              GridView.count(
                crossAxisCount: 3,
                children: List.generate(choices.length, (index) {
                  return Center(
                    child: ChoiceCard(choice: choices[index]),
                  );
                }),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

从这里编辑:

选择卡:

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    return Card(
        color: Colors.white,
        child: Center(
          child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(child: Icon(choice.icon, size: 150)),
                Text(choice.title),
              ]),
        ));
  }
}

...

class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}

const List<Choice> choices = const [
  const Choice(title: 'Car', icon: Icons.directions_car),
  .....
];

Answer 1

使用shr​​inkwrap:true & physics:NeverScrollableScrollPhysics()

物理学:不允许用户滚动的滚动物理。意味着只有 Column+SingleChildScrollView 滚动工作。

收缩包装:

如果您不设置 shrinkWrap 属性，您的 GridView 将与其父 View 一样大。

如果您将其设置为 true，GridView 将包装其内容，并在其子项允许的范围内变大。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hamim Shop',
      home: Scaffold(
        body: Container(
          padding: const EdgeInsets.all(8.0),
          child: SingleChildScrollView(
            child: Column(
              children: [
                Text('Hamim Shop'),
                GridView.count(
                  shrinkWrap: true,
                  physics: NeverScrollableScrollPhysics(),
                  crossAxisCount: 3,
                  children: List.generate(choices.length, (index) {
                    return Center(
                      child: ChoiceCard(choice: choices[index]),
                    );
                  }),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({Key key, this.choice}) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    return Card(
        color: Colors.white,
        child: Center(
          child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(child: Icon(choice.icon, size: 150)),
                Text(choice.title),
              ]),
        ));
  }
}
class Choice {
  const Choice({this.title, this.icon});
  final String title;
  final IconData icon;
}

const List<Choice> choices = const [
const Choice(title: 'Car', icon: Icons.directions_car),
....
];