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

概述Input控件是质感设计的文本输入控件，它在用户每次输入时都会调用onChanged回调时，都会更新字段值，还可以实时的对用户输入进行响应。 import 'package:flutter/material.dart';class MyApp extends StatefulWidget { @override _MyApp createState() => new _MyApp();

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('确定')          )        ]      )    );  }  @overrIDe  Widget 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进阶—质感设计之直接输入所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。