flutter - 使用flutter上的animated_text_kit插件顺序启动多个文本的显示

Question

我已经实现了TyperAnimatedTextKit：

TyperAnimatedTextKit(
                      onTap: () {
                        print("Tap Event");
                      },
                      text: [
                        "Welcome to this application!",
                        "This application demonstrates TyperAnimatedTextKit",
                      ],
                      displayFullTextOnTap: true,
                      isRepeatingAnimation: false,
                      speed: new Duration(milliseconds: 50),
                      textStyle: TextStyle(
                          fontSize: 24.0,
                          fontFamily: "Arvo-Regular",
                          color: Colors.white,
                      ),
                      textAlign: TextAlign.center,
                      alignment: AlignmentDirectional.centerStart,
                      onFinished: intiateWidget2(),
                  )

现在我需要用intiateWidget2()启动另一个TyperAnimatedTextKit来输入。基本上我希望第二个“TyperAnimatedTextKit”在第一个完成后开始输入。请告知我应该如何实施这一点。

编辑 1（04/07/2020）：两个 TyperAnimatedTextKit 小部件需要在不同的位置实现。

标签： flutterpackageflutter-animation

Answer 1

一个简单的方法是在 Widget 树中为 TyperAnimatedTextKit 小部件使用一个变量，在 initState() 中使用 TyperAnimatedTextKit 的实例（第一个实例）初始化该变量，然后在initialWidget2 中将该变量设置为TyperAnimatedTextKit（第二个实例），在 setState() 调用中。问题是，TyperAnimatedTextKits 必须使用不同的键进行初始化，否则动画将不会在第二个实例中播放。我试图把它放在下面的代码中，hth：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        canvasColor: Colors.black,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  TyperAnimatedTextKit _animatedTextWidget;
  Widget _animatedTextWidget2 = Container();

  @override
  void initState() {
    _animatedTextWidget = intiateWidget1();

    super.initState();
  }
  TyperAnimatedTextKit intiateWidget1() {
    print('initiate 1');
    return TyperAnimatedTextKit(
        key: GlobalKey(),
        onTap: () {
          print("Tap Event");
        },
        text: [
          "Welcome to this application!",
          "This application demonstrates TyperAnimatedTextKit",
        ],
        displayFullTextOnTap: true,
        isRepeatingAnimation: false,
        speed: new Duration(milliseconds: 50),
        textStyle: TextStyle(
          fontSize: 24.0,
          fontFamily: "Arvo-Regular",
          color: Colors.white,
        ),
        textAlign: TextAlign.center,
        alignment: AlignmentDirectional.centerStart,
        onFinished: intiateWidget2
    );
  }

  void intiateWidget2() {
    print('in initiate 2');
    setState(() {
      this._animatedTextWidget2 = TyperAnimatedTextKit(
        key: GlobalKey(),
          onTap: () {
            print("Tap Event");
          },
          text: [
            "Let's get started",
            "with our top secret impossible mission",
          ],
          displayFullTextOnTap: true,
          isRepeatingAnimation: false,
          speed: new Duration(milliseconds: 50),
          textStyle: TextStyle(
            fontSize: 24.0,
            fontFamily: "Arvo-Regular",
            color: Colors.green,
          ),
          textAlign: TextAlign.center,
          alignment: AlignmentDirectional.centerStart,
          onFinished: () => print('finished the second'));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            this._animatedTextWidget,
            Container(height: 15,),
            this._animatedTextWidget2
          ],
        ),
      )
    );
  }
}