Flutter - setState 没有更新特定的小部件答案

【问题标题】：Flutter - setState is not updating a particular widgetFlutter - setState 没有更新特定的小部件
【发布时间】：2020-12-09 14:22:16
【问题描述】：

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

正如下面的代码 sn-p 所示，当点击屏幕时，有两个小部件应该改变。一个是文本小部件。当屏幕被点击时，它会将字符串更新为另一个类“(quoteBrain.getQuoteAuthor()”中的值。这实际上有效并成功更改了屏幕上的文本。点击屏幕导致调用 ScreenTapped() 方法，该方法更新状态并从 quoteBrain 类中获取下一个字符串。

然而我也在使用 Animated Text Kit 包中的 TyperAnimatedTextKit。尽管代码使用与 Text 小部件相同的逻辑（即从另一个类中获取字符串并调用函数来更新它），但这永远不会起作用。

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

非常感谢，很高兴提供更多详细信息。

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', fontSize: 50, color: Colors.white),
                      ),
                      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);
}

【问题讨论】：

请提供 QuoteBrain 类
@TipuSultan 谢谢我在帖子中添加了quotebrain 类和quote 类
@macl64 这与动画文本小部件有关。人们之前遇到过同样的问题，github上的相应问题已经关闭，没有解决方案。问题链接 - github.com/aagarwal1012/Animated-Text-Kit/issues/27
@JigarPatel 感谢您的背景。我想现在我会尝试找到一种替代方法来实现我想要的动画效果（一个字母一个接一个出现的动画）

标签： flutter dart flutter-layout flutter-animation

【解决方案1】：

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

所以对于这个问题应该是

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

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

【讨论】：