Flutter – 构建井字游戏

简介

Flutter是一种新的跨平台移动应用程序框架，由谷歌推出，具有快速开发、高性能、低成本和艺术般的体验。利用Flutter，可以在iOS和Android上构建高性能应用程序，同时也可在Web和桌面上构建应用程序。在本篇文章中，我们将使用Flutter构建经典的井字游戏。

构建井字游戏

要构建井字游戏，我们需要了解Flutter中的几个概念：Widget，StatefulWidget和State。

Widget是Flutter中的基本组件，它定义了UI元素的外观和行为。它可以是文本、图像、按钮或任何其他UI元素。

StatefulWidget是一个可变的widget，它的外观和行为取决于它的状态。StatefulWidget通常由两个类组成：一个StatefulWidget类和一个State类。

State是一个不变的对象，它包含widget的状态和build方法。在build方法中，我们可以根据widget的状态显示不同的UI元素。

下面是一个基本的井字游戏的Flutter代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tic Tac Toe',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tic Tac Toe'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

在这个代码中，我们定义了一个MyApp类，它继承自StatelessWidget类。在MyApp类中，我们重写了build方法，并返回一个MaterialApp widget，这是Flutter应用程序的基本组件。在MaterialApp widget中，我们定义了应用程序的标题和主页。

在主页中，我们使用Scaffold widget来构建UI，它是一个基础的Material Design布局。在Scaffold widget中，我们定义了应用程序栏的标题，以及一个居中的Text widget，显示“Hello, World!”。

接下来，我们将实现Tic Tac Toe游戏的逻辑和UI。

首先，我们定义一个TicTacToe类，它继承自StatefulWidget类，以及一个TicTacToeState类，它继承自State类：

class TicTacToe extends StatefulWidget {
  @override
  _TicTacToeState createState() => _TicTacToeState();
}

class _TicTacToeState extends State<TicTacToe> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

在_TicTacToeState类中，我们重写了build方法，并返回一个Container widget。这个Container widget将用于显示游戏的UI。

接下来，我们将添加一些状态用于跟踪游戏的状态，例如棋盘、玩家落子的位置等等。在_TicTacToeState类中，我们添加以下变量：

List<String> board = List.filled(9, '');
bool xTurn = true;

在board变量中，我们将记录棋盘上每个位置所包含的标记，'O'表示玩家O的标记，'X'表示玩家X的标记，空表示该位置未被填充。

在xTurn变量中，我们将记录当前玩家的标记。如果是玩家X的回合，xTurn将为true；如果是玩家O的回合，xTurn将为false。

接下来，我们将实现棋盘的UI。在_TicTacToeState类中，我们可以这样实现：

Widget buildBoard() {
  return GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3,
      childAspectRatio: 1.0,
      crossAxisSpacing: 4.0,
      mainAxisSpacing: 4.0,
    ),
    itemCount: 9,
    itemBuilder: (context, index) {
      return GestureDetector(
        onTap: () {
          if (board[index] == '') {
            setState(() {
              board[index] = xTurn ? 'X' : 'O';
              xTurn = !xTurn;
            });
          }
        },
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
          ),
          child: Center(
            child: Text(
              board[index],
              style: TextStyle(fontSize: 48.0),
            ),
          ),
        ),
      );
    },
  );
}

在buildBoard方法中，我们使用GridView.builder widget来构建九宫格的棋盘。在GridView.builder widget中，我们使用SliverGridDelegateWithFixedCrossAxisCount来指定网格的行和列数量。然后，在itemBuilder方法中，我们使用GestureDetector widget来处理玩家点击棋盘的事件。如果玩家点击一个未被填充的位置，我们将填充该位置并切换到下一个玩家的回合。

最后，我们在_TicTacToeState类中重写build方法，返回Scaffold widget，构建整个应用程序的UI。在Scaffold widget的body中，我们将调用我们刚刚实现的buildBoard方法来显示棋盘的UI。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Tic Tac Toe'),
    ),
    body: buildBoard(),
  );
}

到此，我们已经完成了一个基本的井字游戏。完整的代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tic Tac Toe',
      home: TicTacToe(),
    );
  }
}

class TicTacToe extends StatefulWidget {
  @override
  _TicTacToeState createState() => _TicTacToeState();
}

class _TicTacToeState extends State<TicTacToe> {
  List<String> board = List.filled(9, '');
  bool xTurn = true;

  Widget buildBoard() {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        childAspectRatio: 1.0,
        crossAxisSpacing: 4.0,
        mainAxisSpacing: 4.0,
      ),
      itemCount: 9,
      itemBuilder: (context, index) {
        return GestureDetector(
          onTap: () {
            if (board[index] == '') {
              setState(() {
                board[index] = xTurn ? 'X' : 'O';
                xTurn = !xTurn;
              });
            }
          },
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(color: Colors.black),
            ),
            child: Center(
              child: Text(
                board[index],
                style: TextStyle(fontSize: 48.0),
              ),
            ),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tic Tac Toe'),
      ),
      body: buildBoard(),
    );
  }
}