flutter Text 文本更多和收起功能_flutter 富文本展开显示更多-优快云博客

本文档介绍了一个名为`TextSpanShow`的组件，它允许根据需求自定义收起和更多按钮的样式，并提供多个参数控制显示。组件能够智能判断文本是否超过最大行数并进行截断，支持点击展开和收起全文。示例代码展示了如何使用该组件以及其在空安全环境下的实现。

组件化，封装为公共组件

收起和更多按钮的样式可以根据自己的需求来修改，提供了很多可先参数来控制。

非空


class TextSpanShow extends StatefulWidget {
   
   
  final String text;
  final Color colorTest;
  final Color ellipsisColorTest;
  final Color moreBackgroundTest;
  final Color moreContainerColor;
  final int mMaxLine;
  final bool showColor;
  final TextStyle styleText;
  final double textSpanWidth;
  final double textSpanHeight;
  const TextSpanShow(
    this.text, {
   
   
    Key key,
    this.colorTest = Colors.black,
    this.ellipsisColorTest,
    this.mMaxLine = 3, this.styleText, this.moreBackgroundTest, this.showColor, this.textSpanWidth, this.textSpanHeight, this.moreContainerColor,
  }) : super(key: key);

  @override
  _TextSpanShowState createState() => _TextSpanShowState();
}

class _TextSpanShowState extends State<TextSpanShow> {
   
   
  bool mIsExpansion = false;




  @override
  Widget build(BuildContext context) {
   
   
    return Container(
      width: widget.textSpanWidth ?? null,
      height: widget.textSpanHeight ?? null,
      color: widget.moreContainerColor ?? null,
      child: richText(widget.text,),
    );
  }

  Widget richText(String _text) {
   
   
    if (IsExpansion(_text)) {
   
   
     //如果需要截断
      if (mIsExpansion) {
   
   
        return Stack(
          children: <Widget>[
            new Text(
              _text,
              textAlign: TextAlign.left,
              style:widget.styleText?? TextStyle(color: widget.colorTest),
            ),
            Positioned(
              right: 0,
              bottom: 0,
              child: Container(
                decoration: BoxDecoration(color: Colors.red),
                child: GestureDetector(
                  onTap: () {
   
   
                    _isShowText();