在 Flutter 中创建响应式 Tic Tac Toe 字段布局

Question

我目前正在致力于在 Flutter 中实现响应式 Tic Tac Toe 字段，并且遇到了布局问题。我已经成功地显示了“十字”和“圆圈”符号，但挑战在于井字棋字段本身的布局。

Column(children: Expanded(Container(
  margin: const EdgeInsets.fromLTRB(48, 44, 48, 14),
  color: TTColorTheme.onBackground,
  child: GridView.count(
    padding: EdgeInsets.zero,
    crossAxisCount: 3,
    mainAxisSpacing: 8,
    crossAxisSpacing: 8,
    physics: const NeverScrollableScrollPhysics(),
    children: List.generate(9, (index) {
      int row = index ~/ 3;
      int col = index % 3;
      return GestureDetector(
        onTap: () {},
        child: Container(
          padding: const EdgeInsets.all(20),
          color: TTColorTheme.background,
          child: null,
        ),
      );
    }),
  ),
),]); //...

为了不让任何人感到困惑，每次我谈论容器时，我指的是具有 onBackground 颜色的父容器。

问题的根源在于该字段位于 Column 小部件内，导致 Container 扩展以占用尽可能多的空间。为了解决这个问题，我必须以一种有点奇怪的方式调整边距，以确保只有定义了主/横轴间距的区域才会显示容器的颜色。

这种方法并不是真正的响应式，我尝试了几种解决方案，包括使用 Stack、IntrinsicHeight（以及容器的固定高度），但它们没有产生预期的结果。在每次尝试中，容器颜色的一小部分在边缘仍然可见，而且我还必须用边距在那里绕圈，以便它看起来正常。

我正在寻求有关如何为 Tic Tac Toe 字段创建响应式布局的建议，以确保它在各种屏幕尺寸和方向上正确显示。

Answer 1

尝试查看 ResponsiveWrapper -> responsive_framework

 return MaterialApp(
      builder: (context, widget) => ResponsiveWrapper.builder(
        ClampingScrollWrapper.builder(context, widget!),
        maxWidth: 1200,
        minWidth: 480,
        defaultScale: true,
        breakpoints: [
          ResponsiveBreakpoint.resize(480, name: MOBILE),
          ResponsiveBreakpoint.autoScale(800, name: TABLET),
          ResponsiveBreakpoint.autoScale(1000, name: DESKTOP),
        ],
      ),
      home: Scaffold(...