flutter 可以折叠展开的text （类似微信朋友圈那种，展开按钮在最后面）

最新推荐文章于 2024-09-11 07:32:23 发布

原创

最新推荐文章于 2024-09-11 07:32:23 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#dart

本文介绍了如何在Flutter中创建一个可折叠展开的Text组件，类似于微信朋友圈的显示方式。通过使用RichText和自定义代码，可以将长文本设置为仅显示部分内容，并在末尾添加展开按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写自定义目录标题

先看效果图
在这里插入图片描述
直接上代码
首先是richText


import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

/**
 * 可展开的文本text
 */
// ignore: must_be_immutable
class OPRichText extends StatefulWidget {

  OPRichText({Key key, this.text, this.width,this.textColor})
      :super(key: key);
  double width;
   String text;
  Color textColor;
  @override
  _OPRichText  createState ()=>_OPRichText();
}

class _OPRichText extends State<OPRichText> {

  // 全文、收起 的状态
  bool mIsExpansion = false;
  int mSelectIndex = -1; //默认未选中
  bool IsExpansion(String text, width) {
    TextPainter _textPainter = TextPainter(
        maxLines: 3,
        text: TextSpan(
            text: text, style: TextStyle(fontSize: 14.0, color: Colors.black)),
        textDirection: Tex