flutter_markdown 基本使用

MarkdownStyleSheet styleSheet = MarkdownStyleSheet(
      p: TextStyle(
          fontSize: 14.sp, color: Colors.black, height: 1.6), // 设置段落字体大小
    );
return Markdown(data: message.content,
          styleSheet: styleSheet,
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
      );

MarkdownStyleSheet 是设置样式 图示为p标签

shrinkWrap:shrinkWrap是 Flutter 中 ListView 和 GridView 等列表类控件的一个属性。当 shrinkWrap 设置为 true 时,列表会根据其子 widget 的实际总高度来设置其自身的高度,而不是试图填满一个固定的高度。这在构建动态列表时非常有用,因为这样可以避免在动态列表中出现不必要的空白区域或滚动条

physics: NeverScrollableScrollPhysics(), // 防止滚动

要实现 Flutter Markdown 的打字效果,您可以使用 Flutter 的动画机制。具体而言,您可以将 Markdown 文本分成多个部分,并在每个部分之间添加适当的延迟,以便在一段时间内逐个添加 Markdown 部分。 以下是一个实现 Flutter Markdown 打字效果的示例代码: ``` import 'package:flutter/material.dart'; import 'package:flutter_markdown/flutter_markdown.dart'; class TypingMarkdownWidget extends StatefulWidget { final String markdown; TypingMarkdownWidget({@required this.markdown}); @override _TypingMarkdownWidgetState createState() => _TypingMarkdownWidgetState(); } class _TypingMarkdownWidgetState extends State<TypingMarkdownWidget> with SingleTickerProviderStateMixin { AnimationController _controller; List<String> _markdownParts; int _currentPartIndex = 0; @override void initState() { super.initState(); // 将 Markdown 文本分成多个部分 _markdownParts = widget.markdown.split('\n'); // 初始化动画控制器 _controller = AnimationController( vsync: this, duration: Duration(milliseconds: 500), ); // 添加动画监听器 _controller.addListener(() { setState(() {}); }); // 开始动画 _controller.forward(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { // 获取当前部分的文本 String currentPart = _markdownParts[_currentPartIndex]; // 计算当前部分的长度 int currentPartLength = (currentPart.length * _controller.value).round(); // 截取当前部分的文本 String currentText = currentPart.substring(0, currentPartLength); // 如果动画已完成,移动到下一个部分 if (_controller.isCompleted) { _currentPartIndex++; if (_currentPartIndex < _markdownParts.length) { // 开始下一个部分的动画 _controller.reset(); _controller.forward(); } } return Markdown(data: currentText); } } ``` 在上面的示例中,我们创建了一个名为 TypingMarkdownWidget 的 StatefulWidget,它接受一个名为 markdown 的必需参数。在 initState 方法中,我们将 Markdown 文本分成多个部分,并初始化动画控制器。在 build 方法中,我们获取当前部分的文本,并计算当前部分的长度。然后,我们使用 Markdown 组件来渲染当前部分的文本。如果动画已完成,我们将移动到下一个部分,并开始下一个部分的动画。 请注意,上面的示例仅演示了如何实现 Flutter Markdown 的打字效果。如果您想要实现更复杂的打字效果,例如在 Markdown 文本中添加动态效果或自定义动画曲线,您需要进一步自定义上面的示例代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值