email_validator 挤压 tefxformfield 颤动

Posted 2023-02-23

【中文标题】email_validator 挤压 tefxformfield 颤动

【英文标题】：email_validator squishing tefxformfield flutter

【发布时间】：2021-06-12 23:22:28

【问题描述】：

我正在构建一个 Flutter Web 应用程序，其中有一个文本表单字段，用于验证输入电子邮件。我为此使用 email_validator，但是当地址无效时，它会像这样“挤压”文本字段： 这是我的代码：

Container(
                      width: MediaQuery.of(context).size.width / 5,
                      height: MediaQuery.of(context).size.height / 125 * 7,
                      child: TextFormField(
                          expands: true,
                          minLines: null,
                          maxLines: null,
                          key: _teftFormFieldKey,
                          style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'FuturaFura',
                              fontSize: 20),
                          cursorColor: Colors.grey,
                          textAlign: TextAlign.center,
                          textAlignVertical: TextAlignVertical.center,
                          controller: emailController,
                          validator: (value) =>
                              EmailValidator.validate(value)
                                  ? null
                                  : "Please enter a valid email",
                          decoration: InputDecoration(
                              contentPadding: EdgeInsets.symmetric(
                                  vertical: 10, horizontal: 10),
                              hintText: 'Your email',
                              hintStyle: TextStyle(
                                  color: Colors.grey,
                                  fontFamily: 'FuturaFura'),
                              enabledBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(100)),
                                  borderSide: BorderSide(
                                      color: textFormFieldOutline)),
                              focusedBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(100)),
                                  borderSide: BorderSide(
                                      color: textFormFieldOutline,
                                      width: 2.5)),
                              errorBorder: OutlineInputBorder(
                                  borderRadius: BorderRadius.all(
                                      Radius.circular(100)),
                                  borderSide: BorderSide(
                                      color: textFormFieldOutline)),
                              focusedErrorBorder: OutlineInputBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(100)),
                                borderSide: BorderSide(
                                    color: Color.fromRGBO(184, 44, 47, 1)),
                              ))),
                    ),

我还有一个按钮，它需要符合： 所以如果我添加一个 helperText，它就不起作用， 我真的需要帮助。谢谢。

【参考方案1】：

尝试给helperText 一个空格，并从一开始就根据您的需要调整边框。这将防止 textFormField 在错误时改变其高度，并可能有助于摆脱这种行为：

    TextFormField​(
  decoration​:​ ​const​ ​InputDecoration​(
    helperText​:​ ​' '​,
  ),
  validator​:​ myValidator,
),

【讨论】：

谢谢，这行得通，但是，我旁边有一个按钮（我在问题中添加了图像），他们需要排队。你对此有什么想法吗？再次感谢:)

你现在有一致的边框位置，所以我认为简单的方法是将你的按钮包装在Transform.translate 中并给它提供类似Offset(0, -10) 的偏移属性（根据需要调整y轴)

非常感谢！