我正在用Fighter编写数独应用程序.目前，电网部分.
理想情况下，我希望实现这样的网格:
这一款有:
- 正方形网格和单元格.
- 占据整个细胞的线索.
- 周围有一些边界的细胞.
- 一些边框比另一些边框更大(在3x3正方形的边缘).
但最重要的是，栅格应为be adaptive(当空间不足时调整大小). 我所有的try (大约3天的try )都失败了，因为它们不适应……
我正在用Fighter编写数独应用程序.目前，电网部分.
理想情况下，我希望实现这样的网格:
这一款有:
但最重要的是，栅格应为be adaptive(当空间不足时调整大小). 我所有的try (大约3天的try )都失败了，因为它们不适应……
try 了一下--最后用了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,
),
),
),
],
),
),
);
}