android - 如何在TextFormField下方的errorText中添加图标?
解决方案
Prot_CN,我认为您帖子中的屏幕截图使用的是自定义错误消息,其中包含Icon
和Text
小部件,因为我不确定内置功能是否允许这样做(我可能是错的)。如果您不想设计自定义错误消息,您可以使用 unicode26A0
在错误消息中显示警告符号,如下所示,
这是带有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'),
),
))
])));
}
}
希望这可以帮助。
推荐阅读
- java - 我的 android 项目出现多个错误?
- laravel - 可以自动加载或 livereload npm run dev
- python-3.x - 如何在 K 最近邻中选择正确的 k 值
- r - 如何使用 ggplot2、gridExtra 对齐和缩放不同尺寸的图?
- angular - 如何使用 Firebase 托管为已部署的 Angular Web 应用记录错误
- php - 如何通过将文本框值附加到 PHP 中的 URL 来提交表单?
- angular5 - Angular 5 无法创建简单的项目
- azure - Azure 功能无法识别云存储和队列类
- ruby-on-rails - 复选框说即使未选中,该值也始终为一?
- javascript - 在 Angular 中滚动到(单击)上的特定 div