Flutter数独应用开发求助：自适应标准数独网格实现遇阻

以下是满足你所有需求的实现代码，核心解决自适应正方形网格、区块粗边框等问题：

核心组件代码 #

import 'dart:math';
import 'package:flutter/material.dart';

class SudokuGrid extends StatelessWidget {
  final List<List<int?>> puzzle;

  const SudokuGrid({super.key, required this.puzzle});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        // 取宽高中的最小值作为网格边长，保证正方形
        final gridSize = min(constraints.maxWidth, constraints.maxHeight);
        final cellSize = gridSize / 9;

        return SizedBox.square(
          dimension: gridSize,
          child: GridView.count(
            crossAxisCount: 9,
            padding: EdgeInsets.zero,
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            children: List.generate(81, (index) {
              final row = index ~/ 9;
              final col = index % 9;
              final value = puzzle[row][col];

              return Container(
                decoration: BoxDecoration(
                  border: _getCellBorder(row, col),
                ),
                child: Center(
                  child: value != null
                      ? Text(
                          value.toString(),
                          style: TextStyle(
                            fontSize: cellSize * 0.6,
                            fontWeight: FontWeight.bold,
                          ),
                        )
                      : null,
                ),
              );
            }),
          ),
        );
      },
    );
  }

  // 根据单元格位置返回对应边框样式
  BoxBorder _getCellBorder(int row, int col) {
    const thinBorder = 1.0;
    const thickBorder = 2.0;

    return Border(
      top: BorderSide(
        width: row == 0 || row % 3 == 0 ? thickBorder : thinBorder,
        color: Colors.black,
      ),
      left: BorderSide(
        width: col == 0 || col % 3 == 0 ? thickBorder : thinBorder,
        color: Colors.black,
      ),
      bottom: BorderSide(
        width: row == 8 || (row + 1) % 3 == 0 ? thickBorder : thinBorder,
        color: Colors.black,
      ),
      right: BorderSide(
        width: col == 8 || (col + 1) % 3 == 0 ? thickBorder : thinBorder,
        color: Colors.black,
      ),
    );
  }
}

使用示例 #

class SudokuScreen extends StatelessWidget {
  // 示例数独数据，null代表空白单元格
  final puzzle = [
    [5, 3, null, null, 7, null, null, null, null],
    [6, null, null, 1, 9, 5, null, null, null],
    [null, 9, 8, null, null, null, null, 6, null],
    [8, null, null, null, 6, null, null, null, 3],
    [4, null, null, 8, null, 3, null, null, 1],
    [7, null, null, null, 2, null, null, null, 6],
    [null, 6, null, null, null, null, 2, 8, null],
    [null, null, null, 4, 1, 9, null, null, 5],
    [null, null, null, null, 8, null, null, 7, 9],
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('数独')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SudokuGrid(puzzle: puzzle),
      ),
    );
  }
}

关键特性说明 #

• 自适应正方形网格：通过LayoutBuilder获取父容器可用空间，取宽高最小值作为网格边长，确保网格始终为正方形，且不会超出父容器范围。
• 单元格边框与区块粗边：_getCellBorder函数根据单元格的行列位置判断，网格外边框和3×3区块之间的边框使用粗线，内部单元格使用细线，完全匹配标准数独样式。
• 提示内容填满单元格：文字大小按单元格尺寸的60%比例设置，配合Center居中，既保证内容填满单元格，又不会出现文字溢出问题。
• 无冗余滚动：设置NeverScrollableScrollPhysics禁用网格滚动，因为自适应后网格刚好填满可用空间，无需滚动。

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