dart – Flutter – 键入文本动画

概述对于我的每个文本小部件,我实际上希望文本输入而不是立即显示它.有没有比使用变量更简单的方法并在setState()中添加它？ 谢谢 这可能是AnimatedBuilder的一个很好的用例.这将允许您更轻松地控制键入动画的持续时间,并仅在长度更改时重建窗口小部件.这是一个如何做到这一点的例子. import 'package:flutter/material.dart';void main() 对于我的每个文本小部件,我实际上希望文本输入而不是立即显示它.有没有比使用变量更简单的方法并在setState()中添加它？

谢谢

解决方法 这可能是AnimatedBuilder的一个很好的用例.这将允许您更轻松地控制键入动画的持续时间,并仅在长度更改时重建窗口小部件.这是一个如何做到这一点的例子.

import 'package:Flutter/material.dart';voID main() {  runApp(new MyApp());}class MyApp extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return new MaterialApp(      Title: 'Flutter Demo',theme: new themeData(        primarycolor: const color.fromARGB(255,199,0),accentcolor: const color.fromARGB(255,222,233,226),brightness: Brightness.dark,canvascolor: colors.black,),home: new MyHomePage(),deBUGShowCheckedModeBanner: false,);  }}class MyHomePage extends StatefulWidget {  @overrIDe  State createState() => new MyHomePageState();}class MyHomePageState extends State<MyHomePage> with TickerProvIDerStateMixin {  Animation<int> _characterCount;  int _stringIndex;  static const List<String> _kStrings = const <String>[    'Call trans opt: received. 2-19-98 13:24:18 REC:Log>','Trace program running.','[312]555-0690',];  String get _currentString => _kStrings[_stringIndex % _kStrings.length];  @overrIDe  Widget build(BuildContext context) {    themeData theme = theme.of(context);    TextStyle textStyle = theme.texttheme.Title.copyWith(      FontFamily: 'CourIEr New',color: theme.primarycolor,);    return new Scaffold(      floatingActionbutton: new floatingActionbutton(        child: new Icon(Icons.navigate_next),onpressed: () async {          AnimationController controller = new AnimationController(            duration: const Duration(milliseconds: 4000),vsync: this,);          setState(() {            _stringIndex = _stringIndex == null ? 0 : _stringIndex + 1;            _characterCount = new StepTween(begin: 0,end: _currentString.length)              .animate(new CurvedAnimation(parent: controller,curve: Curves.easeIn));          });          await controller.forward();          controller.dispose();        },body: new Container(        margin: new EdgeInsets.symmetric(vertical: 50.0,horizontal: 10.0),child: _characterCount == null ? null : new AnimatedBuilder(          animation: _characterCount,builder: (BuildContext context,Widget child) {            String text = _currentString.substring(0,_characterCount.value);            return new Text(text,style: textStyle);          },);  }}

如果您计划大量使用此动画文本小部件,则可以使用AnimatedWidget将其重构为单独的类.

总结

以上是内存溢出为你收集整理的dart – Flutter – 键入文本动画全部内容，希望文章能够帮你解决dart – Flutter – 键入文本动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。