【老孟Flutter】自定義文字步進元件
阿新 • • 發佈:2020-11-25
![](https://img2020.cnblogs.com/other/467322/202011/467322-20201124220920729-276196006.png)
> **老孟導讀**:此文介紹一個自定義元件,歡迎大家到 Github 上給個小星星,Github 還有很多我整理的 Flutter 資源。
![](https://img2020.cnblogs.com/other/467322/202011/467322-20201124220921647-1906004693.gif)
**WriteText** 元件是一個文字步進元件,即字元一個一個顯示,就像手寫一樣。
![](https://img2020.cnblogs.com/other/467322/202011/467322-20201124220922112-797677009.gif)
> 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` 中新增如下依賴:
```dart
dependencies:
write_text: ^0.0.1
```
執行命令:
```
flutter pub get
```
### 使用
```dart
WriteText(data: 'StepText 是一個步進文字元件,即字元一個一個顯示,就像手寫一樣。'),
```
![](https://img2020.cnblogs.com/other/467322/202011/467322-20201124220922648-2088546217.gif)
預設情況下,每個字元出現時長是 **300 ms**,設定時長為 1 秒:
```dart
WriteText(
data: 'StepText 是一個步進文字元件,即字元一個一個顯示,就像手寫一樣。',
perMillSeconds: 1000,
)
```
![](https://img2020.cnblogs.com/other/467322/202011/467322-20201124220922822-2114376317.gif)
設定字型樣式
```dart
WriteText(
data: 'StepText 是一個步進文字元件,即字元一個一個顯示,就像手寫一樣。',
textStyle: TextStyle(fontSize: 20, color: Colors.red),
)
```
![](https://img2020.cnblogs.com/other/467322/202011/467322-20201124220923347-1930992051.gif)
設定不顯示游標:
```dart
WriteText(
data: 'StepText 是一個步進文字元件,即字元一個一個顯示,就像手寫一樣。',
showCursor: false,
),
```
設定自定義游標:
```dart
WriteText(
data: 'StepText 是一個步進文字元件,即字元一個一個顯示,就像手寫一樣。',
cursor: Container(
width: 2,
height: 16,
color: Colors.red,
),
)
```
![](https://img2020.cnblogs.com/other/467322/202011/467322-20201124220925622-301973807.gif)
主動控制組件的啟動和暫停:
```dart
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,
),
```
![](https://img2020.cnblogs.com/other/467322/202011/467322-20201124220926416-348958812.gif)
看下面的效果
完整程式碼如下:
```dart
class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
}
class _DemoState exten