gpt4 book ai didi

dart - Flutter - 键入文本动画

转载 作者:IT老高 更新时间:2023-10-28 12:43:41 24 4
gpt4 key购买 nike

对于我的每个文本小部件,我实际上希望输入文本而不是立即显示它。有没有比使用变量并在 setState() 中添加变量更简单的方法?

谢谢

最佳答案

这可能是 AnimatedBuilder 的一个很好的用例。这将使您可以更轻松地控制打字动画的持续时间,并且仅在长度更改时才重建您的小部件。这是一个如何做到这一点的示例。

screenshot

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, 0, 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 - 键入文本动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44224676/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com