Flutter跨Stateful Widget调用startTimer函数无响应问题求助

你直接实例化PhoneAuthState的方式完全错误——新创建的PhoneAuthState是一个独立的、未绑定到当前界面的实例，它的startTimer修改的是自己内部的start变量，和界面上正在显示的PhoneAuthState没有任何关联，自然不会触发UI更新。

以下是三种可行的解决方案，按推荐程度排序：

方案一：回调函数传递（最适合当前简单场景） #

这是父子组件通信的标准做法，把父组件的方法传递给子组件调用。

1. 修改ReusableTField，添加回调参数：

class ReusableTField extends Stateful Widget {
  final VoidCallback? onSendPressed;

  const ReusableTField({Key? key, this.onSendPressed}) : super(key: key);

  @override
  State<ReusableTField> createState() => _ReusableTFieldState();
}

class _ReusableTFieldState extends State<ReusableTField> {
  @override
  Widget build(BuildContext context) {
    return Container(
      suffixIcon: InkWell(
        onTap: widget.onSendPressed,
        child: const Padding(
          padding: EdgeInsets.symmetric(vertical: 14, horizontal: 14),
          child: Text("发送"),
        ),
      ),
    );
  }
}

2. 在PhoneAuth中使用ReusableTField时传入startTimer方法：

class PhoneAuth extends Stateful Widget {
  const PhoneAuth({Key? key}) : super(key: key);

  @override
  State<PhoneAuth> createState() => PhoneAuthState();
}

class PhoneAuthState extends State<PhoneAuth> {
  int start = 30;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ReusableTField(onSendPressed: startTimer),
          RichText(
            text: TextSpan(children: [
              const TextSpan(
                text: "Send OTP again in",
                style: TextStyle(color: Colors.orange, fontSize: 17),
              ),
              TextSpan(
                text: " 00:$start",
                style: const TextStyle(color: Colors.redAccent, fontSize: 17),
              ),
              const TextSpan(
                text: "sec",
                style: TextStyle(color: Colors.orange, fontSize: 17),
              ),
            ]),
          ),
        ],
      ),
    );
  }

  void startTimer() {
    const onsec = Duration(seconds: 1);
    Timer timer = Timer.periodic(onsec, (timer) {
      if (start == 0) {
        setState(() {
          timer.cancel();
        });
      } else {
        setState(() {
          start--;
        });
      }
    });
  }
}

方案二：GlobalKey获取State（适合临时快速解决，不推荐大型项目） #

通过GlobalKey可以直接获取到对应Widget的State对象，调用其方法。

1. 在PhoneAuth中定义并绑定GlobalKey：

class PhoneAuth extends Stateful Widget {
  static final GlobalKey<PhoneAuthState> authKey = GlobalKey<PhoneAuthState>();

  const PhoneAuth({Key? key}) : super(key: key);

  @override
  State<PhoneAuth> createState() => PhoneAuthState();
}

class PhoneAuthState extends State<PhoneAuth> {
  int start = 30;

  PhoneAuthState() : super(key: PhoneAuth.authKey);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ReusableTField(),
          RichText(
            text: TextSpan(children: [
              const TextSpan(
                text: "Send OTP again in",
                style: TextStyle(color: Colors.orange, fontSize: 17),
              ),
              TextSpan(
                text: " 00:$start",
                style: const TextStyle(color: Colors.redAccent, fontSize: 17),
              ),
              const TextSpan(
                text: "sec",
                style: TextStyle(color: Colors.orange, fontSize: 17),
              ),
            ]),
          ),
        ],
      ),
    );
  }

  void startTimer() {
    const onsec = Duration(seconds: 1);
    Timer timer = Timer.periodic(onsec, (timer) {
      if (start == 0) {
        setState(() {
          timer.cancel();
        });
      } else {
        setState(() {
          start--;
        });
      }
    });
  }
}

2. 在ReusableTField中通过GlobalKey调用方法：

class ReusableTField extends Stateful Widget {
  @override
  State<ReusableTField> createState() => _ReusableTFieldState();
}

class _ReusableTFieldState extends State<ReusableTField> {
  @override
  Widget build(BuildContext context) {
    return Container(
      suffixIcon: InkWell(
        onTap: () {
          PhoneAuthState? authState = PhoneAuth.authKey.currentState;
          authState?.startTimer();
        },
        child: const Padding(
          padding: EdgeInsets.symmetric(vertical: 14, horizontal: 14),
          child: Text("发送"),
        ),
      ),
    );
  }
}

方案三：状态管理（适合复杂项目） #

如果你的项目有多个组件需要共享状态，推荐用Provider、Riverpod等状态管理库，统一管理计时器状态。

这里以Provider为例：

1. 添加provider依赖到pubspec.yaml，然后创建状态模型：

class TimerModel extends ChangeNotifier {
  int start = 30;
  Timer? _timer;

  void startTimer() {
    _timer?.cancel();
    const onsec = Duration(seconds: 1);
    _timer = Timer.periodic(onsec, (timer) {
      if (start == 0) {
        timer.cancel();
      } else {
        start--;
        notifyListeners();
      }
    });
  }

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

2. 在main.dart中包裹Provider：

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

3. 修改PhoneAuth监听状态：

class PhoneAuth extends StatelessWidget {
  const PhoneAuth({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const ReusableTField(),
          Consumer<TimerModel>(
            builder: (context, timerModel, child) {
              return RichText(
                text: TextSpan(children: [
                  const TextSpan(
                    text: "Send OTP again in",
                    style: TextStyle(color: Colors.orange, fontSize: 17),
                  ),
                  TextSpan(
                    text: " 00:${timerModel.start}",
                    style: const TextStyle(color: Colors.redAccent, fontSize: 17),
                  ),
                  const TextSpan(
                    text: "sec",
                    style: TextStyle(color: Colors.orange, fontSize: 17),
                  ),
                ]),
              );
            },
          ),
        ],
      ),
    );
  }
}

4. 修改ReusableTField调用状态方法：

class ReusableTField extends Stateful Widget {
  const ReusableTField({Key? key}) : super(key: key);

  @override
  State<ReusableTField> createState() => _ReusableTFieldState();
}

class _ReusableTFieldState extends State<ReusableTField> {
  @override
  Widget build(BuildContext context) {
    return Container(
      suffixIcon: InkWell(
        onTap: () {
          Provider.of<TimerModel>(context, listen: false).startTimer();
        },
        child: const Padding(
          padding: EdgeInsets.symmetric(vertical: 14, horizontal: 14),
          child: Text("发送"),
        ),
      ),
    );
  }
}

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