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

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

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

Flutter进阶—质感设计之直接输入相关推荐

Flutter进阶—质感设计之模态底部面板
模态底部面板是菜单或对话框的替代方案,可防止用户与其他控件进行互动,可以使用showModalBottomSheet函数创建和显示模态底部面板. import 'package:flutter/mat ...
Flutter进阶—质感设计之持久底部面板
持久性底部面板可以用于补充应用主要内容的信息,即使用户与应用程序的其他控件进行互动,也仍然可以看到持久的底部面板.可以使用Scaffold.showBottomSheet函数创建和显示持久性底部面板. ...
Flutter进阶—质感设计之卡片
Card控件是质感设计中的卡片控件,作为详细信息的入口.卡片有圆角和阴影,卡片是用于表示一些相关信息的面板,例如相册,地理位置,餐食,联系细节等. import 'package:flutter/ma ...
Flutter进阶—质感设计之标签栏
在质感设计的控件中,有一个显示水平的一行选项卡,通常作为AppBar控件的一部分创建,并与TabBarView控件结合使用. import 'package:flutter/material.dart ...
Flutter进阶—质感设计之进度条
LinearProgressIndicator控件是质感设计中的线性进度指示器. import 'package:flutter/material.dart'; class ActionViewEco ...
Flutter进阶—质感设计之表单输入
FormField控件是单一表单字段,这个控件维护表单字段的当前状态,以便更新和验证错误能在UI中可见.TextField控件就是在FormField中包装了一个Input控件(后面的文章讲解),Fo ...
Flutter进阶—质感设计之列表项
创建achievement_view_list_item.dart文件,具体的实现每一个列表项. import 'package:flutter/material.dart'; // 创建类,成就目标 ...
Flutter进阶—质感设计之弹出菜单
PopupMenuButton控件即弹出菜单控件,点击控件会出现菜单. import 'package:flutter/material.dart'; class MenusDemo extends ...
Flutter基础—质感设计
Material Design,中文名:质感设计,是由Google推出的全新设计语言,旨在为手机.平板电脑.台式机和其他平台提供更一致.更广泛的外观和感觉.从2014年开始,Android到衍生的An ...

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

Flutter进阶—质感设计之直接输入相关推荐

最新文章

热门文章