Flutter魔方计时器：如何根据用户选择更新打乱公式？

1. 定义配置数据类 #

先创建一个统一的类来存储用户选择的魔方参数和对应的打乱公式，方便状态传递与管理：

class CubeConfig {
  final String cubeType; // 如"2x2"、"3x3"
  final String algSet; // 如"CLL"、"OLL"
  final String scramble; // 对应打乱公式

  CubeConfig({required this.cubeType, required this.algSet, required this.scramble});
}

2. 用Provider实现跨页面状态同步 #

对于初学者，Provider是轻量且易上手的跨页面状态管理方案：

• 首先在pubspec.yaml添加依赖：

  dependencies:
    flutter:
      sdk: flutter
    provider: ^6.0.5
  

• 创建状态管理类：

  import 'package:flutter/foundation.dart';
  
  class CubeConfigProvider extends ChangeNotifier {
    CubeConfig? _selectedConfig;
  
    CubeConfig? get selectedConfig => _selectedConfig;
  
    void updateConfig(CubeConfig newConfig) {
      _selectedConfig = newConfig;
      notifyListeners(); // 通知所有监听组件更新状态
    }
  }
  

3. 在根组件注入Provider #

修改main.dart，将Provider挂载到应用根节点，确保所有页面都能访问状态：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CubeConfigProvider(),
      child: const MyApp(),
    ),
  );
}

4. 修改算法集选择页面（TwoTimerAlgsets） #

用户完成选择后，生成对应打乱公式并更新全局状态：

// 选择完成后的处理逻辑示例
void onConfigConfirmed(String cubeType, String algSet) {
  // 替换为你实际的打乱公式生成逻辑
  String scramble = _generateScramble(cubeType, algSet);
  
  // 更新全局状态
  Provider.of<CubeConfigProvider>(context, listen: false)
      .updateConfig(CubeConfig(cubeType: cubeType, algSet: algSet, scramble: scramble));
  
  // 返回计时器页面
  Navigator.pop(context);
}

// 示例打乱公式生成函数，按需替换
String _generateScramble(String cubeType, String algSet) {
  if (cubeType == "2x2" && algSet == "CLL") {
    return "R U R' U' R' F R2 U' R' U' R U R' F'";
  } else if (cubeType == "3x3" && algSet == "OLL") {
    return "F R U R' U' F'";
  }
  return "请选择魔方配置";
}

5. 修改计时器页面（StopWatchWidget） #

监听全局状态变化，自动更新显示的打乱公式：

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

  @override
  Widget build(BuildContext context) {
    // 监听状态变化，状态更新时自动重建组件
    final cubeConfig = Provider.of<CubeConfigProvider>(context).selectedConfig;
    
    return Scaffold(
      body: GestureDetector(
        onTap: () { /* 你的计时器启停逻辑 */ },
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 显示打乱公式
              Text(
                cubeConfig?.scramble ?? "请选择魔方配置",
                style: const TextStyle(fontSize: 20, letterSpacing: 1.2),
              ),
              // 你的计时器组件...
            ],
          ),
        ),
      ),
    );
  }
}

无第三方库替代方案（基础版） #

如果不想依赖第三方库，可通过路由回调传递数据：

• 计时器页面跳转时传入回调：

  // 在StopWatchWidget中跳转
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => TwoTimerAlgsets(
        onScrambleSelected: (scramble) {
          setState(() {
            _currentScramble = scramble;
          });
        },
      ),
    ),
  );
  

• 选择页面调用回调返回数据：

  class TwoTimerAlgsets extends StatelessWidget {
    final Function(String) onScrambleSelected;
  
    const TwoTimerAlgsets({super.key, required this.onScrambleSelected});
  
    void _handleSelection() {
      String scramble = _generateScramble(...);
      onScrambleSelected(scramble);
      Navigator.pop(context);
    }
  }
  

内容的提问来源于stack exchange，提问作者Spicy Pumpkin