如何获得文本的宽度和高度？

Question

我怎样才能获得width和height的Text？

Text(
   "????????",
   style: TextStyle(
      color: Colors.red,
      fontSize: 18
   ),
),

Answer 1

实际上Text是小部件，并获取颤振中任何小部件的高度和宽度，您必须使用GlobalKey并将其分配给我们的小部件。

\n\n

GlobalKey txtKey = GlobalKey();\n

\n\n

并将此键设置为Text小部件

\n\n

Text(\n   key: txtKey,\n   "\xe5\x90\x83\xe8\x91\xa1\xe8\x90\x84\xe4\xb8\x8d\xe5\x90\x90\xe8\x91\xa1\xe8\x90\x84\xe7\x9a\xae",\n   style: TextStyle(\n      color: Colors.red,\n      fontSize: 18\n   ),\n),\n

\n\n

您可以通过在按钮按下事件中的其他位置编写以下代码来访问高度/宽度！

\n\n

    final keyContext = txtKey.currentContext;\n    if (keyContext != null) {\n          final txtBox = keyContext.findRenderObject() as RenderBox;\n          print(\'height ${txtBox.size.height} and width ${txtBox.size.width}\');\n    }\n

\n\n

此处txtBox返回文本的确切大小。

\n

Answer 2

如果使用TextPainter或Paragraph对象，则可以获得文本的大小。以下是您将如何做到这一点TextPainter：

final text = '?????????';
final style = TextStyle(fontSize: 30);

TextPainter textPainter = TextPainter()
  ..text = TextSpan(text: text, style: style)
  ..textDirection = TextDirection.ltr
  ..layout(minWidth: 0, maxWidth: double.infinity);

print(textPainter.size); // Size(270.0, 43.0)

Answer 3

将其包装到 Container() 中：

\n\n

Container(\n      width: 10.0,\n      height: 20.0,\n      child: Text(\n        "\xe5\x90\x83\xe8\x91\xa1\xe8\x90\x84\xe4\xb8\x8d\xe5\x90\x90\xe8\x91\xa1\xe8\x90\x84\xe7\x9a\xae",\n        style: TextStyle(\n            color: Colors.red,\n            fontSize: 18\n        ),\n      ),\n    )\n

\n