Question

我仍然无法通过点击图标来重新绘制应用程序屏幕。我正在使用GitHub上的Vanilla项目作为指南。我显然错过了一些东西！

该应用程序在GridView中显示9个圆圈。 main.dart包含runApp（CirclesApp（））;。 CirclesApp（在circleapp.dart中）包含通过调用Circles（在circle.dart中）显示9个圆圈的代码。 CirclesApp创建AppState（在appstate.dart中），该状态将传递给Circles。 CirclesApp包含AppBar，该AppBar带有图标，在点击该图标时会调用函数flash_all_tiles（）。该函数迭代9个图块，将flash_tile值设置为当前图块的索引，并延迟500 ms。计时器超时功能将flash_tile值重置为-1。

我希望看到的是，点击AppBar Icons.replay图标后，每个圆圈依次闪烁。我确实看到Home Bar（主页栏）按钮发生了变化，但是每个圆圈的亮度都没有变化。每个圆的颜色由create_circle_tiles函数（在circle.dart中）通过将当前图块索引与widget.appState.flash_tile比较来确定。

该应用的代码如下。不包括文件circle_colors.dart，constants.dart和strings.dart。

main.dart：

// ignore_for_file: camel_case_types
// ignore_for_file: constant_identifier_names
// ignore_for_file: non_constant_identifier_names

import 'package:flutter/material.dart';

import 'circlesapp.dart';

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

circlesapp.dart：

// ignore_for_file: camel_case_types
// ignore_for_file: constant_identifier_names
// ignore_for_file: non_constant_identifier_names

import 'package:flutter/material.dart';

import 'dart:async';

import 'appstate.dart';
import 'constants.dart';
import 'circles.dart';
import 'strings.dart';

class CirclesApp extends StatefulWidget {

  CirclesApp();

  @override
  State<StatefulWidget> createState() {return CirclesAppState();
  }
} // class CirclesApp

class CirclesAppState extends State<CirclesApp> {
  AppState appState = AppState();

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

    setState(() {
      appState = AppState(flash_tile: -1);
    });
  } // initState()

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: Strings.appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(Strings.appTitle),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.replay),
              onPressed: () => flash_all_tiles(),
            )
          ]
        ),
        body: Column(
          children: [
            Circles (
              appState: appState,
            ),
          ],
        ),
      ),
    );
  }

  Timer start_flash_timeout(Duration duration) {
    return new Timer(duration, on_flash_timeout);
  } // start_flash_timeout

  void on_flash_timeout() {
    setState((){
      appState.flash_tile  = -1;
    });
  } // on_flash_timeout

  void flash_all_tiles(){
    for ( int i = 0; ( i < Constants.NUMBER_TILES); i++){
      setState(() {
        appState.flash_tile = i;
      });
      start_flash_timeout(Constants.TILE_FLASH_DURATION);
    }
  }

} // class CirclesAppState

appstate.dart：

// ignore_for_file: camel_case_types
// ignore_for_file: constant_identifier_names
// ignore_for_file: non_constant_identifier_names

class AppState {
  int flash_tile;

  AppState({
    this.flash_tile = -1,
  });

  void set_flash_tile ( int flash_tile) {
    this.flash_tile = flash_tile;
  } // set_flash_tile

  @override
  String toString() {
    return ( 'AppState{flash_tile: $flash_tile}');
  } // toString()

} // class AppState

circles.dart：

// ignore_for_file: camel_case_types
// ignore_for_file: constant_identifier_names
// ignore_for_file: non_constant_identifier_names

import 'package:flutter/material.dart';

import 'appstate.dart';
import 'constants.dart';
import 'circle_colors.dart';

class Circles extends StatefulWidget {
  final AppState appState;

  Circles({
    @required this.appState,
    Key key,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return Circles_State();
  }
} // class Circles

class Circles_State extends State<Circles> {
  List<GridTile>  grid_tiles = <GridTile>[];

  Circles_State();

  GridTile new_circle_tile(Color tile_color,
                           int   index) {
    GridTile tile = GridTile(
        child: GestureDetector(
          child: Container(
            decoration: BoxDecoration(
              color: tile_color,
              shape: BoxShape.circle,
            ),
          ),
        )
      );
    return (tile);
  } // new_circle_tile

  List<GridTile> create_circle_tiles() {
    grid_tiles = new List<GridTile>();

    for (int i = 0; (i < Constants.NUMBER_TILES); i++) {
      Color tile_color = ( widget.appState.flash_tile == i) ?
          Circle_Colors.bright_colors[i] :
          Circle_Colors.normal_colors[i];

      grid_tiles.add(new_circle_tile(tile_color, i));
    }
    return (grid_tiles);
  } // create_circle_tiles

  @override // Circles_State
  Widget build(BuildContext context) {
    return GridView.count(
      shrinkWrap: true,
      crossAxisCount: Constants.CROSS_AXIS_COUNT,
      childAspectRatio: 1.0,
      padding: const EdgeInsets.all(4.0),
      mainAxisSpacing: Constants.MAIN_AXIS_SPACING,
      crossAxisSpacing: Constants.CROSS_AXIS_SPACING,
      children: create_circle_tiles(),
    );
  }
} // class Circles_State

感谢您提供的任何帮助。

Answer 1

您的方法存在的问题属于您的flash_all_tiles()方法。对每个循环值都调用setState()，但是在构建新帧时，最终结果是它持有的值是最后一次迭代的值，因此您看不到动画。

使用动画更容易实现。对CirclesAppState使用以下代码，您将看到它的动画。

class CirclesAppState extends State<CirclesApp> with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation animation;

  AppState appState = AppState(flash_tile: -1);

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

    controller = AnimationController(duration: Duration(seconds: 2), vsync: this);
    animation = IntTween(begin: -1, end: Constants.NUMBER_TILES).animate(controller)
    ..addListener(() {
      setState(() {
        appState = AppState(flash_tile: animation.value);
      });
    })
    ..addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        controller.reverse();
      }
    });

  } // initState()

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Title",
      home: Scaffold(
        appBar: AppBar(
            title: Text("Title"),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.replay),
                onPressed: () => flash_all_tiles(),
              )
            ]
        ),
        body: Column(
          children: [
            Circles (
              appState: appState,
            ),
          ],
        ),
      ),
    );
  }

  void flash_all_tiles(){
    controller.forward();
  }
}

在图标水龙头上渲染屏幕

1 个答案: