Question

显示错误消息时，它会减小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;
        },
      );
    }

Answer 1

问题在于我们无法看到您的代码，因此为您提供帮助可能很困难，但是我将从头开始做所有事情。您可以先在一个dart文件中创建身份验证类

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
     }
   }
}

我希望它能起作用：）

Answer 2

在您的代码中-您需要注释掉赋予每个容器的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的-InputDecoration中，您可以根据自己的喜好更改这些值。

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

Answer 3

内容填充的问题是，您不能根据UI的要求来减小字段的大小，但要强调减小，但是第二个答案如何帮助我解决了我的垂直问题，因此，我要分享一下

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);
                          },
                        ),
                      );
                    }),

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

3 个答案: