Question

我正在尝试通过点击屏幕来更新两个不同的文本。对于其中一个文本，此操作成功完成，但对另一文本却未成功。我指的是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', 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);
}

Answer 1

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

所以这个问题应该是

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

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

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

1 个答案: