我在flutter应用程序中为文本字段使用了TextFormFied。我只想删除flutter验证器错误消息中的左填充。我尝试了contentPadding,但它也删除了输入文本填充。但我只想删 debugging 误消息填充。
contentPadding
我怎样才能只去掉这个填充物?有人能帮我吗?
umuewwlo1#
下面的代码将创建一个TextFormField。如你所见,contentPadding负责labelText和errorText的填充,如果你将contentPadding修改为EdgeInsets.symmetric(horizontal: 0.0, vertical: 16.0,),那么errorText就会出现在你想要的位置。
TextFormField
labelText
errorText
EdgeInsets.symmetric(horizontal: 0.0, vertical: 16.0,)
Padding( padding: const EdgeInsets.all(16.0), child: TextFormField( controller: TextInputController(), decoration: InputDecoration( labelText: 'Input anything', errorText: 'hey there its an error', contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0,), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: const BorderSide(color: Colors.indigo, width: 1.2), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: const BorderSide(color: Colors.indigo, width: 1.2), ), errorBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: const BorderSide(color: Colors.red, width: 1.2), ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: const BorderSide(color: Colors.red, width: 1.2), ), ), validator: (value) { return ""; }, ), ),
另一种方法是将TextFormFields Package 到Column中,并在底部添加Text Widget。从InputDecoration上卸下errorText。这里您需要通过自己的逻辑来管理Text的显示和隐藏操作。
TextFormFields
Column
Text
InputDecoration
Padding( padding: const EdgeInsets.all(16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ TextFormField( controller: inputController, decoration: InputDecoration( labelText: 'Input anything', contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0,), enabledBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: const BorderSide(color: Colors.indigo, width: 1.2), ), focusedBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: const BorderSide(color: Colors.indigo, width: 1.2), ), errorBorder: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: const BorderSide(color: Colors.red, width: 1.2), ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(8.0), borderSide: const BorderSide(color: Colors.red, width: 1.2), ), ), validator: (value) { return ""; }, ), const SizedBox( height: 8, ), Text('hey there its an error',style: Get.textTheme.headline6?.copyWith(color: Colors.red,),), ], ),
tyky79it2#
还有另一种方法来实现这个UI -你必须使用一个Text小部件来表示你的错误消息。并且你必须为TextFormField验证传递null。请检查下面的代码。
//Variable declaration TextEditingController emailController = TextEditingController(); final GlobalKey<FormState> formKey = GlobalKey<FormState>(); String errorString = ""; //Widget Column( children: [ Form( key: formKey, child: TextFormField( controller: emailController, ... ... ... validator: (value) { if (value!.isEmpty) { errorString = "This field is required"; } else { errorString = ""; } return null; }, ), ), Align(alignment: Alignment.centerLeft, child: Text(errorString)) ], ),
然后,您必须根据需要添加填充和空格小部件。结果:x1c 0d1x
2条答案
按热度按时间umuewwlo1#
下面的代码将创建一个
TextFormField
。如你所见,
contentPadding
负责labelText
和errorText
的填充,如果你将contentPadding
修改为EdgeInsets.symmetric(horizontal: 0.0, vertical: 16.0,)
,那么errorText
就会出现在你想要的位置。另一种方法是将
TextFormFields
Package 到Column
中,并在底部添加Text
Widget。从
InputDecoration
上卸下errorText
。这里您需要通过自己的逻辑来管理
Text
的显示和隐藏操作。tyky79it2#
还有另一种方法来实现这个UI -你必须使用一个
Text
小部件来表示你的错误消息。并且你必须为TextFormField
验证传递null。请检查下面的代码。然后,您必须根据需要添加填充和空格小部件。
结果:x1c 0d1x