Flutter setState不会更新UI

时间:2020-05-23 13:14:14

标签: flutter dart setstate

当我调用setState时,值会更改,并且会调用build方法,但UI保持不变。如果我正确理解setState的工作方式,则应重建TestView小部件并使用它获得的新值,但不会发生。我检查了很多不同的教程和其他问题,但找不到答案。这是我的代码:

import 'package:cc_app_test/widgets/exam_card/exam_card.dart';
import 'package:cc_app_test/widgets/scaffolds/basic_scaffold.dart';
import 'package:flutter/material.dart';

class Crta extends AnimatedWidget {
  Crta({
    @required Animation<Offset> animation,
  }) : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    final animation = super.listenable as Animation<Offset>;
    return Transform.translate(
      offset: animation.value,
      child: Container(
      width: 20,
      height: 5,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),
    ),
    );
  }
}


class TestView extends StatefulWidget {
  @override
  _TestViewState createState() => _TestViewState();
}

class _TestViewState extends State<TestView>
with SingleTickerProviderStateMixin {

  Animation<Offset> animation;
  AnimationController animationController;

  int color1 = 900;
  int color2 = 500;

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

    animationController = AnimationController(
      duration: Duration(milliseconds: 500),
      vsync: this,
    );

    final curvedAnimation = CurvedAnimation(
      parent: animationController,
      curve: Curves.easeInOutBack,
    );

    animation = Tween<Offset>(
      begin: Offset(35, 0),
      end: Offset(105, 0),
    ).animate(curvedAnimation)
    ..addListener(() {
      setState(() {

      });
    });
  }


  @override
  Widget build(BuildContext context) {
    return BasicScaffold(
      currentRoute: '/home',
      body: Container(
        padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'Živijo test',
                      style: TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    Text(
                      'Upam, da imaš lepo popoldne',
                    )
                  ],
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Text(
                'Ocenjevanja',
                style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.w600
                ),
              ),
              Container(
                padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Container(
                            padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                            child: InkWell(
                              child: Text(
                                'Teden',
                                style: TextStyle(
                                    fontSize: 18,
                                    color: Colors.grey[color1]
                                ),
                              ),
                              onTap: () {
                                animationController.reverse();
                                setState(() {
                                  color1 = 900;
                                  color2 = 500;
                                });
                              },
                            )
                        ),
                        Container(
                            padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                            child: InkWell(
                              child: Text(
                                'Mesec',
                                style: TextStyle(
                                    fontSize: 18,
                                    color: Colors.grey[color2]
                                ),
                              ),
                              onTap: () {
                                animationController.forward();
                                color1 = 500;
                                color2 = 900;
                              },
                            )
                        ),
                      ],
                    ),
                    Crta( animation: animation,),
                  ],
                ),
              ),
              SizedBox(height: 10,),
              ExamCard(),
            ],
          ),
        ),
      ),
    );
  }
  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }
}

我也尝试过将所有内容放到一个返回List的函数中,但这不起作用。

0 个答案:

没有答案