【老孟Flutter】自定义文本步进组件

概述老孟导读：此文介绍一个自定义组件，欢迎大家到 Github 上给个小星星，Github 还有很多我整理的 Flutter 资源。 WriteText 组件是一个文本步进组件，即字符一个一个显示，就像手

老孟导读：此文介绍一个自定义组件，欢迎大家到 Github 上给个小星星，Github 还有很多我整理的 Flutter 资源。

WriteText 组件是一个文本步进组件，即字符一个一个显示，就像手写一样。

pub 地址：https://pub.dev/packages/write_text

Github 地址：https://github.com/781238222/flutter-do/tree/master/write_text

引入软件包

在 pubspec.yaml 中添加如下依赖：

dependencIEs:  write_text: ^0.0.1

执行命令：

Flutter pub get

使用

WriteText(data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。'),

默认情况下，每个字符出现时长是 300 ms，设置时长为 1 秒：

WriteText(  data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。',perMillSeconds: 1000,)

设置字体样式

WriteText(  data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。',textStyle: TextStyle(FontSize: 20,color: colors.red),)

设置不显示光标：

WriteText(  data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。',showCursor: false,),

设置自定义光标：

WriteText(  data: 'StepText 是一个步进文本组件，即字符一个一个显示，就像手写一样。',cursor: Container(    wIDth: 2,height: 16,color: colors.red,)

主动控制组件的启动和暂停：

WriteTextController _controller = WriteTextController();bool starting = false;Raisedbutton(              onpressed: () {                if (starting) {                  starting = false;                  _controller.stop();                } else {                  starting = true;                  _controller.start();                }                setState(() {});              },child: Text('${starting ? '暂停' : '启动'}'),WriteText(              data: _data,controller: _controller,autoStart: false,

看下面的效果

完整代码如下：

class Demo extends StatefulWidget {  @overrIDe  _DemoState createState() => _DemoState();}class _DemoState extends State<Demo> with SingleTickerProvIDerStateMixin {  AnimationController _controller;  @overrIDe  voID initState() {    _controller =        AnimationController(vsync: this,duration: Duration(seconds: 2));    _controller.forward();    super.initState();  }  @overrIDe  voID dispose() {    _controller.dispose();    super.dispose();  }  @overrIDe  Widget build(BuildContext context) {    return Scaffold(      appbar: Appbar(),body: Center(        child: AnimatedBuilder(          animation: _controller,builder: (BuildContext context,Widget child) {            return Container(              padding: EdgeInsets.symmetric(horizontal: 10),decoration: Boxdecoration(                  color: colors.lightBlue,borderRadius: borderRadius.circular(4)),height: 45,wIDth: _controller.value * 200,alignment: Alignment.center,child: _controller.value == 1.0                  ? WriteText(                      data: '老孟 Flutter',perMillSeconds: 200,textStyle: TextStyle(FontSize: 16,color: colors.white),cursor: Container(                        height: 2,wIDth: 8,color: colors.white,)                  : Container(),);          },);  }}

交流

老孟Flutter博客（330个控件用法+实战入门系列文章）：http://laomengit.com

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

总结

以上是内存溢出为你收集整理的【老孟Flutter】自定义文本步进组件全部内容，希望文章能够帮你解决【老孟Flutter】自定义文本步进组件所遇到的程序开发问题。

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