flutter 文本 更多 收起

項目中遇到須要跟小紅書上面那樣，當正文文字過多時，顯示一個更多按鈕，能夠查看全文，收起按鈕，顯示指定行數文字。

在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; }); } }