flutter 文本更多收起

最新推荐文章于 2024-07-10 17:22:53 发布

转载最新推荐文章于 2024-07-10 17:22:53 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hllxy/p/10840023.html

文章标签：

#移动开发

项目中遇到需要跟小红书上面那样，当正文文字过多时，显示一个更多按钮，可以查看全文，收起按钮，显示指定行数文字。

在dart中，只有TextPainter 能判断当前文字的行数，所以单独写了一个判断的方法

// 当前是否已是 "全文" 状态
  bool mIsExpansion = false;

  //最大显示行数（默认 3 行）
  int mMaxLine = 3;

//_text：显示的文字
Widget _RichText(String _text) {
    if (IsExpansion(_text)) {
//      //如果需要截断
      if (mIsExpansion) {
        return Column(
          children: <Widget>[
            new Text(
              _text,
              textAlign: TextAlign.left,
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: FlatButton(
                onPressed: () {
                  _isShowText();
                },
                child: Text("<收起"),
                textColor: SQColor.grey,
              ),
            ),
          ],
        );
      } else {
        return Column(
          children: <Widget>[
            new Text(
              _text,
              maxLines: 3,
              textAlign: TextAlign.left,
              overflow: TextOverflow.ellipsis,
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: FlatButton(
                onPressed: () {
                  _isShowText();
                },
                child: Text("全文>"),
                textColor: SQColor.grey,
              ),
            ),
          ],
        );
      }
    } else {
      return Text(
        _text,
        maxLines: 3,
        textAlign: TextAlign.left,
        overflow: TextOverflow.ellipsis,
      );
    }
  }

  bool IsExpansion(String text) {
    TextPainter _textPainter = TextPainter(
        maxLines: 3,
        text: TextSpan(
            text: text, style: TextStyle(fontSize: 16.0, color: Colors.black)),
        textDirection: TextDirection.ltr)
      ..layout(maxWidth: Screen.width, minWidth: Screen.width);
    if (_textPainter.didExceedMaxLines) {//这里判断 文本是否截断
      return true;
    } else {
      return false;
    }
  }

  void _isShowText() {
    if (mIsExpansion) {
      //关闭了
      setState(() {
        mIsExpansion = false;
      });
    } else {
      setState(() {
        mIsExpansion = true;
      });
    }
  }