Question

我尝试使用TextFormField使用验证程序创建电子邮件文本字段。由于文本字段的高度太高，因此我将TextFormField用Container包装，并将height设置为50。现在的问题是，每当我提交预期的错误值时，验证器将弹出并推入文本字段，使其高度比我在Container中设置的高度小得多。

提交之前：

提交后：

这是我的代码：

Widget _emailForm() {
    return Form(
      key: _emailFormKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Text("Enter Your Email", style: TextStyle(fontSize: 13.0, fontWeight: FontWeight.bold),),
          Padding(padding: EdgeInsets.symmetric(vertical: 4.0),),
          Container(
            height: 50,
            child: TextFormField(
              focusNode: _emailFocusNode,
              style: TextStyle(fontSize: 11.0, fontWeight: FontWeight.w600),
              keyboardType: TextInputType.emailAddress,
              controller: _emailTextController,
              decoration: InputDecoration(
                isDense: true,
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(0.0),),
                ),
                suffixIcon: IconButton(
                  alignment: Alignment.centerRight,
                  iconSize: 16.0,
                  icon: Icon(Icons.clear),
                  onPressed: () {
                    if(_emailTextController != null) {
                        _emailTextController.clear();
                        FocusScope.of(context).requestFocus(_emailFocusNode);
                    }
                  },
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(0.0),
                  ),
                  borderSide: BorderSide(
                    color: Colors.black,
                    width: 1.0
                  )
                ),
                errorStyle: _errorTextStyle,
              ),
              validator: (val) {
                Pattern pattern = r'@';
                RegExp regex = RegExp(pattern);
                if(val.isEmpty) return "* Email address can't be empty";
                else if(!regex.hasMatch(val)) return "* Invalid email address";
                else {
                  return null;
                }
              },
            ),
          ),
          Padding(padding: EdgeInsets.symmetric(vertical: 6.0),),
          FlatButton(
            child: Text("Join".toUpperCase(), style: TextStyle(color: Colors.white, fontSize: 11),),
            onPressed: (){
              if(_emailFormKey.currentState.validate()) {
                _joinWaitingList();
              }
            },
            color: _themeColor,
          ),
        ],
      ),
    );
  }

如果该信息有帮助，则此小部件是我的ListView方法中build的一部分。有什么办法解决这个问题？谢谢！

Answer 1

问题在于TextField和TextFormField本身的大小使其包括所有内容和修饰。如果将一些错误文本添加到TextFormField的底部，则它将在其高度中包含该错误文本。当它尝试调整大小以适合您的容器时，它没有足够的空间用于输入。

您可以通过在有效和无效状态下指定容器的高度来解决此问题。您将不得不摆弄确切的无效高度，但是看起来可能像这样：

Container(
  height: _isInvalid ? 100 : 50,
  TextFormField(),
),

另一个选择是将counterText: ' '添加到您的InputDecoration中，然后将Container调整为所需的大小。这将为您提供额外的空间来容纳错误文本，而无需更改TextFormField的高度。

Container(
  height: 100,
  TextFormField(
    decoration: InputDecoration(
      counterText: ' ',
    ),
  ),
),

如果可以的话，最干净的解决方案可能是根本不使用容器。如果您可以仅使用InputDecoration和类似contentPadding之类的东西来创建所需的输入，那么这可能会使它变得更加整洁。

Answer 2

嘿，我认为如果您使用onchanged而不是验证器，它会起作用：

 onChanged: (val) {
                Pattern pattern = r'@';
                RegExp regex = RegExp(pattern);
                if(val.isEmpty) return "* Email address can't be empty";
                else if(!regex.hasMatch(val)) return "* Invalid email address";
                else {
                  return null;
                }
              },

验证器将TextFormField推到上方

2 个答案: