如何在列中居中 GridView.builder？

Question

我正在尝试将 GridView 置于 phone 屏幕的中央。

我已经尝试过使用 crossAxisAlignment 和 mainAxisAlignment，但没有用。下面是我当前的代码。

class CommanderDamage extends StatefulWidget {
  int damage = 0;
  CommanderDamage({this.damage, Key key});

  @override
  State<StatefulWidget> createState() {
    return CommanderDamageState();
  }
}

class CommanderDamageState extends State<CommanderDamage> {
  var damage = [0, 0, 0, 0, 0, 0];
  @override
  Widget build(context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [Color(0xfff6921e), Color(0xffee4036)],
                  ),
                ),
                child: GridView.builder(                 
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2),
                  itemCount: damage.length,
                  itemBuilder: (BuildContext context, index) {
                    return Column(
                      children: <Widget>[
                        Expanded(
                          child: InkWell(
                            onTap: () {
                              setState(() {
                                damage[index]++;
                              });
                            },
                            onLongPress: () {
                              setState(() {
                                damage[index] = 0;
                              });
                            },
                            child: Column(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.all(15),
                                  child: Text(
                                    'Player ${index + 1}',
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 20.0,
                                        fontWeight: FontWeight.bold),
                                  ),
                                ),
                                Text(
                                  damage[index].toString(),
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 35.0,
                                      fontWeight: FontWeight.bold),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

目前，网格从屏幕顶部开始，我希望它位于正中央。 Here is a mockup 它的外观与我的预期。

Answer 1

将您的 Container 与中心对齐。
如kekub所说，删除Expanded，因为它将填充主轴上任何剩余的space。
正如 nonybrighto 所说，将 shrinkWrap: true 添加到您的 GridView，这样它就不会填满所有垂直 space。
将你最后一个 Column 的主轴对齐中心。

你最终会得到这样的结果：

@override
Widget build(context) {
  return MaterialApp(
    home: Scaffold(
      body: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color(0xfff6921e), Color(0xffee4036)],
          ),
        ),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemCount: damage.length,
          shrinkWrap: true,
          itemBuilder: (BuildContext context, index) {
            return InkWell(
              onTap: () {
                setState(() {
                  damage[index]++;
                });
              },
              onLongPress: () {
                setState(() {
                  damage[index] = 0;
                });
              },
              child: Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(15),
                      child: Text(
                        'Player ${index + 1}',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 20.0,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    Text(
                      damage[index].toString(),
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 35.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    ),
  );
}

但是，当您收缩包裹时，Android 的过度滚动效果会变得很奇怪，因为您的 GridView 不再使用整个垂直 space。我建议将 GridView 的物理学更改为 BouncingScrollPhysics。

如何在列中居中 GridView.builder？

How do I center a GridView.builder within a column?

layout

gridview

dart

flutter