Sudoku Grid with Flutter

j0pj023g  于 2023-11-21  发布在  Flutter
关注(0)|答案(1)|浏览(113)

我正在用Flutter写数独应用程序。目前,网格部分。
理想情况下,我想实现这样的网格:


的数据
这一个有:
1.方形网格和单元格。
1.占据整个细胞的线索。
1.细胞周围有一些边界。
1.有些边界比其他边界大(在3x3正方形的边缘)。
但最重要的是,网格应该是自适应的(当没有足够的空间时调整大小)。我所有的尝试(大约3天的尝试)都失败了,因为它们不是自适应的。

xt0899hw

xt0899hw1#

尝试了一下,最后使用了flutter_layout_grid

import 'dart:math';

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

Widget sudokuGrid(BuildContext context) {
  return Center(
    // Aspect ratio will keep the cells as squares
    child: AspectRatio(
      aspectRatio: 1,
      child: LayoutGrid(
        // Set the cols and rows to be equal sizes
        columnSizes: List<TrackSize>.generate(9, (index) => 1.fr),
        rowSizes: List<TrackSize>.generate(9, (index) => 1.fr),
        children: [
          for (var j = 0; j < 9; j++)
            for (var i = 0; i < 9; i++)
              Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border(
                    // Conditionally set the border thickness
                    top: BorderSide(
                        color: Colors.black,
                        width: j > 0 && j % 3 == 0 ? 5 : 1),
                    right: BorderSide(
                        color: Colors.black,
                        width: i > 0 && i % 3 == 2 ? 5 : 1),
                    bottom: BorderSide(
                        color: Colors.black,
                        width: j < 8 && j % 3 == 2 ? 5 : 1),
                    left: BorderSide(
                        color: Colors.black,
                        width: i < 8 && i % 3 == 0 ? 5 : 1),
                  ),
                ),
                // Substitute text with text entry or
                // wrap with a gesture detector to make interactive
                child: Text(
                  "0",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.black,
                    // Responsive text size
                    fontSize: min(MediaQuery.of(context).size.width,
                            MediaQuery.of(context).size.height) /
                        25,
                  ),
                ),
              ),
        ],
      ),
    ),
  );
}

字符串

相关问题