共计 2183 个字符,预计需要花费 6 分钟才能阅读完成。
老孟导读 :此文介绍一个自定义组件,欢送大家到 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
增加微信或者公众号支付《330 个控件大全》和《Flutter 实战》PDF。
欢送退出 Flutter 交换群(微信:laomengit)、关注公众号【老孟 Flutter】:
正文完