Flutter二级路由MaterialApp主题不生效及GridView布局问题

文本显示为红色+黄色下划线的原因 #

该问题的核心诱因是二级路由/game的页面根节点没有使用Scaffold或其他Material组件。
Flutter的Text组件会向上遍历组件树，查找最近的DefaultTextStyle提供的样式配置，而这个默认样式通常由Material系列组件（Scaffold、Material）提供：

• 根路由表单页外层有官方Demo默认带的Scaffold，因此文本可以正常继承全局主题配置的黑色样式
• 二级路由直接返回自定义Grid组件，整个子树内没有Material组件提供默认文本样式，框架会触发兜底渲染规则：显示红色文本+黄色下划线，用来提示当前上下文缺少Material设计环境。

修复方式非常直接，给二级页面补上Scaffold根节点即可：

class Game extends StatelessWidget {
  const Game({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("游戏页")),
      body: const Grid(),
    );
  }
}

同时你之前将Expanded作为页面根节点的写法本身就存在语法问题——Expanded必须是Row/Column/Flex组件的直接子节点才能生效，补上Scaffold后该约束错误也会同步解决。

GridView加内边距溢出、尺寸计算问题 #

你当前的布局写法存在几个明显的逻辑问题：

• 直接使用MediaQuery.of(context).size获取的是整个设备屏幕的宽高，没有扣除状态栏、AppBar、安全区占用的空间，以此计算的单元格宽高比完全不准
• 你误将SliverGridDelegateWithFixedCrossAxisCount的childAspectRatio参数当成了GridView整体的宽高比，实际上该参数定义的是单个网格单元格的宽度/高度比值。按你之前的写法，用屏幕宽/屏幕高（常规手机约为0.56）计算，单个单元格高度会是宽度的近2倍，3行单元格总高度会远超屏幕可视范围，自然会出现溢出
• 外层嵌套的Expanded→Container→仅含单个GridView的Column属于完全冗余的嵌套，额外增加了布局约束的计算复杂度

更优实现方案 #

1. 如果要实现常见的正方形九宫格，不需要手动计算屏幕尺寸，直接将childAspectRatio设为1即可，框架会自动根据可用宽度、间距配置计算单元格尺寸
2. 内边距直接通过GridView自带的padding参数设置，不需要额外套一层Container
3. 如果需要自定义单元格宽高比，使用LayoutBuilder获取当前组件的实际可用约束计算，不要直接取全屏尺寸

修正后的Grid组件代码参考：

class _GridState extends State<Grid> {
  final _gridViewCrossAxisCount = 3;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      // 直接配置内边距，不会触发溢出
      padding: const EdgeInsets.all(16),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: _gridViewCrossAxisCount,
        childAspectRatio: 1, // 正方形单元格直接设为1
        crossAxisSpacing: 8, // 横向网格间距
        mainAxisSpacing: 8, // 纵向网格间距
      ),
      itemCount: widget.tokens.length,
      itemBuilder: (BuildContext context, int index) {
        return Container(
          decoration: cellDecoration(index, _gridViewCrossAxisCount),
          alignment: Alignment.center,
          child: Text(widget.tokens[index].toString()),
        );
      },
    );
  }
}

如果需要实现非正方形、严格撑满可用区域的网格，可以用LayoutBuilder拿到真实可用尺寸再计算比例：

@override
Widget build(BuildContext context) {
  return LayoutBuilder(
    builder: (context, constraints) {
      // constraints.maxWidth/maxHeight 为当前组件实际可用的宽高
      final availableWidth = constraints.maxWidth;
      final availableHeight = constraints.maxHeight;
      // 扣除padding、间距后计算单个单元格的实际宽高
      const crossSpacing = 8.0;
      const mainSpacing = 8.0;
      const padding = 16.0;
      final cellWidth = (availableWidth - padding*2 - crossSpacing*(_gridViewCrossAxisCount-1)) / _gridViewCrossAxisCount;
      final cellHeight = (availableHeight - padding*2 - mainSpacing*2) / 3; // 共3行
      return GridView.builder(
        padding: const EdgeInsets.all(padding),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: _gridViewCrossAxisCount,
          childAspectRatio: cellWidth / cellHeight,
          crossAxisSpacing: crossSpacing,
          mainAxisSpacing: mainSpacing,
        ),
        itemCount: widget.tokens.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            decoration: cellDecoration(index, _gridViewCrossAxisCount),
            alignment: Alignment.center,
            child: Text(widget.tokens[index].toString()),
          );
        },
      );
    },
  );
}

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