Flutter进阶—质感设计之直接输入

Input控件是质感设计的文本输入控件&＃xff0c;它在用户每次输入时都会调用onChanged回调时&＃xff0c;都会更新字段值&＃xff0c;还可以实时的对用户输入进行响应。

import &＃39;package:flutter/material.dart&＃39;;class MyApp extends StatefulWidget {&＃64;override_MyApp createState() &＃61;> new _MyApp();
}class _MyApp extends State<MyApp> {// InputValue&＃xff1a;文本输入字段的配置信息InputValue _phoneValue &＃61; const InputValue();InputValue _passwordValue &＃61; const InputValue();void _showMessage(String name) {showDialog<Null>(context: context,child: new AlertDialog(content: new Text(name),actions: [new FlatButton(onPressed: () {Navigator.pop(context);},child: new Text(&＃39;确定&＃39;))]));}&＃64;overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text(&＃39;直接输入&＃39;)),body: new Column(children: [new Input(// value&＃xff1a;文本输入字段的当前状态value: _phoneValue,// keyboardType&＃xff1a;用于编辑文本的键盘类型keyboardType: TextInputType.number,// icon&＃xff1a;在输入字段旁边显示的图标icon: new Icon(Icons.account_circle),// labelText&＃xff1a;显示在输入字段上方的文本labelText: &＃39;手机&＃39;,// hintText&＃xff1a;要在输入字段中内嵌显示的文本hintText: &＃39;请输入手机号码&＃39;,// onChanged&＃xff1a;正在编辑的文本更改时调用onChanged: (InputValue value) {setState((){_phoneValue &＃61; value;});}),new Input(value: _passwordValue,// obscureText&＃xff1a;是否隐藏正在编辑的文本obscureText: true,labelText: &＃39;密码&＃39;,onChanged: (InputValue value) {setState((){_passwordValue &＃61; value;});},// onSubmitted&＃xff1a;当用户在键盘上点击完成编辑时调用onSubmitted: (InputValue value) {if(value.text.length<6){_showMessage(&＃39;密码不少于6位&＃39;);}}),new RaisedButton(child: new Text(&＃39;提交&＃39;),onPressed: () {_showMessage(_phoneValue.text&＃43;&＃39;/&＃39;&＃43;_passwordValue.text);})]));}
}void main() {runApp(new MaterialApp(title: &＃39;Flutter Demo&＃39;,home: new MyApp()));
}