Flutter跨有状态组件调用：从TestScaffold调用TimerWidget的_startTimer方法

针对你需要在TestScaffold的悬浮按钮点击事件中调用TimerWidget的_startTimer方法的需求，提供两种可行方案：

方案一：使用GlobalKey直接访问子组件状态 #

这种方式实现简单，适合快速解决问题，步骤如下：

1. 修改timerWidget.dart，将定时器的启动方法暴露为公共方法：

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

class TimerWidget extends StatefulWidget {
  const TimerWidget({Key? key}) : super(key: key);

  @override
  State<TimerWidget> createState() => _TimerWidgetState();
}

class _TimerWidgetState extends State<TimerWidget> {
  int _seconds = 0;
  late Timer _timer;

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

  // 新增公共方法，供父组件调用
  void startTimer() {
    // 防止重复启动，先取消现有定时器
    if (_timer.isActive) _timer.cancel();
    _startTimer();
  }

  void _startTimer() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() => _seconds++);
    });
  }

  void _stopTimer() => _timer.cancel();

  void _resetTimer() => setState(() => _seconds = 0);

  @override
  void dispose() {
    _stopTimer();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    String formattedTime = _formatTime(_seconds);
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(formattedTime, style: const TextStyle(fontSize: 24)),
        const SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: _stopTimer, child: const Text('Stop')),
            const SizedBox(width: 16),
            ElevatedButton(onPressed: _resetTimer, child: const Text('Reset')),
          ],
        ),
      ],
    );
  }

  String _formatTime(int seconds) {
    int minutes = seconds ~/ 60;
    int remainingSeconds = seconds % 60;
    return '$minutes:${remainingSeconds.toString().padLeft(2, '0')}';
  }
}

2. 修改main.dart，通过GlobalKey绑定子组件并调用方法：

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

void main() => runApp(const TestAPP());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: TestScaffold());
  }
}

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

  @override
  State<TestScaffold> createState() => _TestScaffoldState();
}

class _TestScaffoldState extends State<TestScaffold> {
  // 创建GlobalKey用于访问子组件状态
  final GlobalKey<_TimerWidgetState> _timerKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Timer Example')),
      body: Center(
        // 给TimerWidget绑定GlobalKey
        child: TimerWidget(key: _timerKey),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 通过Key调用子组件的公共方法
          _timerKey.currentState?.startTimer();
        },
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}

方案二：状态提升（推荐） #

将定时器的状态和控制逻辑移到父组件中，子组件仅负责展示和转发回调，符合Flutter单向数据流的设计理念，代码更易维护：

1. 修改main.dart，将定时器逻辑移到TestScaffold中：

import 'dart:async';
import 'package:flutter/material.dart';
import 'timerWidget.dart';

void main() => runApp(const TestAPP());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: TestScaffold());
  }
}

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

  @override
  State<TestScaffold> createState() => _TestScaffoldState();
}

class _TestScaffoldState extends State<TestScaffold> {
  int _seconds = 0;
  late Timer _timer;

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

  void _startTimer() {
    if (_timer.isActive) _timer.cancel();
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() => _seconds++);
    });
  }

  void _stopTimer() => _timer.cancel();

  void _resetTimer() => setState(() => _seconds = 0);

  @override
  void dispose() {
    _stopTimer();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Timer Example')),
      body: Center(
        // 将状态和回调传递给子组件
        child: TimerWidget(
          seconds: _seconds,
          onStop: _stopTimer,
          onReset: _resetTimer,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _startTimer,
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}

2. 修改timerWidget.dart，改为无状态组件专注展示：

import 'package:flutter/material.dart';

class TimerWidget extends StatelessWidget {
  final int seconds;
  final VoidCallback onStop;
  final VoidCallback onReset;

  const TimerWidget({
    super.key,
    required this.seconds,
    required this.onStop,
    required this.onReset,
  });

  @override
  Widget build(BuildContext context) {
    String formattedTime = _formatTime(seconds);
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(formattedTime, style: const TextStyle(fontSize: 24)),
        const SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: onStop, child: const Text('Stop')),
            const SizedBox(width: 16),
            ElevatedButton(onPressed: onReset, child: const Text('Reset')),
          ],
        ),
      ],
    );
  }

  String _formatTime(int seconds) {
    int minutes = seconds ~/ 60;
    int remainingSeconds = seconds % 60;
    return '$minutes:${remainingSeconds.toString().padLeft(2, '0')}';
  }
}

方案对比 #

• 方案一：实现快速，适合临时需求，但组件耦合度高，不利于长期维护和复用。
• 方案二：组件职责清晰，符合Flutter最佳实践，代码更易扩展和维护，推荐作为长期解决方案。

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