Question

我有一个简单的程序：

按下计时器按钮，它将启动持续时间为10ms的计时器
进度条一直保持增长到100％，然后取消计时器并将IconButton的图标更改为其他图标，例如Icon.timer_off

我尝试过：

为IconButton设置一个键，然后尝试通过键查找对象，但操作不成功。

一般如何更改对象的属性？例如，按下按钮然后更改进度栏颜色，还是结束计时器更改按钮的图标或标签？

这是完整的代码：

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

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<MyApp>
{
  double _value = 0.0;

  void _onPressed(){
    new Timer.periodic(new Duration(milliseconds: 10), (timer) {
      setState((){
        if (_value == 1){
          timer.cancel();
          _value = 0.0;
          return;
        }
        _value += 0.01;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Test Timer'),
      ),
      body: new Container(
          padding: new EdgeInsets.all(32.0),
          child: new Center(
            child: new Column(
              children: <Widget>[
                new IconButton(icon: new Icon(Icons.timer), onPressed: _onPressed),
                new Container(
                  padding: new EdgeInsets.all(32.0),
                  child:  new LinearProgressIndicator(
                    value: _value,
                    valueColor: new AlwaysStoppedAnimation<Color>(Colors.green),
                  ),
                ),
                new Container(
                  padding: new EdgeInsets.all(32.0),
                  child:  new CircularProgressIndicator(
                    value: _value,
                  ),
                )
              ],
            ),
          )
      ),
    );
  }
}

Answer 1

在状态中保留要更改的值，然后用setState进行更改。
与1完全相同的事物很少见，因此请使用>=。

  IconData iconData = Icons.timer;

  void _onPressed(){
    new Timer.periodic(new Duration(milliseconds: 10), (timer) {
      setState((){
        if (_value >= 1){
          timer.cancel();
          _value = 0.0;
           iconData = Icons.timer_off;
          return;
        }
        _value += 0.01;
      });
    });
  }

并使用该值。

new IconButton(icon:Icon(iconData), onPressed: _onPressed),

如何在Flutter中从回调函数更改IconButton的图标

1 个答案: