Question

在颤动中，TextField没有固有宽度。它只知道如何将自身调整为其父容器的整个宽度。如何将宽度设置为所包含文本的宽度。

我尝试将TextField放在容器中

如此处概述 How to update flutter TextField's height and width?

new Container(              
  width: 100.0,
  child: new TextField()
)

我希望TextField的宽度与它包含的文本的宽度匹配。输入文本时，TextField应该变宽，而删除文本时，TextField应该变窄。

Answer 1

Flutter有IntrinsicWidth为您进行计算。只需将“deep cloning”或TextField包装在其中，如下所示：

TextFormField

Answer 2

通过使用TextPainter计算所需的文本宽度，我能够达到预期的结果。然后，我将该宽度用作包含Container的{{1}}的宽度。

请记住在您的TextFields TextField方法中调用setState()。这告诉窗口小部件重新绘制自身，从而使TextField调整为其内容的新宽度。

onChanged

Answer 3

我修改了SteveM的答案以解决小部件无法正确扩展时的错误。在计算小部件的宽度时，我们应该尊重这两个小事情：

TextField合并给定的textStyle参数和当前主题的TextStyle。这也必须在自定义小部件中完成：

final ThemeData themeData = Theme.of(context);
final TextStyle style = themeData.textTheme.subtitle1.merge(textStyle);

TextField的{{1}}必须考虑到小部件的宽度计算。由于无法从cursorWidth类获取默认光标宽度，因此我检查了其代码，并向TextField类添加了新的常量。不要忘记将其传递给FitsTextField的构造函数：

TextField

完整代码：

final textWidth = max(widget.minWidth, tp.width + _CURSOR_WIDTH);

// When building a TextField:
child: TextField(
        cursorWidth: _CURSOR_WIDTH,

Flutter TextField宽度应与所包含文本的宽度匹配

3 个答案: