Flutter-将宽度设置为TextFormField

Question

如果我想要具有特定宽度的TextFormField-假设是70像素中的一小部分-我需要将其包装在具有“ width”属性的Container中。但是，如果我这样做，错误文本（以防字段未通过验证）也将被限制在此固定宽度容器中。我想让错误文本扩展到整个屏幕宽度，即使我使字段本身变窄也是如此。可能吗？ TextFormField是否具有某种“宽度”属性，还是有人知道解决方法？感觉很基本。

Container(
  width: 70,
  child: TextFormField(
    ...
    decoration: // Just a custom input decoration...
    validator: (value) {
      if (value.length != 3) {
        return '3 digits required.';
      }
      return null;
    },
  ),
);

Answer 1

您可以在单独的容器中以全角显示您自己的错误文本。

首先在State类中存储一个新变量。

String _errorMessage = null;

然后在渲染方法中更新验证器中的值，并将值传递给if条件以显示/隐藏错误消息。

Column(
  children: <Widget>[
    SizedBox(
      width: 70,
      child: TextFormField(
        decoration: InputDecoration(
          errorStyle: TextStyle(height: 0),
        ),
        validator: (value) {
          String setError(String msg) {
            if (_errorMessage != msg) {
              setState(() { _errorMessage = msg; });
            }
            return msg;
          }

          if (value.length != 3) {
            return setError('3 digits required.');
          }

          return setError(null);
        },
      ),
    ),
    if (_errorMessage != null)
    Text(_errorMessage, style: TextStyle(
      color: Colors.red,
    )),
  ],
),

Answer 2

如果要更改TextFormField的宽度，请使用SizedBox()。如果要将错误消息散布到整个屏幕上，请使用带有Column()和TextFormField()小部件的Text()。您可以使用

Container( 
width: 100
height: 20
child:
    FittedBox(
        fit: BoxFit.contain,
        child: Text('test text'),
    )
)

相对于其父窗口小部件调整文本大小。