Flutter 入门指北之输入处理(登录界面实战)

码个蛋(codeegg)第 589 次推文

前面提到基础部件的时候，忘了提输入内容处理部件，这里补上，然后顺带撸个实际的界面吧

TextField

const TextField({ Key key, this.controller, // 定义一个 `TextEditingController` 实例，用来获取输入框内容等操作 this.focusNode, // 定义一个 `FocusNode` 实例，判断当前输入框是否获取到焦点等操作 this.decoration = const InputDecoration(), // 输入框样式，包括提醒字样，hint 等等 TextInputType keyboardType, // 输入文本类型，例如 数字，email 等等 this.textInputAction, // 键盘确认按钮的事件类型 this.textCapitalization = TextCapitalization.none, this.style, // 文字样式 this.textAlign = TextAlign.start, // 对齐方式 this.textDirection, // 文字方向 this.autofocus = false, // 是否自动获取焦点 this.obscureText = false, // 文字是否隐藏，多用于密码 this.autocorrect = true, this.maxLines = 1, // this.maxLength, // 最大长度 this.maxLengthEnforced = true, // 设置最大长度后，输入内容超出后是否强制不给输入 this.onChanged, // 输入内容发生变化时候的回调 this.onEditingComplete, // 输入完毕的回调 this.onSubmitted, // 提交内容的回调 this.inputFormatters, // this.enabled, // 是否可输入，false 不可输入 this.cursorWidth = 2.0, // 游标宽度 this.cursorRadius, // 游标半径 this.cursorColor, // 游标颜色 this.keyboardAppearance, // 该属性只在 iOS 设备有效 this.scrollPadding = const EdgeInsets.all(20.0), this.enableInteractiveSelection, this.onTap, // 点击事件 })

那么，简单的来个输入框示例吧，然后通过 Text 展示结果

class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState();}
class _HomePageState extends State<HomePage> { // 可以传入初始值 TextEditingController _editController = TextEditingController(); FocusNode _editNode = FocusNode(); // 保存按钮点击后的输入内容值 String _content = ''; // 监听输入内容变化的内容值 String _spyContent = '';
@override void initState() { super.initState(); // 当输入框获取到焦点或者失去焦点的时候回调用 _editNode.addListener(() { print('edit has focus? => ${_editNode.hasFocus}'); }); }
@override void dispose() { // 记得销毁，防止内存溢出 _editController.dispose(); _editNode.dispose(); super.dispose(); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Input Content'), ), body: Container( padding: const EdgeInsets.symmetric(horizontal: 12.0), child: Column( children: <Widget>[ TextField( controller: _editController, focusNode: _editNode, decoration: InputDecoration( icon: Icon(Icons.phone_iphone, color: Theme.of(context).primaryColor), labelText: '请输入手机号', helperText: '手机号', hintText: '手机号...在这儿输入呢'), keyboardType: TextInputType.number, // 输入类型为数字类型 textInputAction: TextInputAction.done, style: TextStyle(color: Colors.redAccent, fontSize: 18.0), textDirection: TextDirection.ltr, maxLength: 11, // 最大长度为 11 maxLengthEnforced: true, // 超过长度的不显示 onChanged: (v) { // 输入的内容发生改变会调用 setState(() => _spyContent = v); }, onSubmitted: (s) { // 点击确定按钮时候会调用 setState(() => _spyContent = _editController.value.text); }, ), Padding( padding: const EdgeInsets.symmetric(vertical: 8.0), child: RaisedButton( onPressed: () { // 获取输入的内容 setState(() => _content = _editController.value.text); // 清理输入内容 _editController.clear(); setState(() => _spyContent = ''); }, child: Text('获取输入内容'))), // 展示输入的内容，点击按钮会显示 Text(_content.isNotEmpty ? '获取到输入内容: $_content' : '还未获取到任何内容...'), Padding( padding: const EdgeInsets.symmetric(vertical: 8.0), // 监听输入内容的变化，会跟随输入的内容进行改变 child: Text('我是文字内容监听：$_spyContent'), ) ], )), ); }}

这边需要提下的是 setState 方法，该方法只有 StatefulWidget 才有，当需要修改某个值的内容的时候，通过该方法进行修改，最后的效果图如下，当输入框文字发生变化的时候，监听的 Text 内容会随之改变，获取内容的 Text 当点击按钮了才发生变化

该部分代码查看 text_field_main.dart 文件

那么如果有个需求，在点击按钮的时候需要对输入的内容的合理性进行检测，当然可以通过 TextEditingController 的结果进行检测，但是还有个更加方便的方法，可以直接使用部件 TextFormField 来实现，不过需要我们在外层加一个 Form 部件，接下来，就要准备通过 TextFormField 来撸一个登录界面，但是这之前，前面有个坑需要先解决下

导入自定义的图标

在这之前，涉及到 Icon 部件，都是使用的系统自带的图标，那么如何导入第三方自定义图标呢，马上为你揭晓答案，首先我们需要打开「阿里妈妈」也就是 iconfont，不知道的小伙伴通过链接打开，然后需要注册个账户，也可以直接通过 Github 等三方登录，然后就可以搜索我们需要的图标了，接下来需要撸一个登录，那我们就找一个 用户  和 密码 的图标吧，选择喜欢的图标，然后鼠标放到图标会出现三个按钮，直接点击 购物车 那个按钮，然后就可以通过顶部的 购物车 按钮查看添加的图标，点击下载代码，把资源文件下载到本地。

解压后，需要用到的文件有两个，别的可以忽略

1. demo_index.html 这边用来查看图标的 unicode

2. iconfont.ttf 这边就是图标资源文件了

回到项目，创建一个文件夹 fonts ，和 images 同级，将 iconfont.ttf 文件放到该文件夹下，然后打开 pubspec.ymal 文件，注册下导入的资源，可以自己命名 iconfont.ttf 文件名，便于自己发现就行，例如我命名为 third_part_icon.ttf，在注册图片下面继续添加

fonts: - family: ThirdPartIcons fonts:    - asset: fonts/third_part_icon.ttf

注册完了记得点击 Package get，否则会找不到资源。接着新建个 third_icons.dart文件

import 'package:flutter/material.dart';
class ThirdIcons { // codePoint 值通过打开 `demo_index.html` 获取 // 会在相应 icon 下带有相应的 code，把 `&#` 替换成 `0`，然后去掉最后的 `;` 即可 // 例如  对应我们需要的图标就是 0xe672 static const IconData username = ThirdIconData(0xe672); static const IconData password = ThirdIconData(0xe62f);}
class ThirdIconData extends IconData { // fontFamily 就是我们在 `pubspec.yaml` 中注册的 family 值 const ThirdIconData(int codePoint) : super(codePoint, fontFamily: 'ThirdPartIcons');}

接下来就可以通过该类导入需要的第三方图标了。

导入第三方插件

其实 Flutter 中缺少很多功能，需要通过导入第三方插件来实现功能，插件就是 Flutter 和原生交互的桥梁，也就是说，要写 Flutter 的插件，需要写 Android 和 iOS 两端代码才可，否则只有在其中一个端能够实现功能。好在有很多现成的插件已经开源，可以通过 FlutterPackage 搜索到，例如等会我们会需要用到 FlutterToast 这个插件，用来做提醒用，在 FlutterPackage 中搜索到插件后，打开项目中的 pubspec.ymal 文件，在 dependencies 类目下将 fluttertoast 插件引入，如图：

然后点击 Package get 让其导入即可，别的插件也是这样导入。做好准备工作，我们就可以撸一个登录界面了~

撸一个登录界面

在开撸之前，我们先看下最终的效果图吧，虽然是比较常用的界面

因为两个界面比较相似，所以这边只贴外层的代码和登录的代码，具体的代码，可以查看源码，已经推到 Github

void main() { runApp(LoginApp());
if (Platform.isAndroid) { var style = SystemUiOverlayStyle(statusBarColor: Colors.transparent); SystemChrome.setSystemUIOverlayStyle(style); }}
/// 外层界面，包裹登录界面和注册界面，使用的都是前面讲过的，忘记可以查看之前的章节class LoginApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Login Demo', debugShowCheckedModeBanner: false, theme: ThemeData(primarySwatch: Colors.lightBlue), home: LoginHomePage(), ); }}
class LoginHomePage extends StatefulWidget { @override _LoginHomePageState createState() => _LoginHomePageState();}
class _LoginHomePageState extends State<LoginHomePage> with SingleTickerProviderStateMixin { TabController _tabController; List<String> _pageIndicators = ['登录', '注册']; List<Widget> _pages = []; int _position = 0;
@override void initState() { super.initState(); _tabController = TabController(length: _pageIndicators.length, vsync: this); // 将登录界面和注册界面添加到列表，用于放到 IndexStack 的 children 属性 _pages..add(LoginPage())..add(RegisterPage());
_tabController.addListener(() { // 当 tab 切换的时候，联动 IndexStack 的 child 页面也进行修改，通过 setState 来修改值 if (_tabController.indexIsChanging) setState(() => _position = _tabController.index); }); }
@override void dispose() { super.dispose(); }
@override Widget build(BuildContext context) { // 先忽略... return Theme( data: ThemeData(primarySwatch: Colors.pink, iconTheme: IconThemeData(color: Colors.pink)), child: Scaffold( body: Container( padding: const EdgeInsets.all(20.0), alignment: Alignment.center, decoration: BoxDecoration(image: DecorationImage(image: AssetImage('images/login_bg.png'), fit: BoxFit.cover)), // 先忽略...下面会讲，主要是解决软键盘弹出的时候，界面内容会溢出的问题 child: SingleChildScrollView( child: SafeArea( child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ // 顶部页面切换指示器，代码可以参考 `app_bar_main.dart` 文件 TabBar( indicatorSize: TabBarIndicatorSize.label, controller: _tabController, indicatorWeight: 4.0, indicatorColor: Colors.white, // 返回 tab 列表 tabs: _pageIndicators .map((v) => Text(v, style: TextStyle(color: Colors.white, fontSize: 24.0))) .toList()), Padding( padding: const EdgeInsets.only(top: 30.0), child: SizedBox( // 切换界面列表 child: IndexedStack(children: _pages, index: _position), // 指定高度 height: MediaQuery.of(context).size.height / 2)) ])), ), ), )); }}
/// 登录界面class LoginPage extends StatefulWidget { @override _LoginPageState createState() => _LoginPageState();}
class _LoginPageState extends State<LoginPage> { // 用于后面判断表单内容是否有效 GlobalKey<FormState> _formKey = GlobalKey(); // 用于获取输入框的内容 TextEditingController _usernameController = TextEditingController(); TextEditingController _passwordController = TextEditingController();
@override void initState() { super.initState(); }
@override void dispose() { // 防止内存溢出，记得销毁..销毁..销毁 _usernameController.dispose(); _passwordController.dispose(); super.dispose(); }
_login() { // 取消焦点 FocusScope.of(context).requestFocus(FocusNode());
// 判断表单是否有效 if (_formKey.currentState.validate()) { // 获取输入框内容 var username = _usernameController.value.text; var password = _passwordController.value.text;
// 判断登录条件 if (username == 'kuky' && password == '123456') // 引入的三方插件方法，`Flutter` 没有自带的 `Taost` Fluttertoast.showToast(msg: '登录成功'); else Fluttertoast.showToast(msg: '登录失败'); } }
@override Widget build(BuildContext context) { return Form( // 将 key 设置给表单，用于判断表单是否有效 key: _formKey, child: Column( children: <Widget>[ Padding( padding: const EdgeInsets.symmetric(vertical: 4.0), // 表单输入框，参数同 TextField 基本类似 child: TextFormField( controller: _usernameController, style: TextStyle(color: Colors.white, fontSize: 16.0), decoration: InputDecoration( icon: Icon(ThirdIcons.username, size: 24.0, color: Colors.white), labelText: '请输入用户名', labelStyle: TextStyle(color: Colors.white), helperStyle: TextStyle(color: Colors.white)), // 有效条件(为空不通过，返回提示语，通过返回 null) validator: (value) => value.trim().isEmpty ? '用户名不能为空' : null, ), ), Padding( padding: const EdgeInsets.symmetric(vertical: 4.0), child: TextFormField( obscureText: true, controller: _passwordController, style: TextStyle(color: Colors.white, fontSize: 16.0), decoration: InputDecoration( icon: Icon(ThirdIcons.password, size: 24.0, color: Colors.white), labelText: '请输入密码', labelStyle: TextStyle(color: Colors.white), helperStyle: TextStyle(color: Colors.white)), validator: (value) => value.trim().length < 6 ? '密码长度不能小于6位' : null, ), ), Padding( padding: const EdgeInsets.only(top: 20.0), child: SizedBox( // 主要用于使 RaisedButton 和上层容器同宽 width: MediaQuery.of(context).size.width, child: RaisedButton( color: Colors.pink, shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4.0))), onPressed: _login, child: Text( '登录', style: TextStyle(color: Colors.white, fontSize: 20.0), )), ), ) ], )); }}

撸完界面后，可以试下登录效果，如果输入框的内容，和 TextFormField 的 validator的条件不符合，则会显示错误文字的提示

如果按照条件用户名为 kuky 密码为 123456 (条件可以根据自己进行修改)则会显示登录成功的逻辑

以上代码查看 login_home_page.dart 文件

注册界面的逻辑和登录界面的逻辑几乎一样，算是第一次实战了，望小伙伴能够好好的写一遍

代码地址:

https://github.com/kukyxs/flutter_arts_demos_app