如何从父Stateless Widget控制子Stateful Widget并获取其数据？

核心思路 #

利用GlobalKey让父Stateless组件获取子Stateful组件的State实例，从而调用子组件内的计时控制方法，以及获取Stopwatch的时间数据。

1. 实现子Stateful组件 DisplayElapsedTime #

在子组件的State类中封装启动计时、获取已流逝时间的方法，并通过静态GlobalKey暴露给父组件：

class DisplayElapsedTime extends StatefulWidget {
  // 定义静态GlobalKey，供父组件获取State实例
  static final GlobalKey<_DisplayElapsedTimeState> globalKey = GlobalKey<_DisplayElapsedTimeState>();

  const DisplayElapsedTime({super.key = globalKey});

  @override
  _DisplayElapsedTimeState createState() => _DisplayElapsedTimeState();
}

class _DisplayElapsedTimeState extends State<DisplayElapsedTime> {
  final Stopwatch _stopwatch = Stopwatch();
  Timer? _timer;
  String _elapsedText = '00:00:00';

  // 启动计时方法，供父组件调用
  void start() {
    if (!_stopwatch.isRunning) {
      _stopwatch.start();
      _timer = Timer.periodic(const Duration(seconds: 1), (_) => setState(_updateElapsedText));
    }
  }

  // 获取当前已流逝时间的方法
  Duration getElapsedTime() => _stopwatch.elapsed;

  // 更新显示文本的私有方法
  void _updateElapsedText() {
    final elapsed = _stopwatch.elapsed;
    _elapsedText = [
      elapsed.inHours.toString().padLeft(2, '0'),
      (elapsed.inMinutes % 60).toString().padLeft(2, '0'),
      (elapsed.inSeconds % 60).toString().padLeft(2, '0'),
    ].join(':');
  }

  @override
  void dispose() {
    _timer?.cancel();
    _stopwatch.stop();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Text(_elapsedText, style: const TextStyle(fontSize: 24));
}

2. 实现父Stateless页面 #

父组件通过子组件的静态GlobalKey，直接调用子组件的方法来启动计时、获取时间：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('计时页面')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const DisplayElapsedTime(),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => DisplayElapsedTime.globalKey.currentState?.start(),
              child: const Text('Start'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                final elapsedTime = DisplayElapsedTime.globalKey.currentState?.getElapsedTime();
                if (elapsedTime != null) {
                  // 此处可根据需求处理时间，比如打印、弹窗展示等
                  print('当前已流逝时间：$elapsedTime');
                }
              },
              child: const Text('获取当前时间'),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• GlobalKey是Flutter中跨组件访问State实例的常用方式，适合这种父子组件的简单交互场景。
• 子组件的dispose方法中必须取消Timer并停止Stopwatch，避免内存泄漏。
• 父组件无需维护状态，直接通过静态Key调用子组件方法即可满足需求。

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