Flutter：使用来自异步函数的值更新 UI

Question

当计数器异步更新时，我想在颤动的 UI 中查看计数器的值。

从示例颤振项目开始，我希望下面会成功，但只显示最终值。 我怎样才能看到数字从 1 变为 100000？

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() async {
    for(int i=0; i<100000; ++i) {
      setState(() {
        _counter++;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Answer 1

我认为问题在于您的循环运行速度太快而无法显示中间值。 用Future.delayed()减慢循环应该让你看到你想要什么。

void _incrementCounter() async {
  for(int i=0; i<100000; ++i) {
    await Future.delayed(Duration(seconds: 1));
    setState(() {
      _counter++;
    });
  }
}

Answer 2

查看从 1 变为 100000 的数字您可以使用Timer.periodic 。

创建状态级别计时器变量以控制运行状态。

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  Timer? _timer;

  void _incrementCounter() async {
    const delay = Duration(milliseconds: 100); // controll update speed
    const numberLimit = 100000;
    _timer = Timer.periodic(delay, (timer) {
      if (_counter < numberLimit) {
        setState(() {
          _counter++;
        });
      } else {
        timer.cancel();
      }
    });
  }

  void _reset() {
    setState(() {
      _counter = 0;
    });
    _timer?.cancel();
  }

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

你可以在 flutter.dev 上找到更多关于dart-async-library和Timer.periodic的信息。

Answer 3

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  late Timer _timer;
  int _start = 0;

  void startTimer() {
    const oneSec = const Duration(seconds: 1);
    _timer = new Timer.periodic(
        oneSec,
        (Timer timer) => setState(() {
              if (_start > 100000) {
                timer.cancel();
              } else {
                _start = _start + 1;
              }
            }));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_start',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: startTimer,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Answer 4

嘿，您可以使用ValueListenableBuilder来通知您状态，而不是调用setState ，因为它将rebuild整个 ui。 在此处阅读有关ValueListenableBuilder的更多详细信息

以下是示例代码 -

class _MyHomePageState extends State<MyHomePage> {
  Timer? _timer;
  ValueNotifier _valueNotifier = ValueNotifier(0);

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: _valueNotifier,
      builder: (context, value, child) {
        return Text(value.toString());
      },
    );
  }

  void _incrementCounter() async {
    const delay = Duration(milliseconds: 100); // controll update speed
    const numberLimit = 100000;
    _timer = Timer.periodic(delay, (timer) {
      if (_valueNotifier.value < numberLimit) {
        _valueNotifier.value++;
      } else {
        timer.cancel();
      }
    });
  }

  void _reset() {
    _valueNotifier.value = 0;
    _timer?.cancel();
  }

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