Блог

Главная - Вопросы по программированию - Как выровнять виджеты в GridView в Flutter?

Как выровнять виджеты в GridView в Flutter?

#flutter #gridview #alignment

#flutter #gridview #выравнивание

Вопрос:

Я хочу выровнять содержимое элемента GridView по центру (как по вертикали, так и по горизонтали) без изменения размера виджета.

Этот код создает a GridView с элементом в нем, он имеет выравнивание по центру сверху по умолчанию, а размер является квадратом по умолчанию.

 GridView.count(
  crossAxisCount: 3, 
  children: [
    Container(
      // alignment: Alignment.center,
      child: RaisedButton(
        child: Column(
          children: [
            Text("Top text"),
            Text("Bottom text"),
          ],
        ),
        onPressed: (){}
      ),
    ),
  ],
);

И это выглядит так:Без выравнивания

Когда я раскомментирую выравнивание, оно не выравнивает элементы правильно, и размер элемента изменяется, я не хочу ни того, ни другого.

С выравниванием

Обратите внимание, что мне нужно несколько Widget s в этом GridView элементе, поэтому я не могу удалить Column его (но, может быть, я могу заменить его?).

Комментарии:

1. Просто добавьте MainAxisAlignment.center в виджет столбца, чтобы выровнять все его содержимое по центру следующим образом>> Столбец (mainAxisAlignment: MainAxisAlignment.center, дочерние элементы:[…….]);

2. @bluenile Спасибо, с вашим кодом Widget он выровнен по центру, как я и хотел. Хотя его размер все еще изменился , есть ли у вас какие-либо идеи, как этого избежать?

Ответ №1:

Я не вижу никаких изменений размера после добавления mainAxisAlignment в столбец. Пожалуйста, запустите приведенный ниже код :

 import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 3,
      children: [
        Container(
          // alignment: Alignment.center,
          child: RaisedButton(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("Top text"),
                  Text("Bottom text"),
                ],
              ),
              onPressed: () {}),
        ),
      ],
    );
  }
}