我正在用Flutter写数独应用程序。目前,网格部分。理想情况下,我想实现这样的网格:
的数据这一个有:1.方形网格和单元格。1.占据整个细胞的线索。1.细胞周围有一些边界。1.有些边界比其他边界大(在3x3正方形的边缘)。但最重要的是,网格应该是自适应的(当没有足够的空间时调整大小)。我所有的尝试(大约3天的尝试)都失败了,因为它们不是自适应的。
xt0899hw1#
尝试了一下,最后使用了flutter_layout_grid
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, ), ), ), ], ), ), ); }
字符串
1条答案
按热度按时间xt0899hw1#
尝试了一下,最后使用了
flutter_layout_grid
字符串