如何在TextFormField下方的errorText中添加图标？
Posted
技术标签:
【中文标题】如何在TextFormField下方的errorText中添加图标？【英文标题】：How to add icon to errorText below TextFormField? 【发布时间】：2020-04-10 01:30:42 【问题描述】：如何使用 Flutter 在 TextFormField 下面的 errorText 中添加图标？
【问题讨论】：
【参考方案1】：Prot_CN，我认为您帖子中的屏幕截图使用了自定义错误消息以及 Icon 和 Text 小部件的组合，因为我不确定内置功能是否允许这样做（我可能是错的） .如果您不想设计自定义错误消息，可以使用 unicode 26A0 在错误消息中显示警告符号，如下所示，
这里是完整的 unicode 代码，
class MyApp extends StatefulWidget
@override
MyAppState createState() => MyAppState();
class MyAppState extends State<MyApp>
final _formKey = GlobalKey<FormState>();
final textController = TextEditingController();
@override
Widget build(BuildContext context)
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: Form(
key: _formKey,
child: Column(children: <Widget>[
Container(
padding: const EdgeInsets.all(20.0),
child: TextFormField(
controller: textController,
decoration: new InputDecoration(
errorStyle: TextStyle(fontSize: 18.0),
labelText: 'Hint text',
filled: true,
fillColor: Colors.white,
enabledBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(
color: Colors.grey,
),
),
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(
color: Colors.blue,
)),
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: BorderSide(
color: Colors.black, width: 1.0))),
style: new TextStyle(color: Colors.black),
validator: (value)
if (value.isEmpty)
return '\u26A0 Field is empty.';
return null;
,
)),
Center(
child: Padding(
padding: EdgeInsets.only(top: 20.0),
child: RaisedButton(
onPressed: ()
// Validate returns true if the form is valid, otherwise false.
if (_formKey.currentState.validate())
// If the form is valid, display a snackbar. In the real world,
// you'd often call a server or save the information in a database.
Scaffold.of(context).showSnackBar(
SnackBar(content: Text('Processing Data')));
,
child: Text('Submit'),
),
))
]))));
另外，这是一个与您的屏幕截图类似的自定义错误消息示例，
class MyApp extends StatefulWidget
@override
MyAppState createState() => MyAppState();
class MyAppState extends State<MyApp>
final _formKey = GlobalKey<FormState>();
final textController = TextEditingController();
String errorText = '';
IconData errorIcon;
double errorContainerHeight = 0.0;
@override
Widget build(BuildContext context)
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: Column(children: <Widget>[
Container(
padding: const EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0),
child: TextFormField(
controller: textController,
decoration: new InputDecoration(
suffixIcon: Icon(Icons.arrow_drop_down, size: 35.0,),
labelStyle: TextStyle(fontSize: 18.0),
labelText: 'Hint text',
filled: true,
fillColor: Colors.white,
enabledBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(5.0),
borderSide: new BorderSide(
color: errorText.isEmpty ? Colors.grey : Colors.red[700],
),
),
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(5.0),
borderSide: new BorderSide(
color: errorText.isEmpty ? Colors.blue : Colors.red[700],
)),
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(5.0),
borderSide: BorderSide(
color: Colors.black, width: 1.0))),
style: new TextStyle(color: Colors.black),
)),
Container(
padding: EdgeInsets.only(left: 20.0, top: 5.0),
height: errorContainerHeight,
child: Row(
children: <Widget>[
Icon(errorIcon, size: 20.0, color: Colors.red[700]),
Padding(padding: EdgeInsets.only(left: 5.0),child: Text(errorText, style: TextStyle(fontSize: 16.0, color: Colors.red[700])))
],
)),
Center(
child: Padding(
padding: EdgeInsets.only(top: 20.0),
child: RaisedButton(
onPressed: ()
// Validate returns true if the form is valid, otherwise false.
if (textController.text.isEmpty)
setState(()
errorContainerHeight = 35.0;
errorIcon = FontAwesomeIcons.exclamationCircle;
errorText = 'Field is empty.';
);
else
setState(()
errorContainerHeight = 0.0;
errorIcon = null;
errorText = '';
);
,
child: Text('Submit'),
),
))
])));
希望这会有所帮助。
【讨论】：
谢谢伙计，但你的方式是超级定制的东西，不会动画等。你认为谷歌还使用了自定义小部件类型的文本字段 + 容器吗？ 不客气。是的，如果您真的不想使用自定义消息，您可以尝试使用 unicode 的第一个选项。不太确定谷歌是否使用了自定义小部件。【参考方案2】：<style name="TextInputLayoutStyle"
parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">@color/black</item>
<item name="boxStrokeWidth">2dp</item>
</style>
布局
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/etUsernameLayout"
android:layout_
android:layout_
style="@style/TextInputLayoutStyle"
app:errorEnabled="true"
app:errorIconDrawable="@null"
>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/username"
android:layout_
android:layout_
android:hint="@string/username"
android:textSize="@dimen/normalTextSize"
android:inputType="textPersonName"
android:maxLength="100" />
</com.google.android.material.textfield.TextInputLayout>
Java
usernameTIL.setError("ERROR")
【讨论】：
谢谢，但是 Flutter 呢？以上是关于如何在TextFormField下方的errorText中添加图标？的主要内容，如果未能解决你的问题，请参考以下文章
Flutter：TextFormField Validator 打破了字段的样式
在 Web 上，如何控制自动显示在焦点 TextFormField 上的可见性图标，该 TextFormField 的 obscureText 属性设置为 true？