【发布时间】：2020-04-10 01:30:42
【问题描述】：
【问题讨论】：
标签： android iphone flutter mobile mobile-development
【发布时间】：2020-04-10 01:30:42
【问题描述】：
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 的第一个选项。不太确定谷歌是否使用了自定义小部件。
<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_width="match_parent"
android:layout_height="wrap_content"
style="@style/TextInputLayoutStyle"
app:errorEnabled="true"
app:errorIconDrawable="@null"
>
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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 呢？