Не удается установить GridView в столбце - PullRequest
Новая
       1

Не удается установить GridView в столбце

3 голосов
/ 11 июля 2020

Мне нужно разместить много элементов в виде сетки. Но мне нужно написать что-то над представлением сетки, поэтому мне нужен столбец, содержащий текст и представление сетки. Но если я установлю текст под сеткой, это не сработает. Вот мой код: 

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

Отредактировано здесь:

После добавления shrinkWrap: true отображается эта ошибка

Карта выбора: 

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

1 Ответ

2 голосов
/ 11 июля 2020

Используйте shrinkwrap:true & physics:NeverScrollableScrollPhysics()

физику: Физика прокрутки, которая не позволяет пользователю прокручивать. Означает только работу с прокруткой Column + SingleChildScrollView.

shrinkwrap:

Если вы не установите свойство shrinkWrap, ваш GridView будет таким же большим, как и его родительский элемент.

Если вы установите для него значение 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),
....
];
...