我如何布局 GridView.count 以便小部件从 Flutter 中父小部件的顶部开始构建？

Question

当我构建一个 GridView.count - 它使子部件居中时，如何让它们在 Flutter 中从其父部件的最中心顶部开始构建？

我找不到合适的 属性 来执行此操作。我尝试将 Gridview.count 包装在一个与 topCenter 对齐的 Align 小部件中，但这也没有用。

（附上示例图片）。

谢谢！

                  Expanded(
                    flex: 2,
                    child: Container(
                      color: Colors.greenAccent,
                      child: Align(
                        alignment: Alignment.topCenter,
                        child: GridView.count(
                          childAspectRatio: 1.5,
                          crossAxisCount: 2,
                          mainAxisSpacing: 10,
                          crossAxisSpacing: 10,
                          children: [
                            Container(
                              color: Colors.grey,
                            ),
                            Container(
                              color: Colors.blue,
                            ),
                            Container(
                              color: Colors.orange,
                            ),
                            Container(
                              color: Colors.purple,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),

Answer 1

我认为父窗口小部件树中还有其他内容。检查 https://dartpad.dev/735baabeb592535b2c272a05e0e24344?null_safety=true

它与顶部对齐

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  Container(
                      color: Colors.greenAccent,
                      child: Align(
                        alignment: Alignment.topCenter,
                        child: GridView.count(
                          childAspectRatio: 1.5,
                          crossAxisCount: 2,
                          mainAxisSpacing: 10,
                          crossAxisSpacing: 10,
                          children: [
                            Container(
                              color: Colors.grey,
                            ),
                            Container(
                              color: Colors.blue,
                            ),
                            Container(
                              color: Colors.orange,
                            ),
                            Container(
                              color: Colors.purple,
                            ),
                          ],
                        ),
                      ),
                    )
                  ;
  }
}

Answer 2

只是指出它与您发布的小部件无关：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Column(
          children: [
            Container(
              width: double.infinity,
              height: 140,
              color: Colors.black,
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.greenAccent,
                child: Align(
                  alignment: Alignment.topCenter,
                  child: GridView.count(
                    childAspectRatio: 1.5,
                    crossAxisCount: 2,
                    mainAxisSpacing: 10,
                    crossAxisSpacing: 10,
                    children: [
                      Container(
                        color: Colors.grey,
                      ),
                      Container(
                        color: Colors.blue,
                      ),
                      Container(
                        color: Colors.orange,
                      ),
                      Container(
                        color: Colors.purple,
                      ),
                    ],
                  ),
                ),
              ),
            ),
            Spacer(),
          ],
        ),
      ),
    );
  }
}