如何确定 Flutter TextFormField 的高度？

Question

我在 Container 中有 TextFormField，我想在 Container 底部对齐 错误消息 ，但 错误消息 与 TextFormField 有点距离。 错误消息应该会出现在Container中。

如何确定 TextFormField 的高度？

Form(
     key: _formkey1,
     child:
     Column(children: [
     Stack(
     clipBehavior: Clip.none,
       children:[ Container(
         width: 990.w,
         height: 203.w,
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(30.0.w),
           border: Border.all(color: Colors.black12),
         ),
         child: Padding(
           padding: EdgeInsets.fromLTRB(46.w, 38.w, 0, 35.w),
             child:
                 Text(
                   'Current Password',
                   style: FONT_CONST.MEDIUM
                       .copyWith(fontSize: 34.w,
                       color: COLOR_CONST.color_9e9e9e),
                 ),),),
         Positioned(
             left: 46.w,
             top: 105.w,
             child:
                 Container(
                   width: 881.w,
                   height: 187.w,
                     child: TextFormField(
                       obscureText: true,
                       validator: (value) {
                         if (value!.isEmpty) {
                           return "empty";
                         }
                         if (value!=_myInfoProvider.my.password){
                           return "Please enter your current password";
                         }
                         else {
                           return null;
                         }
                       },
                       style: FONT_CONST.MEDIUM.copyWith(
                           fontSize: 46.w),
                       decoration: InputDecoration.collapsed(
                           hintText: 'Enter Current Password',
                           hintStyle: FONT_CONST.MEDIUM
                               .copyWith(fontSize: 46.w,
                               color: COLOR_CONST.color_c8cacb)),
                       controller: _textEditingController1,
                     ),
                   ),)
                 ]),

我使用 Stack 小部件是因为 Container 中的 Form 小部件无法返回 错误消息 容器。

Answer 1

如果我理解您的问题，您希望在不同的位置显示错误消息。

根据您的代码，您可以使用 setState 在另一个小部件中显示错误消息。

只需为您的错误消息添加一个变量：

Text errorMsg;

并在验证器中调用 setState ：

                   child: TextFormField(
                       obscureText: true,
                       validator: (value) {
                         if (value!.isEmpty) {
                            setState(() {
                            errorMsg = Text('empty');
                          });
                           return "";
                         }
                         if (value!=_myInfoProvider.my.password){
                            setState(() {
                            errorMsg = Text('Please enter your current password');
                          });
                           return "";
                         }
                         else {
                            setState(() {
                            errorMsg = null;
                          });
                           return null;
                         }
                       },
                       style: FONT_CONST.MEDIUM.copyWith(
                           fontSize: 46.w),

最后，将错误信息添加到 Stack 中的新 Positioned Widget 中：

                ///your Poisitioned Widget
                Positioned(....),
                /// Add this and change the values to the position that you demand
                if(errorMsg != null)
                Positioned(
                  left: 46.w,
                  top: 120.w,
                  child: errorMsg,
                ),