Flutter 每隔一秒动态改变背景

Question

我有申请。它只是每 1.5 秒（默认）更改一次背景。但我想用滑块控制它。我改变了我的状态，但我的计时器在 initstate 内。所以它没有影响它。我怎样才能做到？我的代码：

Slider(
                              value: features.loopTime,
                              max: 15,
                              min: 0,
                              onChanged: (value) {
                                print(value.toInt());
                                setState(() {
                                  features.loopTime = value;
                                });
                              },
                            ),

初始状态：

@override
  void initState() {
    super.initState();
    var loopTime = features.loopTime * 1000;
    timer = new Timer.periodic(new Duration(milliseconds: loopTime.toInt()), (Timer timer) {
      inspect(loopTime.toInt());
      if (!features.isManual) {
        setState(() {
          features.isBlue = !features.isBlue;
        });
      }
    });
  }

Answer 1

您必须取消计时器并重新分配。当您滑动滑块时，我创建了名为 _changeTimer() 的函数它将重新分配新值。

import 'dart:async';
import 'dart:developer';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _loopTime = 1;
  bool isBlue = false;

  Timer? timer;
  @override
  void initState() {
    super.initState();
    timer = Timer.periodic(Duration(milliseconds: (1000 * _loopTime).toInt()),
        (Timer timer) {
      setState(() {
        isBlue = !isBlue;
      });
    });
  }
  //there 
  _changeTimer() {
    timer!.cancel();
    timer = Timer.periodic(Duration(milliseconds: (1000 * _loopTime).toInt()),
        (Timer timer) {
      setState(() {
        isBlue = !isBlue;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        backgroundColor: isBlue ? Colors.blue : Colors.yellow,
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Slider(
                activeColor: Colors.black,
                value: _loopTime,
                max: 15,
                min: 0,
                onChanged: (value) {
                  setState(() {
                    _loopTime = value;
                    _changeTimer();
                  });
                },
              ),
               Text(_loopTime.toString())
            ],
          ),
      ),
    );
  }
}

https://im3.ezgif.com/tmp/ezgif-3-4b79f96d7e.gif 演示

Flutter 每隔一秒动态改变背景

Flutter change background every dynamic second

mobile

android

ios

dart

flutter