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

桃扇骨 2022-12-23 11:20 171阅读 0赞

![20201124220919398.png][]

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

![20201124220920461.png][]

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

![20201124220921657.png][]

> pub 地址：[https://pub.dev/packages/write\_text][https_pub.dev_packages_write_text]
> 
> Github 地址：[https://github.com/781238222/flutter-do/tree/master/write\_text][https_github.com_781238222_flutter-do_tree_master_write_text]

### 引入软件包 ###

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

dependencies:
      write_text: ^0.0.1

执行命令：

flutter pub get

### 使用 ###

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

![2020112422092293.png][]

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

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

![20201124220922540.png][]

设置字体样式

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

![20201124220923365.png][]

设置不显示光标：

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

设置自定义光标：

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

![20201124220925608.png][]

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

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,
                ),

![20201124220926351.png][]

看下面的效果

完整代码如下：

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][http_laomengit.com]

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

[20201124220919398.png]: /images/20221120/f0b0b309a8e44646a0c932c25404c6c7.png
[20201124220920461.png]: /images/20221120/d93df4248efa4644a2c9b76ae28e01e3.png
[20201124220921657.png]: /images/20221120/55b778dba02f4f9ab966a896480c70c1.png
[https_pub.dev_packages_write_text]: https://pub.dev/packages/write_text
[https_github.com_781238222_flutter-do_tree_master_write_text]: https://github.com/781238222/flutter-do/tree/master/write_text
[2020112422092293.png]: /images/20221120/84d0485edd7c40bfb5765e62c878d612.png
[20201124220922540.png]: /images/20221120/6f86273ea74a4d9b9dd8efe897db81e2.png
[20201124220923365.png]: /images/20221120/8226875776074d1a8979fcd492d39fe5.png
[20201124220925608.png]: /images/20221120/fbb301ef42224e81b5b922688d836232.png
[20201124220926351.png]: https://img-blog.csdnimg.cn/20201124220926351.png
[http_laomengit.com]: http://laomengit.com