Flutter 多行文本 折叠、超过行数 全文、收起 类似朋友圈
程序员文章站
2022-05-29 20:05:08
...
// 全文、收起 的状态
bool mIsExpansion = false;
// 最大显示行数
int mMaxLine = 5;
///[_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: Colors.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: Colors.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: 100, minWidth: 50);
if (_textPainter.didExceedMaxLines) {//判断 文本是否需要截断
return true;
} else {
return false;
}
}
void _isShowText() {
if (mIsExpansion) {
//关闭
setState(() {
mIsExpansion = false;
});
} else {
//打开
setState(() {
mIsExpansion = true;
});
}
}
上一篇: 自定义View实战之开关按钮实现
下一篇: 【小程序】多选和单选组件的封装