flutter - 验证器将 TextFormField 推送到上面

Question

我尝试使用 TextFormField 创建带有验证器的电子邮件文本字段.由于文本字段的高度对我来说太大了，我用 Container 包装了 TextFormField 并将 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,
          ),
        ],
      ),
    );
  }

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

Answer 1

问题是 TextField 和 TextFormField 调整自己的大小以包含它们的所有内容和装饰。如果您将一些错误文本添加到 TextFormField 的底部，那么它会将其包含在其高度中。当它尝试调整自身大小以适应您的容器时，它没有足够的空间用于输入。

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

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

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

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

如果可能的话，最干净的解决方案可能是根本不使用容器。如果您可以仅通过使用 InputDecoration 和 contentPadding 等创建您想要的输入，它可能会使它变得更清晰。