dart - 如何使用 Flutter 按时更改背景颜色？

Question

我一直无法弄清楚这一点。经过大量研究和胡思乱想后，我找不到将 Timer.periodic 链接到有状态小部件状态的 setState 的方法。我正在尝试通过递增我定义的一系列颜色值，每帧(或每 17 毫秒，足够接近)更改我的应用程序的背景颜色以进行渐变。我只是不知道如何根据计时器进行实际更改，此时我完全迷路了。

编辑:这是目前应用程序的完整代码。

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

final Random randProgress = new Random();
final rgb_color_container rgbColorContainer = new rgb_color_container();


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MainApp();
  }
}

class MainApp extends StatefulWidget {
  @override
  MainAppState createState() => new MainAppState();
}

class MainAppState extends State<MainApp> {
  int colorSpeed = 1;
  int colorProgress = randProgress.nextInt(1530);

  @override
  Widget build(BuildContext context){
    return new MaterialApp(
      home: new Scaffold(

      ),
      theme: ThemeData(
        canvasColor: rgbColorContainer.light[colorProgress],
        primaryColor: rgbColorContainer.dark[colorProgress],
        accentColor: rgbColorContainer.dark[colorProgress],
      ),
    );
  }
}

Answer 1

基本步骤如下:

1. 覆盖 MainAppState 中的 setState() 或根据您的需要覆盖 initState()。
2. 在里面添加一个Timer.periodic
3. 通过更改 colorProgress 为 colorProgress 赋值计时器。

如下所示(未检查，仅想法):

  Timer timer;

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

    timer = new Timer.periodic(new Duration(seconds: 2), (Timer timer) {
      setState(() {
        //change your colorProgress here
      });
    });
  }

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

这些可能有帮助:

如何创建Timer.periodic . Change color . setState not update.