GridView.builder 放在 Flutter 的容器中时,如何从顶部构建?

How can I have the GridView.builder build from the top when placed in a container in Flutter?

当我将 GridView.builder 放入一个特定大小的容器中时(因此 GridView.builder 只占据了这个 parent 的大小),我似乎无法得到它 children 自上而下构建。

相反,在开始构建之前顶部有一个间隙,底部有 none。我已尝试使用对齐小部件和 GridView.builder 参数,但我无法对其进行调整。

如何更改此设置,以便 children 可以自上而下构建(或者甚至将 children 居中,顶部和底部的空白 space 相等)?

这里是简化的代码:


import 'package:flutter/material.dart';

class GridViewExample extends StatefulWidget {
  const GridViewExample({Key? key}) : super(key: key);

  @override
  _GridViewExampleState createState() => _GridViewExampleState();
}

class _GridViewExampleState extends State<GridViewExample> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.topCenter,
        color: Colors.blue,
        width: 200,
        height: 500,
        child: GridView.builder(
          itemCount: 50,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 5,
          ),
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              color: Colors.orange,
            ),
          ),
        ),
      ),
    );
  }
}


[![GridImage][1]][1]


  [1]: https://i.stack.imgur.com/gjuRX.png

删除其默认填充:

GridView.builder(
          itemCount: 50,
          //add this line ---------<
          padding: EdgeInsets.zero,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 5,
          ),
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              color: Colors.orange,
            ),
          ),
        ),
MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: GridViewContainer(),
)

在 GridView 之前添加这个