Flutter中GridTile内容不显示问题求助

问题原因分析 #

1. GridTile的footer组件使用不当：直接用Text作为footer缺少布局约束，无法正常渲染；GridTile的header/footer更适合用GridTileBar来保证样式和布局的一致性。
2. 冗余布局嵌套干扰约束：body里的Center和外层Container会打乱GridView的布局逻辑，GridView本身可自适应占满可用空间，无需额外居中包裹。
3. child层级冗余：SizedBox包裹Card属于多余嵌套，Card本身可自适应布局。

修复后的代码 #

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class MyHomePageState extends State<MyHomePage> {
  bool _click = false;

  void clicker() {
    setState(() {
      _click = !_click;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      // 移除多余的Center和Container，让GridView直接获取正确布局约束
      body: GridView.builder(
        padding: const EdgeInsets.all(10), // 添加内边距避免内容贴边
        itemCount: xer.length,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          childAspectRatio: 3 / 2,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
        itemBuilder: (context, index) {
          return GridTile(
            child: Card(
              child: Center( // 让内部文本居中显示
                child: Text(xer[index]), // 绑定列表数据，直观验证显示效果
              ),
            ),
            header: const GridTileBar(
              backgroundColor: Colors.green,
              title: Text("header"),
            ),
            // footer改用GridTileBar，确保布局和样式正常
            footer: const GridTileBar(
              backgroundColor: Colors.grey,
              title: Text("footer text"),
              titleAlignment: ListTileTitleAlignment.center,
            ),
          );
        },
      ),
    );
  }
}

List<String> xer = ["orange", "banana", "strawberry"];

关键修复点 #

• 移除body中多余的Center和Container，让GridView直接获取父组件的布局约束。
• 将footer的Text替换为GridTileBar，保证footer区域有正确的背景和布局逻辑。
• 简化GridTile的child层级，去掉不必要的SizedBox，并让内部文本居中显示。
• 绑定列表数据到Text组件，方便直观验证内容是否正常显示。

内容的提问来源于stack exchange，提问作者Blue M