如何检查Flutter Text小部件是否溢出 [英] How to check if Flutter Text widget was overflowed
问题描述
我有一个文本小部件,如果超过一定大小,可以将其截断:
I have a Text widget which can be truncated if it exceeds a certain size:
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 50.0),
child: Text(
widget.review,
overflow: TextOverflow.ellipsis,
)
);
或最大行数:
RichText(
maxLines: 2,
overflow: TextOverflow.ellipsis,
text: TextSpan(
style: TextStyle(color: Colors.black),
text: widget.review,
));
我的目标是使文本仅在完成后才可扩展。有没有适当的方法检查文本是否溢出?
My goal is to have the text expandable only if the overflow was done. Is there a proper way to check if text was overflowed?
我发现了在RichText中,有一个 RenderParagraph renderObject
,它具有一个私有属性 TextPainter _textPainter
,它具有一个 bool didExceedMaxLines
。
I have found that in RichText, there is a RenderParagraph renderObject
, which has a private property TextPainter _textPainter
which has a bool didExceedMaxLines
.
简而言之,我只需要访问 richText.renderObject._textPainter.didExceedMaxLines
,但是正如您所看到的,它通过下划线设置为私有。
In short, I just need to access richText.renderObject._textPainter.didExceedMaxLines
but as you can see, it is made private with the underscore.
推荐答案
我找到了一种方法它。以下是完整的代码,但总而言之:
I found a way to do it. Full code below, but in short:
- 使用LayoutBuilder确定我们有多少空间。
- 使用TextPainter模拟空间中文本的呈现。
这是完整的演示应用程序:
Here's the full demo app:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text Overflow Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(title: Text("DEMO")),
body: TextOverflowDemo(),
),
);
}
}
class TextOverflowDemo extends StatefulWidget {
@override
_EditorState createState() => _EditorState();
}
class _EditorState extends State<TextOverflowDemo> {
var controller = TextEditingController();
@override
void initState() {
controller.addListener(() {
setState(() {
mytext = controller.text;
});
});
controller.text = "This is a long overflowing text!!!";
super.initState();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
String mytext = "";
@override
Widget build(BuildContext context) {
int maxLines = 1;
double fontSize = 30.0;
return Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
children: <Widget>[
LayoutBuilder(builder: (context, size) {
// Build the textspan
var span = TextSpan(
text: mytext,
style: TextStyle(fontSize: fontSize),
);
// Use a textpainter to determine if it will exceed max lines
var tp = TextPainter(
maxLines: maxLines,
textAlign: TextAlign.left,
textDirection: TextDirection.ltr,
text: span,
);
// trigger it to layout
tp.layout(maxWidth: size.maxWidth);
// whether the text overflowed or not
var exceeded = tp.didExceedMaxLines;
return Column(children: <Widget>[
Text.rich(
span,
overflow: TextOverflow.ellipsis,
maxLines: maxLines,
),
Text(exceeded ? "Overflowed!" : "Not overflowed yet.")
]);
}),
TextField(
controller: controller,
),
],
),
);
}
}
这篇关于如何检查Flutter Text小部件是否溢出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!