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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wdx_1136346879/article/details/89043058

表单输入
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中文网

猜你喜欢

转载自blog.csdn.net/wdx_1136346879/article/details/89043058