表单输入 Input的”hint”在flutter中相当于什么，如何显示验证错误

66 阅读 0 评论 44 点赞

我是靠谱客的博主魁梧啤酒，最近开发中收集的这篇文章主要介绍表单输入 Input的”hint”在flutter中相当于什么，**如何显示验证错误**，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

表单输入
Input的”hint”在flutter中相当于什么
在Flutter中，您可以通过向Text Widget的装饰构造函数参数添加InputDecoration对象，轻松地为输入框显示占位符文本

body: new Center(
  child: new TextField(
    decoration: new InputDecoration(hintText: "This is a hint"),
  )
)

如何显示验证错误
就像您如何使用“hint”一样，您可以将InputDecoration对象传递给Text的装饰构造函数。

但是，您不希望首先显示错误，并且通常会在用户输入一些无效数据时显示该错误。这可以通过更新状态并传递一个新的InputDecoration对象来完成

import ‘package:flutter/material.dart’;

void main() {
runApp(new SampleApp());
}

class SampleApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: ‘Sample App’,
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new SampleAppPage(),
);
}
}

class SampleAppPage extends StatefulWidget {
SampleAppPage({Key key}) : super(key: key);

@override
_SampleAppPageState createState() => new _SampleAppPageState();
}

class _SampleAppPageState extends State {
String _errorText;

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(“Sample App”),
),
body: new Center(
child: new TextField(
onSubmitted: (String text) {
setState(() {
if (!isEmail(text)) {
_errorText = ‘Error: This is not an email’;
} else {
_errorText = null;
}
});
},
decoration: new InputDecoration(hintText: “This is a hint”, errorText: _getErrorText()),
),
),
);
}

_getErrorText() {
return _errorText;
}

bool isEmail(String em) {
String emailRegexp =
r’^(([<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$’;

RegExp regExp = new RegExp(p);

return regExp.hasMatch(em);

}
}

项目源码github

您还可以看看下面的博客文章，回顾以前和继续学习，包含我在学习开发中遇到的难题等等

如对您有帮助，欢迎starts 谢谢。下面是我自己写的demo 可以看看一块学习：

Flutter入门，学习历程，进入开发，在安卓手机运行起来
Visual Studio code工具开发flutte总结
Flutter 跨平台开发为什么选择Flutter
跨平台开发为什么选择Flutter
Android 开发者 for Flutter （1）Flutter和Android中的View对比及如何更新widget
Android 开发者 for Flutter （2）如何布局？ XML layout 文件跑哪去了？及布局中添加或删除组件
Android 开发者 for Flutter （3） flutter中动画是如何实现的及如何使用Canvas draw/paint
Flutter轮播图编写（两种方式）CarouselSlider和PageView（自动轮播，也可以手动左右拖拽）
flutter 中tabbar切换上下均可，banner轮播图，listview刷新添加更多，listview嵌套gridview
Flutter 项目编写第三方插件库文件引入，本地图片 json数据引入解析
flutter run 运行项目所遇到的问题总结(Scaffold加padding及 flutter/material.dart’;爆红问题解决；listview嵌套gridview滑动问题）
Flutter 中如何构建自定义 Widgets
安卓Intent在Flutter中等价于什么？及数据传输和startActivityForResult 在Flutter中等价于什么
异步UI runOnUiThread 在Flutter中等价于什么
AsyncTask和IntentService在Flutter中等价于什么
OkHttp在Flutter中等价于什么

感谢Flutter中文网