dart 验证程序错误消息更改TextFormField的高度

mxg2im7a  于 9个月前  发布在  其他
关注(0)|答案(7)|浏览(102)

当错误消息出现时,它会减少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;
        },
      );
    }

字符串

szqfcxe2

szqfcxe21#

内容填充的问题是,你不能减少字段的大小,以用户界面的要求,强调减少,但如何以往任何时候第二个答案帮助我来与我的特殊问题的解决方案,所以我分享

StreamBuilder(
                    stream: viewModel.outEmailError,
                    builder: (context, snap) {
                      return Container(
                        width: MediaQuery.of(context).size.width*.7,
                        height: (snap.hasData)?55:35,
                        child: AccountTextFormField(
                          "E-mail",
                          textInputType: TextInputType.emailAddress,
                          focusNode: viewModel.emailFocus,
                          controller: viewModel.emailController,
                          errorText: snap.data,
                          textCapitalization: TextCapitalization.none,
                          onFieldSubmitted: (_) {
                            nextFocus(viewModel.emailFocus,
                                viewModel.passwordFocus, context);
                          },
                        ),
                      );
                    }),

字符串

rqdpfwrv

rqdpfwrv2#

以上的答案我都试过了,都没有用,经过一天的努力,我终于可以做到了。
要将自定义高度应用于TextFormField,即使在错误文本之后也不会缩小其高度,我们必须使用约束contentPaddingisDense组合

TextFormField(
  controller: controller,//use your controller
  autovalidateMode: AutovalidateMode.onUserInteraction,
  decoration: InputDecoration(
    constraints: const BoxConstraints(maxHeight: 70, minHeight: 35),
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(6)),
    contentPadding:const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
    hintText: hintText,
    isDense: true,
  ),
  validator: validator, //use your custom validator
),

字符串
我希望它能帮上忙。

f1tvaqid

f1tvaqid3#

问题说明:

由于您在Container中有一个TextFormField小部件,*固定高度为40,当您出现错误时,需要一定的区域才能显示错误信息。因此,TextFormField高度缩小,以在您的Container高度(40)限制内调整 Input字段和Error Message

解决方案:

您可以删除Container height 参数。这将把TextFormField高度 Package 为文本大小

3qpi33ja

3qpi33ja4#

在你的代码中-你需要注解掉每个容器的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),
            ),

字符串
然后在你的-TextFormField in InputDecoration中,你可以根据你的喜好改变这些值。

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

hpxqektj

hpxqektj5#

上述解决方案对我不起作用,但我已经想出了一个非常简单的解决方案,以避免上述问题

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小部件会收缩。

gcxthw6b

gcxthw6b6#

与其使用固定高度的容器来 Package textFormField,不如尝试在helper文本中放置一个空格,这样它就可以保持字段的高度不变,同时只在出现错误时显示。

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

字符串
根据Flutter Doc
若要创建一个无论是否显示错误都具有固定高度的字段,请将TextFormField Package 在固定高度的父级(如SizedBox)中,或将InputDecoration.helperText参数设置为空格。

ie3xauqp

ie3xauqp7#

问题是我们无法看到您的代码,所以帮助您可能很有挑战性,但我会从头开始做所有事情。

class AuthBloc{
   StreamController _passController = new StreamController();
   Stream get passStream => _passController.stream;
   bool isValid(String pass){
       _passController.sink.add("");
       if(pass == null || pass.length < 6){
         _passController.sink.addError("Password is too short");
         return false;
       }
       else{
         return true;
       }
    }

    void dispose(){
      _passController.close();    
     }
}

字符串
然后在另一个dart文件中插入以下代码。。

class LoginPage extends StatefulWidget{
  @override
  _LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage>{
   AuthBloc authBloc = new AuthBloc();
   @override
   void dispose(){
     authBloc.dispose();
   }
   @override
   Widget build(BuildContext context){
     return Scaffold(
       body: Container(
         padding: EdgeInsets.fromLTRB(30, 0, 30, 0),
         constraints: BoxConstraints.expand(),
         children: <Widget>[
           Padding(
            padding: const EdgeInsets.fromLTRB(0, 40, 0, 20),
            child: StreamBuilder(
                stream: authBloc.passStream,
                builder: (context, snapshot) => TextField(
                  controller: _passController,
                  style: TextStyle(fontSize: 18, color: Colors.black),
                  decoration: InputDecoration(
                      errorText: snapshot.hasError ? snapshot.error:null,
                      labelText: "Password",
                      prefixIcon: Container(
                        width: 50,
                        child: Icon(Icons.lock),
                      ),
                      border: OutlineInputBorder(
                          borderSide: BorderSide(color: Color(0xffCED802), width: 1),
                          borderRadius: BorderRadius.all(Radius.circular(6))
                      )
                  ),
                ),
            )
          ),
          Padding(
            padding: const EdgeInsets.fromLTRB(0, 30, 0, 40),
            child: SizedBox(
              width: double.infinity,
              height: 52,
              child: RaisedButton(
                onPressed: _onLoginClicked,
                child: Text(
                  "Login",
                  style: TextStyle(fontSize: 18, color: Colors.white),
                ),
                color: Color(0xff327708),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(6))
                ),
              ),
            ),
          ),
         ]
       )
     )
   }
   _onLoginClicked(){
     var isValid = authBloc.isValid(_passController.text);
     if(isValid){
       //insert your action
     }
   }
}


我希望它能起作用:)

相关问题