You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Flutter中实现横竖双向填字游戏?

实现横竖双向填字游戏的Flutter方案

我需要实现一个横竖双向填字游戏,但目前的代码仅支持横向布局。试过多个Flutter库都没找到合适的,了解到React生态中有react-crossword库可以实现类似效果,想请教如何在Flutter中实现相同的功能。

我的当前代码:

class AcrossAndDownWidget extends StatefulWidget {
  const AcrossAndDownWidget({
    super.key,
    required this.row,
    required this.col,
    required this.word,
  });

  final List<int> row;
  final List<int> col;
  final List<String> word;

  @override
  State<AcrossAndDownWidget> createState() => _AcrossAndDownWidgetState();
}

class _AcrossAndDownWidgetState extends State<AcrossAndDownWidget> {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.sizeOf(context);

    const int gridSize = 14;
    List<int> number = [];
    for (int i = 0; i < widget.row.length; i++) {
      int intersectionIndex = widget.row[i] * gridSize + widget.col[i];
      for (int j = 0; j < widget.word[i].length; j++) {
        int currentIndex = intersectionIndex + j;
        number.add(currentIndex);
      }
    }

    return SizedBox(
      height: 500,
      child: SizedBox(
        height: size.height * 0.90,
        width: size.width * 0.90,
        child: GridView.count(
          shrinkWrap: true,
          crossAxisCount: 14,
          children: List.generate(gridSize * gridSize, (index) {
            bool isIntersection = number.contains(index);

            return isIntersection
                ? Container(
                    height: 40.0,
                    width: 40.0,
                    decoration: BoxDecoration(
                      color: isIntersection ? Colors.grey : Colors.transparent,
                      border: Border.all(
                        color: Colors.black,
                      ),
                    ),
                    child: const Center(child: NoBorderTextField()),
                  )
                : const SizedBox();
          }),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange,提问作者tdn

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.03 09:18:26