Question

如何缩小TextFormField使其仅适合其中的文本及其关联的前缀/后缀图标？

我正在尝试在我的数字输入旁边显示一个前缀（美元）图标。我希望该字段对齐屏幕的右侧。我的TextFormField位于一行内：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Text('TITLE'),
    Expanded(
       TextFormField(
         textAlign: TextAlign.end,
         decoration: InputDecoration(
           prefixText: '\$',
         ),
         ...
       ),
    ), 
  ],
),

这会在右侧显示数字，而TextFormField会扩展以填充所有可用空间，并将前缀文本放在左侧：

TITLE $ _____________ 1000

我想在标题和表单字段之间添加一个空格，并让表单字段仅占据显示其数字所需的空间：

标题<----空格----> $ 1000

到目前为止，我的尝试仅导致间隔符与表单字段共享间距：

标题<-空格-> $ ____ 1000

我想给前缀文本设置样式而不是字段文本，所以我不能使用inputFormatter添加前缀。似乎没有任何办法告诉表单字段在字段文本旁边绘制前缀文本。我怀疑我的前缀文本问题与此错误有关：https://github.com/flutter/flutter/issues/18788

如果有一种方法可以告诉表单字段占用所需的最小空间，那么我可以解决前缀文本错误。

Answer 1

我认为您不能shrink a TextFormField to fit only the text inside。反正不容易。我没有答案，但也许有些指针也可以帮助您。

首先：您必须知道您使用的是哪种字体，并计算出如果您使用与输入字体完全相同的字体样式在屏幕上呈现文本，那么该文本将持续多长时间。理论上，一旦有了这些，就应该可以以编程方式计算输入字段的宽度。

Flutter使用RenderObject来跟踪大小。实际上，RenderBox是RenderObject的子类。您可以通过GlobalKey来检索它们。

如果我没记错的话，API：

final gk = GlobalKey();
RenderBox box = gk.currentContext.findRenderObject();

很好奇您会找到什么解决方案。如果解决了这个问题，请回复：）

缩小TextFormField以仅适合文本

1 个答案: