Flutter实现随机颜色列表选色并在Text组件显示颜色名称的问题

核心优化方向 #

• 统一状态管理：用StatefulWidget的状态集中管理颜色列表、目标颜色索引，避免状态不一致或重复生成
• 利用现有工具：直接借助random_color包自带的方法获取颜色名称，无需手动处理
• 代码复用简化：将带手势的Container封装成批量生成的逻辑，减少冗余代码
• 高效随机数生成：复用Random实例，避免重复创建开销

优化后的完整代码 #

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

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

  @override
  State<ColorMatchGame> createState() => _ColorMatchGameState();
}

class _ColorMatchGameState extends State<ColorMatchGame> {
  final RandomColor _randomColorGenerator = RandomColor();
  final Random _random = Random();
  late List<Color> _colorOptions;
  late int _targetColorIndex;

  @override
  void initState() {
    super.initState();
    _startNewRound();
  }

  // 生成新的颜色组和目标颜色
  void _startNewRound() {
    setState(() {
      _colorOptions = List.generate(3, (_) => _randomColorGenerator.randomColor());
      _targetColorIndex = _random.nextInt(3);
    });
  }

  // 处理容器点击事件
  void _handleContainerTap(int index) {
    if (index == _targetColorIndex) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('答对啦！开启新回合')),
      );
      _startNewRound();
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('不对哦，再试试')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('颜色匹配游戏')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 显示目标颜色名称
          Text(
            _randomColorGenerator.getColorNameFromColor(_colorOptions[_targetColorIndex]),
            style: const TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 40),
          // 颜色选择容器行
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: List.generate(3, (index) {
              return GestureDetector(
                onTap: () => _handleContainerTap(index),
                child: Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    color: _colorOptions[index],
                    borderRadius: BorderRadius.circular(8),
                    boxShadow: const [BoxShadow(blurRadius: 3, spreadRadius: 1)],
                  ),
                ),
              );
            }),
          ),
        ],
      ),
    );
  }
}

优化细节说明 #

• 状态集中管理：把颜色生成和目标索引逻辑放在_startNewRound方法里，每次开启新回合只需调用这个方法，确保状态同步
• 颜色名称直接获取：random_color包的getColorNameFromColor方法可以直接把Color对象转成颜色名称，省去自己写映射表的麻烦
• 批量生成组件：用List.generate批量创建带手势的Container，避免重复编写三个几乎一致的组件代码
• 随机数复用：创建一个Random实例反复使用，比每次调用Random().nextInt()更高效

额外实用建议 #

• 加入交互动画：答对/答错时给对应容器加缩放或透明度变化动画，提升趣味性
• 难度梯度设置：后续可以增加容器数量，或者生成相近色调的颜色增加难度
• 分数统计功能：添加累计分数或连续答对计数，让游戏更有挑战性

内容的提问来源于stack exchange，提问作者James Brett