验证器错误消息更改 TextFormField 的高度

Question

当错误消息出现时，它会降低TextFormField. 如果我理解正确，那是因为在指定的高度中考虑了错误消息的高度。

这是之前的屏幕：

之后 ：

试图放入conterText: ' 'BoxDecoration （正如我在另一个主题上看到的那样），但没有帮助。

一个主意 ？

编辑： OMG 完全忘了把代码，这里是：

 return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Container(
            height: 40.0,
            child: _createTextFormField(loginEmailController, Icons.alternate_email, "Email Adress", false, TextInputType.emailAddress),
          ),
          Container(
            height: 40.0,
            child: _createTextFormField(loginPasswordController, Icons.lock, "Password", true, TextInputType.text),
          ),

          SizedBox(
            width: double.infinity,
            child: loginButton
          )
        ],
      ),
    );

  }

  Widget _createTextFormField(TextEditingController controller, IconData icon, String hintText, bool obscureText, TextInputType inputType){
      return TextFormField(
        keyboardType: inputType,
        controller: controller,
        obscureText: obscureText,
        /* style: TextStyle(
          fontSize: 15.0,
        ), */
        decoration: InputDecoration(
         /*  contentPadding:
              EdgeInsets.symmetric(vertical: 5.0, horizontal: 8.0), */
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
          icon: Icon(
            icon,
            color: Colors.black,
            size: 22.0,
          ),
          //hintText: hintText,
          labelText: hintText,
        ),
        validator: (value) {
          if (value.isEmpty) {
            return 'Enter some text';
          }
          return null;
        },
      );
    }

Answer 1

在您的代码中 - 您需要注释掉40每个容器的高度。

Container(
             // height: 40.0,
              child: _createTextFormField(
                  loginEmailController,
                  Icons.alternate_email,
                  "Email Adress",
                  false,
                  TextInputType.emailAddress),
            ),
            Container(
            //  height: 40.0,
              child: _createTextFormField(loginPasswordController, Icons.lock,
                  "Password", true, TextInputType.text),
            ),

然后在您的 -inTextFormField中InputDecoration，您可以根据自己的喜好更改这些值。

  contentPadding:
      EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),

Answer 2

您可以尝试在辅助文本中放置一个空格，而不是使用固定高度的容器来包装 textFormField，这样它将保持字段的高度不变，同时仅在出现错误时显示。

return TextFormField(
   // ...
   decoration: InputDecoration(
     // ...
     helperText: " ",
     helperStyle: <Your errorStyle>,
   )
        

根据Flutter 文档：

要创建一个无论是否显示错误其高度都是固定的字段，请将 TextFormField 包装在固定高度的父级（如 SizedBox）中，或将 InputDecoration.helperText 参数设置为空格。

Answer 3

上述解决方案对我不起作用，但是我找到了一个非常简单的解决方案来避免上述问题

TextFormField(
    decoration: InputDecoration(
      **errorStyle: const TextStyle(fontSize: 0.01),**
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(borderRadius),
        borderSide: const BorderSide(
          color: AppColor.neonRed,
          width: LayoutConstants.dimen_1,
          style: BorderStyle.solid,
        ),
      ),
   );

上述解决方案中的问题是我们将错误消息的大小设置为 0.01，因此它不会显示。

此外，我们可以为错误设置自定义边框。

注意：将文本大小设置为 0 不起作用，因为它不考虑文本大小并且 textFormField 小部件会缩小。