import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "多窗口切换标题",
      home: Scaffold(
        appBar: AppBar(
          title: Text("Form表单之TextField练习"),
        ),
        body: MyFormAction(),
      ),
    );
  }
}


//初始值和获取表单数据
class MyFormAction extends StatefulWidget {
  MyFormAction({Key key}) : super(key: key);

  @override
  _MyFormActionState createState() => _MyFormActionState();
}

class _MyFormActionState extends State<MyFormAction> {
  ///给文本框赋值
  //1:申请变量
  var _username= new TextEditingController();

  ///动态widget回执完成后回自动的调用这个方法,可以在这里做初始化的一些工作
  @override
  void initState() {
    super.initState();    
    //2:TextEditingController构造方法里面有个text可选参数,所以在初始的地方调用方法赋值
    _username.text="初始值";
    print(this._username);
  }


  @override
  Widget build(BuildContext context) {
    return Container(
       child: Padding(
         padding: EdgeInsets.all(10),
         child: Column(
           children: <Widget>[
             TextField(
              decoration: InputDecoration(
                icon: Icon(Icons.people),
                hintText: "用户名"
              ),
              //3:把_username的值绑定到″个textField上
              controller: _username,
              //文本框值的改变会触发这个方法,把值放在value里,我们把值赋值到username.text里面即可
              onChanged: (value){
                _username.text=value;
              },
            ),
            SizedBox(height: 15,),
            Container(
              width: double.infinity,
              height: 50,
              child: RaisedButton(
                color: Colors.blue,
                child: Text("登陆",style: TextStyle(color: Colors.white,fontSize: 20),),
                onPressed: (){
                  //点击登陆打印username.text的值即可
                   showDialog<Null>(
                      context: context,
                      barrierDismissible: false,
                      builder: (BuildContext context) {
                          return new AlertDialog(
                              title: new Text("提示"),
                              content: new SingleChildScrollView(
                                  child: new ListBody(
                                      children: <Widget>[
                                          new Text('文本框的内容为:'),
                                          new Text(_username.text),
                                      ],
                                  ),
                              ),
                              actions: <Widget>[
                                  new FlatButton(
                                      child: new Text('确定'),
                                      onPressed: () {
                                          Navigator.of(context).pop();
                                      },
                                  ),
                              ],
                          );
                      },
                  ).then((val) {
                      print(val);
                  });

                },
                ),
            )
           ],
         )
       ),
    );
  }
}



//普通的表单演示
class MyForm extends StatelessWidget {
  const MyForm({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.all(15),
        child: ListView(
          children: <Widget>[
            //textField 默认的样子
            TextField(),
            SizedBox(
              height: 10,
            ),
            //带图标的文本框
            TextField(
              decoration: InputDecoration(
                  //默认显示的字符,输入时自动隐藏
                  hintText: "请输入你的用户名",
                  icon: Icon(Icons.people)),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              //修饰这个textField
              decoration: InputDecoration(
                //默认显示的字符,输入时自动隐藏
                hintText: "请输入您的用户名称",
                //边框的颜色
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            //LabelText的使用
            TextField(
              decoration: InputDecoration(
                //单没有获取焦点时他和hinttext一样香港,当获取单焦点时他会有动画左上角显示
                labelText: "用户名",
                //边框的颜色
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            //密码框
            TextField(
              //时间遏制为密码框
              obscureText: true,
              decoration: InputDecoration(
                //默认显示的字符,输入时自动隐藏
                hintText: "请输入你的密码",
                //边框的颜色
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            //多行文本框
            TextField(
              //设置最大多少行
              maxLines: 4,
              //最大输入字符,如果值为TextField.noMaxLength 那么只显示已输入的字符数量
              maxLength: 200,
              decoration: InputDecoration(
                //默认显示的字符,输入时自动隐藏
                hintText: "这个是多行",
                //边框的颜色
                border: OutlineInputBorder(),
              ),
            ),
          ],
        )
    );
  }
}

效果图: