Gridtile 内容不显示

Question

gridView 的孩子没有出现，我忽略了为什么会这样。这在处理我的主要代码时一直困扰着我，这就是为什么我决定创建这个快速代码来测试为什么它没有出现并且仍然无法得出结论。请注意，它与 List.builder 配合使用效果很好，有人可以帮我显示内容吗？

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  @override
  bool _click = false;
  void clicker() {
    setState(() {
      _click = !_click;
    });
  }

  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: Container(
              child: GridView.builder(
                  itemCount: xer.length,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 1,
                    childAspectRatio: 3 / 2,
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                  ),
                  itemBuilder: (BuildContext, index) {
                    return GridTile(
                        child: SizedBox(
                          child: Card(
                            child: Column(
                              children: [
                                Expanded(
                                  child: Container(
                                    child: Text("text"),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        header: GridTileBar(
                          backgroundColor: Colors.green,
                          title: Text("return"),
                        ),
                        footer: Text("footer text"));
                  }))),
    );
  }
}

List xer = ["orange", "banana", "strawberry"];

Answer 1

确保 GridView 放置在可以滚动的小部件内。如果 GridView 不在 ListView、NestedScrollView 或其他滚动小部件内，它可能不会出现在屏幕上

Answer 2

我想我明白你想做什么。我的解决方案是：

@override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      appBar: AppBar(),
      body: GridView.builder(
          itemCount: xer.length,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 1,
            childAspectRatio: 3/ 2,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          ),
          itemBuilder: (context, index) {
            return GridTile(
               header: const GridTileBar(
                  backgroundColor: Colors.green,
                  title: Text("return"),
                ),
                footer: const Text("footer text"),
                child: Column( // <- column should be the first widget if you include multiple widgets as child
                  children: [
                    Expanded( //<- expands next widget to be at maximum allowed size constrained by parent
                      child: Material( //<- mimics the look of Card widget while allowing for more freedom in customizing 
                        borderRadius: BorderRadius.circular(15),
                        elevation: 10,
                        child: const Center(
                          child: Text("text", style: TextStyle(color: Colors.black),),
                        ),
                      ),
                    ),
                  ],
                ),
               );
          }),
    );
  }

如果在 Card-like 列中包含多个小部件，则如下所示：

child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.max, // <- column should be the first widget if you include multiple widgets as child
                  children: [
                    Expanded(
                      child: Material( //<- mimics the look of Card widget while allowing for more freedom in customizing 
                        borderRadius: BorderRadius.circular(15),
                        elevation: 10,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text("text", style: TextStyle(color: Colors.black),),
                            Text("text", style: TextStyle(color: Colors.black),),
                            Text("text", style: TextStyle(color: Colors.black),),
                            Text("text", style: TextStyle(color: Colors.black),),
                            
                           
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
          

这也是 GridTile 子参数的文档：

填充磁贴的小部件。 这个小部件只能有一个孩子。要布置多个孩子，让这个小部件的孩子是一个小部件，例如 [Row]、[Column] 或 [Stack]，它们具有 children 属性，然后将孩子提供给那个小部件。

还修复了一些不需要的容器，并添加了 const 关键字以进行优化；）

Answer 3

答案很明显，就是gridtile child没有居中。