验证器将 TextFormField 推送到上方

Question

我尝试使用TextFormField. 由于文本字段的高度对我来说太大了，我将TextFormFieldwith包裹起来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 时，它没有足够的空间用于输入。

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

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

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

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

如果可能，最干净的解决方案可能是根本不使用 Container。如果您可以通过使用 InputDecoration 和诸如此类的东西来创建您想要的输入contentPadding，它可能会使这更清晰。