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

【问题标题】：How can I layout GridView.count so the widgets start building from the top of the parent widget in Flutter?如何布局 GridView.count 以便小部件从 Flutter 中的父小部件顶部开始构建？
【发布时间】：2021-09-01 02:10:20
【问题描述】：

当我构建一个 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,
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),

【问题讨论】：

你试过设置shrinkWrap = true吗？我无法复制您的问题，因为它涉及行或列
您已发布的小部件位于父级的顶部。显示父小部件，我们将为您提供帮助。
感谢您的快速回复！是的，我的父小部件树中有问题导致了问题，我在这里尝试了两个答案，现在已修复。干杯

标签： flutter user-interface layout

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我认为父小部件树中还有其他内容。检查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,
                            ),
                          ],
                        ),
                      ),
                    )
                  ;
  }
}

【讨论】：