是否可以在 Flutter 中启动 SizedBox 的二维数组（例如，我需要某种正方形）

Question

我想在 Flutter 中编写国际象棋游戏，所以首先我需要制作自己的棋盘。为此，我想我可以启动一个 SizedBox-es 的二维数组（同样，不一定）并像真正的棋盘一样给它上色。但是可能吗？

Answer 1

更好的选择是像这样添加一个 gridView：

GridView.builder(
                        itemCount: 64,
                        gridDelegate:
                            SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 8,
                                crossAxisSpacing: 4.0,
                                mainAxisSpacing: 4.0),
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            color: index%2 == 0 ? Colors.white : Colors.black
                          );
                        },
                      )

如果您有SizedBox，您将很难添加颜色、硬币图像和对齐方式等

Answer 2

您可以复制粘贴运行下面的完整代码
您可以直接使用包 https://pub.dev/packages/flutter_chess_board 或参考它的源代码
buildChessBoard
的代码片段 https://github.com/deven98/flutter_chess_board/blob/c8042f2aa499158c10b87aca339a9a19198ce2f3/lib/src/chess_board.dart#L182

var whiteSquareList = [
  [
    "a8",
    "b8",
    "c8",
    "d8",
    "e8",
    "f8",
    "g8",
    "h8",
...
Widget buildChessBoard() {
    return Column(
      children: widget.whiteSideTowardsUser
          ? whiteSquareList.map((row) {
              return ChessBoardRank(
                children: row,
              );
            }).toList()
          : whiteSquareList.reversed.map((row) {
              return ChessBoardRank(
                children: row.reversed.toList(),
              );
            }).toList(),
    );
  } 
...
class ChessBoardRank extends StatelessWidget {
  /// The list of squares in the rank
  final List<String> children;

  ChessBoardRank({this.children});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Row(
        children: children
            .map(
              (squareName) => BoardSquare(squareName: squareName),
            )
            .toList(),
      ),
    );
  }
}

工作演示

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter_chess_board/src/chess_board.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ChessBoard(
              onMove: (move) {
                print(move);
              },
              onCheckMate: (color) {
                print(color);
              },
              onDraw: () {},
              size: MediaQuery.of(context).size.width,
              enableUserMoves: true,
            )
          ],
        ),
      ),
    );
  }
}

是否可以在 Flutter 中启动 SizedBox 的二维数组（例如，我需要某种正方形）

Is it possible to initiate a 2 dimensional array of SizedBox (as an example, I need some kind of square) in Flutter

flutter

desktop-application