Flutter-setState未更新特定的小部件

如何解决Flutter-setState未更新特定的小部件

我正在尝试通过点击屏幕来更新两个不同的文本。对于其中一个文本，此操作成功完成，但对另一文本却未成功。我指的是TyperAnimatedTextKit小部件和其下方的Text小部件。前者不起作用，但后者起作用。

如下面的代码片段所示，当轻按屏幕时，应该更改两个小部件。一个是文本小部件。轻按屏幕时，它将字符串更新为另一个类“（quoteBrain.getQuoteAuthor（）”中的值。这实际上有效并成功更改了屏幕上的文本。轻按屏幕会导致调用ScreenTapped（）方法，该方法会更新状态，并从quoteBrain类中获取下一个String。

但是，我还使用了来自“动画文本工具包”中的TyperAnimatedTextKit。尽管代码使用与“文本”小部件相同的逻辑（即从另一个类中获取字符串并调用函数进行更新），但这永远行不通。

我想知道是否有人可以提供一些见识。

非常感谢，并乐意提供更多详细信息。

import 'package:flutter/material.dart';
import 'quote_brain.dart';
import 'package:animated_text_kit/animated_text_kit.dart';

QuoteBrain quoteBrain = QuoteBrain();

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  bool buttonVisible = true;

  void ScreenTapped() {
    setState(() {
      quoteBrain.NextQuote();
      buttonVisible = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.fill,image: AssetImage('images/nightsky.png'),),child: GestureDetector(
        onTap: () {
          print('Screen was tapped');
          ScreenTapped();
        },child: Scaffold(
          backgroundColor: Colors.transparent,body: Column(
            children: <Widget>[
              Expanded(
                child: Container(
                  alignment: Alignment.center,margin: EdgeInsets.all(30),padding: EdgeInsets.symmetric(vertical: 150),child: Column(
                    children: <Widget>[
                      TyperAnimatedTextKit(
                        isRepeatingAnimation: false,text: [quoteBrain.getQuoteText()],textStyle: TextStyle(fontFamily: 'QuiteMagical',fontSize: 50,color: Colors.white),Text(
                        quoteBrain.getQuoteAuthor(),style: TextStyle(fontFamily: 'QuiteMagical',SizedBox(height: 54),Visibility(
                        visible: buttonVisible,child: FadeAnimatedTextKit(
                          repeatForever: false,text: ["TAP ANYWHERE"],textStyle: TextStyle(color: Colors.white),)
                    ],)
            ],);
  }
}

QuoteBrain类

import 'quote.dart';

class QuoteBrain {
  int quoteIndex = 0;

  List<Quote> _quoteBank = [
    Quote('\"This is an example of a quote. I am making it really long to see how it wraps\"','\~Person One'),Quote('This is a second test of a quote','\~Person Two')
  ];

  String getQuoteText() {
    return _quoteBank[quoteIndex].quoteText;
  }

  String getQuoteAuthor() {
    return _quoteBank[quoteIndex].quoteAuthor;
  }

  void NextQuote() {
    if (quoteIndex < _quoteBank.length - 1) {
      quoteIndex++;
    }
  }
}

报价类

class Quote {
  String quoteText;
  String quoteAuthor;

  Quote(this.quoteText,this.quoteAuthor);
}

解决方法

如果有人仍然面临这个问题，您需要向您的 AnimatedTextKitWidget 添加一个 ValueKey。

所以这个问题应该是

TyperAnimatedTextKit(
                        key: ValueKey(quoteBrain.getQuoteText()),isRepeatingAnimation: false,text: [quoteBrain.getQuoteText()],textStyle: TextStyle(fontFamily: 'QuiteMagical',fontSize: 50,color: Colors.white),)
    

现在调用 setState 应该会按预期更新您的小部件