如何在flutter中获取Text Widget的大小 [英] How can I get the size of the Text Widget in flutter
问题描述
我已经为我的 Text
内容的背景绘制了一个形状.
我希望背景自动缩放文本,即使 softWrap
是真实的.
所以,我需要在 Widget build(BuildContext context)
之前获取我的 Text Widget 的宽度和高度.
其实我是在用flutter模拟iOS消息之类的聊天气泡效果.这是iOS版教程.
抱歉.这不是对该主题问题的直接回答!但是如果有人需要获取 Text 小部件的大小 - 这种方法可以提供帮助.它帮助我创建了自定义菜单小部件.
class TextSize extends StatelessWidget {const TextSize({Key key}) : super(key: key);@覆盖小部件构建(BuildContext 上下文){final String text = "一行文本";final TextStyle textStyle = TextStyle(字体大小:30,颜色:Colors.white,);最终大小 txtSize = _textSize(text, textStyle);//这种使用——毫无意义.这只是一个例子.返回容器(颜色:Colors.blueGrey,宽度:txtSize.width,高度:txtSize.height,孩子:文本(文本,风格:文字风格,软包装:假,溢出:TextOverflow.clip,最大行数:1,),);}//这里是!大小 _textSize(字符串文本,TextStyle 样式){最终 TextPainter textPainter = TextPainter(文本:TextSpan(文本:文本,样式:样式),maxLines:1,textDirection:TextDirection.ltr)..layout(minWidth: 0, maxWidth: double.infinity);返回 textPainter.size;}}
I've painted a shape for the background of my content of Text
.
I want the background autoscale the Text, even the softWrap
being true.
So, I need to get the width and height of my Text Widget before Widget build(BuildContext context)
.
Actually, I am simulating the chat bubble effect like iOS message using flutter. Here is the iOS version tutorial. Creating a Chat Bubble .
The core code below:
let label = UILabel()
label.numberOfLines = 0
label.font = UIFont.systemFont(ofSize: 18)
label.textColor = .white
label.text = text
let constraintRect = CGSize(width: 0.66 * view.frame.width,
height: .greatestFiniteMagnitude)
let boundingBox = text.boundingRect(with: constraintRect,
options: .usesLineFragmentOrigin,
attributes: [.font: label.font],
context: nil)
label.frame.size = CGSize(width: ceil(boundingBox.width),
height: ceil(boundingBox.height))
let bubbleSize = CGSize(width: label.frame.width + 28,
height: label.frame.height + 20)
let width = bubbleSize.width
let height = bubbleSize.height
=========================================
SOLUTION
Here is my solution.
bubble.dart:
// Define a CustomPainter to paint the bubble background.
class BubblePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final Paint paint = Paint()
..color = Color(0xff188aff)
..style = PaintingStyle.fill;
final Path bubble = Path()
..moveTo(size.width - 22.0, size.height)
..lineTo(17.0, size.height)
..cubicTo(
7.61, size.height, 0.0, size.height - 7.61, 0.0, size.height - 17.0)
..lineTo(0.0, 17.0)
..cubicTo(0.0, 7.61, 7.61, 0.0, 17.0, 0.0)
..lineTo(size.width - 21, 0.0)
..cubicTo(size.width - 11.61, 0.0, size.width - 4.0, 7.61,
size.width - 4.0, 17.0)
..lineTo(size.width - 4.0, size.height - 11.0)
..cubicTo(size.width - 4.0, size.height - 1.0, size.width, size.height,
size.width, size.height)
..lineTo(size.width + 0.05, size.height - 0.01)
..cubicTo(size.width - 4.07, size.height + 0.43, size.width - 8.16,
size.height - 1.06, size.width - 11.04, size.height - 4.04)
..cubicTo(size.width - 16.0, size.height, size.width - 19.0, size.height,
size.width - 22.0, size.height)
..close();
canvas.drawPath(bubble, paint);
}
@override
bool shouldRepaint(BubblePainter oldPainter) => true;
}
// This is my custom RenderObject.
class BubbleMessage extends SingleChildRenderObjectWidget {
BubbleMessage({
Key key,
this.painter,
Widget child,
}) : super(key: key, child: child);
final CustomPainter painter;
@override
RenderCustomPaint createRenderObject(BuildContext context) {
return RenderCustomPaint(
painter: painter,
);
}
@override
void updateRenderObject(
BuildContext context, RenderCustomPaint renderObject) {
renderObject..painter = painter;
}
}
Use the BubbleMessage
Widget like this:
import 'bubble.dart'
...code ...
BubbleMessage(
painter: BubblePainter(),
child: Container(
constraints: BoxConstraints(
maxWidth: 250.0,
minWidth: 50.0,
),
padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 6.0),
child: Text(
'your text variable',
softWrap: true,
style: TextStyle(
fontSize: 16.0,
),
),
),
),
...code ...
The bubble effect:
My apologies. This is not a direct answer on the topic's question! But If someone needs to get the size of a Text widget — this method can help. It helped me in creation of custom menu widget.
class TextSized extends StatelessWidget {
const TextSized({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
final String text = "Text in one line";
final TextStyle textStyle = TextStyle(
fontSize: 30,
color: Colors.white,
);
final Size txtSize = _textSize(text, textStyle);
// This kind of use - meaningless. It's just an example.
return Container(
color: Colors.blueGrey,
width: txtSize.width,
height: txtSize.height,
child: Text(
text,
style: textStyle,
softWrap: false,
overflow: TextOverflow.clip,
maxLines: 1,
),
);
}
// Here it is!
Size _textSize(String text, TextStyle style) {
final TextPainter textPainter = TextPainter(
text: TextSpan(text: text, style: style), maxLines: 1, textDirection: TextDirection.ltr)
..layout(minWidth: 0, maxWidth: double.infinity);
return textPainter.size;
}
}
这篇关于如何在flutter中获取Text Widget的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!