Flutter填字游戏插件crossword的使用

介绍

Crossword 是一个用于在Flutter应用程序中无缝集成填字游戏解决方案的包。通过这个包，您可以轻松地为用户提供交互式和有趣的填字游戏体验。

特性

• 可定制的填字游戏组件：提供一个可定制的填字游戏组件，可以调整其外观、大小和布局以匹配您的应用设计。
• 用户友好的界面：界面简单易用，用户可以直观地导航、平移并选择字母来组成单词。
• 线索管理：通过传递单词列表到 Crossword 组件来轻松管理填字游戏的线索。

快速开始

安装

您只需将 crossword 添加为 pubspec.yaml 文件中的依赖项：

dependencies:
  crossword: ^1.3.1

然后在Dart代码中导入该包并实例化 Crossword 组件。

示例

以下是一个完整的示例demo，展示了如何使用 Crossword 包创建一个填字游戏：

import 'dart:math';
import 'package:crossword/crossword.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Crossword Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const GamePage(),
    );
  }
}

class GamePage extends StatefulWidget {
  const GamePage({super.key});

  @override
  State<GamePage> createState() => _GamePageState();
}

class _GamePageState extends State<GamePage> {
  List<List<String>> letters = [];
  List<Color> lineColors = [];

  List<int> letterGrid = [11, 14];

  List<List<String>> generateRandomLetters() {
    final random = Random();
    const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    List<List<String>> array = List.generate(
        letterGrid.first,
        (_) => List.generate(
            letterGrid.last, (_) => letters[random.nextInt(letters.length)]));

    return array;
  }

  Color generateRandomColor() {
    Random random = Random();

    int r = random.nextInt(200) - 128; // Red component between 128 and 255
    int g = random.nextInt(200) - 128; // Green component between 128 and 255
    int b = random.nextInt(200) - 128; // Blue component between 128 and 255

    return Color.fromARGB(255, r, g, b);
  }

  @override
  void initState() {
    super.initState();
    lineColors = List.generate(100, (index) => generateRandomColor()).toList();
  }

  GlobalKey<CrosswordState> crosswordState = GlobalKey<CrosswordState>();
  String word = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: SafeArea(
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 100),
                child: Text(word, style: const TextStyle(fontSize: 20)),
              ),
              Expanded(
                child: Crossword(
                  letterPopDecoration: const LetterPopDecoration(
                    onTouchPopScaleFactor: 1.5,
                    duration: Duration(milliseconds: 200),
                    onTouchLetterFontStyle: FontStyle.italic,
                  ),
                  revealLetterDecoration:
                      const RevealLetterDecoration(shakeOffset: Offset(10, 20)),
                  key: crosswordState,
                  allowOverlap: false,
                  letters: const [
                    ["F", "L", "U", "T", "T", "E", "R", "W", "U", "D", "B", "C"],
                    ["R", "M", "I", "O", "P", "U", "I", "Q", "R", "L", "E", "G"],
                    ["T", "V", "D", "I", "R", "I", "M", "U", "A", "H", "E", "A"],
                    ["D", "A", "R", "T", "N", "S", "T", "O", "Y", "J", "R", "M"],
                    ["O", "G", "A", "M", "E", "S", "C", "O", "L", "O", "R", "O"],
                    ["S", "R", "T", "I", "I", "I", "F", "X", "S", "P", "E", "D"],
                    ["Y", "S", "N", "E", "T", "M", "M", "C", "E", "A", "T", "S"],
                    ["W", "E", "T", "P", "A", "T", "D", "Y", "L", "M", "N", "U"],
                    ["O", "T", "E", "H", "R", "O", "G", "P", "T", "U", "O", "E"],
                    ["K", "R", "R", "C", "G", "A", "M", "E", "S", "S", "T", "S"],
                    ["S", "E", "S", "T", "L", "A", "O", "P", "U", "P", "E", "S"]
                  ],
                  spacing: const Offset(30, 30),
                  onLineUpdate: (String word, List<String> words, isLineDrawn) {
                    if (isLineDrawn) {
                      print(words);
                    } else {
                      print(word);
                    }
                  },
                  addIncorrectWord: false,
                  textStyle: const TextStyle(
                      color: Colors.blue,
                      fontSize: 16,
                      fontWeight: FontWeight.bold),
                  lineDecoration: const LineDecoration(
                    lineGradientColors: [
                      [
                        Colors.blue,
                        Colors.black,
                        Colors.red,
                        Colors.orange,
                        Colors.black,
                        Colors.amber,
                        Colors.green
                      ],
                    ],
                    strokeWidth: 26,
                    lineTextStyle: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontWeight: FontWeight.bold),
                  ),
                  hints: const ["FLUTTER", "GAMES", "UI", "COLORS"],
                ),
              ),
              ElevatedButton(
                  onPressed: () {
                    crosswordState.currentState!
                        .animate(offset: const Offset(7, 3));
                  },
                  child: const Text('Reveal Hint')),
            ],
          ),
        ));
  }
}

额外参数

除了上述的基本配置外，Crossword 组件还支持许多额外参数，例如：

• initialLineList: 初始线条列表
• acceptReversedDirection: 是否接受反向绘制单词
• drawCrossLine, drawVerticalLine, drawHorizontalLine: 控制是否允许用户在交叉、垂直或水平方向上绘制
• lineDecoration: 线条装饰样式
• textStyle: 字母样式
• transposeMatrix: 转置矩阵
• allowOverlap: 是否允许重叠单词
• addIncorrectWord: 是否允许绘制错误的线条

动画效果

Crossword 还提供了动画效果，如揭示字母动画（revealLetterDecoration）和字母弹出动画（letterPopDecoration）。可以通过全局键访问 Crossword 组件并调用 animate 方法来触发这些动画。

贡献

欢迎贡献！如果您发现bug或想添加新功能，请提交issue。

希望以上内容能帮助您更好地理解和使用 crossword 插件。如果有任何问题或需要进一步的帮助，请随时提问。