2023年6月22日 18:18:39go评论108阅读模式

英文:

Calling a stateful widget's method from another stateful widget

问题

I can help you with the translation. Here is the relevant part of your text:

"我是Flutter新手，最近遇到了一个挑战。我有以下文件：

main.dart

import 'package:chatgpt_chat/testpage.dart';
import 'package:flutter/material.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> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Timer Example'),
      ),
      body: const Center(
        child: TimerWidget(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
      ),
    );
  }
}

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() {
    _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')}';
  }
}

Could you please help me out by showing how I can call the startTimer method from TimerWidget in FloatingActionButton? I have a problem in a different program, and solving this particular problem will help me out. I really appreciate it if you provide your solutions.

I looked for similar posts; however, they do not fully solve my problem. I just have to use the startTimer method in the FloatingActionButton."

英文:

I'm new in Flutter, and recently I have encountered with a challange. I have the following files:

main.dart

import &#39;package:chatgpt_chat/testpage.dart&#39;;
import &#39;package:flutter/material.dart&#39;;
void main() =&gt; 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&lt;TestScaffold&gt; createState() =&gt; _TestScaffoldState();
}
class _TestScaffoldState extends State&lt;TestScaffold&gt; {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(&#39;Timer Example&#39;),
),
body: const Center(
child: TimerWidget(),
),
floatingActionButton: FloatingActionButton(onPressed: (){}),
);
}
}

timerWidget.dart:

import &#39;dart:async&#39;;
import &#39;package:flutter/material.dart&#39;;
class TimerWidget extends StatefulWidget {
const TimerWidget({Key? key}) : super(key: key);
@override
State&lt;TimerWidget&gt; createState() =&gt; _TimerWidgetState();
}
class _TimerWidgetState extends State&lt;TimerWidget&gt; {
int _seconds = 0;
late Timer _timer;
@override
void initState() {
super.initState();
_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(&#39;Stop&#39;),
),
const SizedBox(width: 16),
ElevatedButton(
onPressed: _resetTimer,
child: const Text(&#39;Reset&#39;),
),
],
),
],
);
}
String _formatTime(int seconds) {
int minutes = seconds ~/ 60;
int remainingSeconds = seconds % 60;
return &#39;$minutes:${remainingSeconds.toString().padLeft(2, &#39;0&#39;)}&#39;;
}
}

Could you please help me out by showing how I can call startTimer method from TimerWidget in FloatingActionButton? I have a problem in different program, and solving this particular problem will help me out. I really appreciate it if you provide your solutions.

I looked for similar posts, however they do not fully solve my problem. I just have to use startTimer method in floatingActionButton

答案1

得分: 2

以下是您要翻译的代码部分：

您可以创建一个自定义的 `TimerWidgetController`，并将其作为参数传递给 `TimerWidget`，以便在构建时将函数 `_startTime` 的引用分配给它。

通过这样做，您无需将任何内容公开在 `TimerWidget` 中。

现在，可以通过使用 `TimerWidgetController` 的实例来从其他小部件调用该函数，当然要使用与 `TimeWidget` 相同的实例。

请检查代码：

 - timer_widget_controller.dart

```dart

class TimerWidgetController {
  late Function? startTimer;
}

timer_widget.dart

import 'dart:async';

import 'package:flutter/material.dart';

import 'timer_widget_controller.dart';

class TimerWidget extends StatefulWidget {
  final TimerWidgetController controller;
  const TimerWidget({
    Key? key,
    required this.controller,
  }) : super(key: key);

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

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

  @override
  void initState() {
    super.initState();
    widget.controller.startTimer = _startTimer;
    _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')}';
  }
}

main.dart

import 'package:flutter/material.dart';

import 'timer_widget_controller.dart';
import 'timer_widget.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> {
  late final TimerWidgetController _timerWidgetController;

  @override
  void initState() {
    super.initState();
    _timerWidgetController = TimerWidgetController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Timer Example'),
      ),
      body: Center(
        child: TimerWidget(
          controller: _timerWidgetController,
        ),
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        _timerWidgetController.startTimer?.call();
      }),
    );
  }
}

希望这有助于您理解代码的内容。

英文:

You could create a custom TimerWidgetController that TimerWidget requires as parameter, when built, in order to assign the reference of the function _startTime to it.

By doing this, you don't need to make anything public in the TimerWidget.

The function can now be called from other widgets just by using an instance of TimerWidgetController, the same one passed to TimeWidget of course.

Please check the code:

timer_widget_controller.dart


class TimerWidgetController {
late Function? startTimer;
}

timer_widget.dart

import &#39;dart:async&#39;;
import &#39;package:flutter/material.dart&#39;;
import &#39;timer_widget_controller.dart&#39;;
class TimerWidget extends StatefulWidget {
final TimerWidgetController controller;
const TimerWidget({
Key? key,
required this.controller,
}) : super(key: key);
@override
State&lt;TimerWidget&gt; createState() =&gt; _TimerWidgetState();
}
class _TimerWidgetState extends State&lt;TimerWidget&gt; {
int _seconds = 0;
late Timer _timer;
@override
void initState() {
super.initState();
widget.controller.startTimer = _startTimer;
_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(&#39;Stop&#39;),
),
const SizedBox(width: 16),
ElevatedButton(
onPressed: _resetTimer,
child: const Text(&#39;Reset&#39;),
),
],
),
],
);
}
String _formatTime(int seconds) {
int minutes = seconds ~/ 60;
int remainingSeconds = seconds % 60;
return &#39;$minutes:${remainingSeconds.toString().padLeft(2, &#39;0&#39;)}&#39;;
}
}

main.dart

import &#39;package:flutter/material.dart&#39;;
import &#39;timer_widget_controller.dart&#39;;
import &#39;timer_widget.dart&#39;;
void main() =&gt; 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&lt;TestScaffold&gt; createState() =&gt; _TestScaffoldState();
}
class _TestScaffoldState extends State&lt;TestScaffold&gt; {
late final TimerWidgetController _timerWidgetController;
@override
void initState() {
super.initState();
_timerWidgetController = TimerWidgetController();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(&#39;Timer Example&#39;),
),
body: Center(
child: TimerWidget(
controller: _timerWidgetController,
),
),
floatingActionButton: FloatingActionButton(onPressed: () {
_timerWidgetController.startTimer?.call();
}),
);
}
}

答案2

得分: 1

将您的 _TestScaffoldState 更改为

class _TestScaffoldState extends State<TestScaffold> {
  GlobalKey<TimerWidgetState> key = GlobalKey<TimerWidgetState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Timer Example'),
      ),
      body: Center(
        child: TimerWidget(key: key),
      ),
      floatingActionButton: FloatingActionButton(onPressed: (){
        key.currentState?.startTimer();
      }),
    );
  }
}

此外，您需要将 startTimer 和 TimerWidgetState 更改为公开，去掉下划线以便可以使用。如下所示：

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() {
  ...

英文:

Change your _TestScaffoldStateto

class _TestScaffoldState extends State&lt;TestScaffold&gt; {
GlobalKey&lt;TimerWidgetState&gt; key = GlobalKey&lt;TimerWidgetState&gt;();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(&#39;Timer Example&#39;),
),
body: Center(
child: TimerWidget(key: key),
),
floatingActionButton: FloatingActionButton(onPressed: (){
key.currentState?.startTimer();
}),
);
}
}

Furthermore you need to make startTimer and TimerWidgetState public by removing the underscore so they can be used. So like:

class TimerWidget extends StatefulWidget {
const TimerWidget({Key? key}) : super(key: key);
@override
State&lt;TimerWidget&gt; createState() =&gt; TimerWidgetState();
}
class TimerWidgetState extends State&lt;TimerWidget&gt; {
int _seconds = 0;
late Timer _timer;
@override
void initState() {
super.initState();
startTimer();
}
void startTimer() {
...

答案3

得分: 0

我不知道为什么你要以这种困难的方式运行计时器（调用startTimer方法），但我现在会按照你的要求来做。

因为其他人已经提到了如何使用GlobalKey以及如何创建和解决控制器的方法，我将展示一种更加基本的方式。

我将创建一个简单的示例代码并展示给你。

-main.dart

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

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

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

class _TestScaffoldState extends State<TestScaffold> {
  bool timer = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Timer Example'),
      ),
      body: Center(child: TimerWidget(timerBool: timer)),
      floatingActionButton: FloatingActionButton(
        onPressed: _callTimer,
        child: const Icon(Icons.play_arrow_rounded),
      ),
    );
  }

  void _callTimer() {
    setState(() {
      timer = true;
    });
  }
}

-timerWidget.dart

class TimerWidget extends StatefulWidget {
  bool timerBool;

  TimerWidget({
    Key? key,
    required this.timerBool,
  }) : super(key: key);

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

class _TimerWidgetState extends State<TimerWidget> {
  int _seconds = 0;
  Timer _timer = Timer(const Duration(seconds: 1), () {});
  String timerCheck = 'ready';

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

  void _startTimer() {
    timerCheck = 'startinggg';
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        _seconds++;
      });
    });
    print('startTimer ${_timer.hashCode}');
  }

  @override
  Widget build(BuildContext context) {
    String formattedTime = _formatTime(_seconds);
    if (widget.timerBool && !_timer.isActive) {
      _startTimer();
    }

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          timerCheck,
          style: Theme.of(context).textTheme.headline6,
        ),
        const SizedBox(height: 20),
        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'),
            ),
          ],
        ),
      ],
    );
  }

  void _stopTimer() {
    if (!widget.timerBool) return;
    setState(() {
      timerCheck = 'stopppp';
      widget.timerBool = false;
    });
    _timer.cancel();
    print('cancel ${_timer.hashCode}');
  }

  void _resetTimer() {
    setState(() {
      _seconds = 0;
    });
  }

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

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

顺便提一下，你之前提到的一个问题是，连续按下FloatingActionButton会导致多个计时器，只有最后一个生成的计时器可以被取消。因此，你需要在startTimer()中添加一个条件，如下所示：

if (_timer.isActive) return;

这个条件可以确保只有在当前计时器不活动时才启动新的计时器。

英文:

I don't know why you're trying to run the timer(call startTimer method) in a difficult way, but I'll do what you want for now.

Since other people mentioned above how to use GlobalKey and how to create and solve a controller, I'll make it a more primitive way.

I'll make a simple example code and show it to you.

-main.dart

import &#39;dart:async&#39;;
import &#39;package:flutter/material.dart&#39;;
class TestScaffold extends StatefulWidget {
const TestScaffold({
Key? key,
}) : super(key: key);
@override
State&lt;TestScaffold&gt; createState() =&gt; _TestScaffoldState();
}
class _TestScaffoldState extends State&lt;TestScaffold&gt; {
bool timer = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(&#39;Timer Example&#39;),
),
body: Center(child: TimerWidget(timerBool: timer)),
floatingActionButton: FloatingActionButton(
onPressed: _callTimer,
child: const Icon(Icons.play_arrow_rounded),
),
);
}
void _callTimer() {
setState(() {
timer = true;
});
}
}

-timerWidget.dart

class TimerWidget extends StatefulWidget {
bool timerBool;
TimerWidget({
Key? key,
required this.timerBool,
}) : super(key: key);
@override
State&lt;TimerWidget&gt; createState() =&gt; _TimerWidgetState();
}
class _TimerWidgetState extends State&lt;TimerWidget&gt; {
int _seconds = 0;
Timer _timer = Timer(const Duration(seconds: 1), () {});
String timerCheck = &#39;ready&#39;;
@override
void initState() {
super.initState();
}
void _startTimer() {
timerCheck = &#39;startinggg&#39;;
_timer = Timer.periodic(const Duration(seconds: 1), (timer) {
setState(() {
_seconds++;
});
});
print(&#39;startTimer ${_timer.hashCode}&#39;);
}
@override
Widget build(BuildContext context) {
String formattedTime = _formatTime(_seconds);
if (widget.timerBool &amp;&amp; !_timer.isActive) {
_startTimer();
}
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
timerCheck,
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 20),
Text(
formattedTime,
style: const TextStyle(fontSize: 24),
),
const SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: _stopTimer,
child: const Text(&#39;Stop&#39;),
),
const SizedBox(width: 16),
ElevatedButton(
onPressed: _resetTimer,
child: const Text(&#39;Reset&#39;),
),
],
),
],
);
}
void _stopTimer() {
if (!widget.timerBool) return;
setState(() {
timerCheck = &#39;stopppp&#39;;
widget.timerBool = false;
});
_timer.cancel();
print(&#39;cancel ${_timer.hashCode}&#39;);
}
void _resetTimer() {
setState(() {
_seconds = 0;
});
}
String _formatTime(int seconds) {
int minutes = seconds ~/ 60;
int remainingSeconds = seconds % 60;
return &#39;$minutes:${remainingSeconds.toString().padLeft(2, &#39;0&#39;)}&#39;;
}
@override
void dispose() {
_stopTimer();
super.dispose();
}
}

For your information, there is a part that the two of you who answered above missed.
Pressing FloatingActionButton continuously results in multiple timers,
and only the last generated one can be canceled().

Therefore, you need to put one condition in startTimer() as below.

if( (your timer).isActive ) return;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

从另一个有状态的小部件调用有状态小部件的方法

问题

答案1

答案2

答案3

Flutter, onPressed: () {…}. 与 onPressed: methodCall() 之间的不同是什么？

如何在“initState”方法中等待SecureStorage？

如何在Dart 3中正确使用Comparable？

如何解决 PayU Money 不支持空安全错误

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论