【Flutter】入门11-表单

一.输入框

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gecer')),
      body: Theme(
         //激活后的边框颜色为主题色可以通过局部覆盖主题色来改变边框颜色
        data: ThemeData(primaryColor: Colors.black54),
        child: Container(
          padding: EdgeInsets.all(16),
          alignment: Alignment(0, 0),
          child: TextField(
            //监听修改输入框的情况
            onChanged: (value){
              //修改之后的值
              debugPrint(value);
            },
            //监听提交情况
            onSubmitted: (value){
              //提交的值
              debugPrint(value);
            },
            //定制样式
            decoration:InputDecoration(
              icon:Icon(Icons.favorite,color:Colors.red),//图标
              labelText: '2020',//标题
              labelStyle: TextStyle(color: Colors.redAccent),
              //激活后的默认文字
              hintText: '新年愿望',
              //无边框
              // border: InputBorder.none
              //全边框
              // border: OutlineInputBorder()
              //背景颜色
              // filled: true,
              // fillColor:Colors.red[50]
            ) ,
          ),
        ),
      ),
    );
  }
}

控制器

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  AnimationController _controller;
 final textEditingController = TextEditingController();
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
    //文本初始值
    textEditingController.text='hello';
    textEditingController.addListener(
      (){
        debugPrint('listen ${textEditingController.text}' );
      }
    );
  }

  @override
  void dispose() {
    super.dispose();
    textEditingController.dispose();
    _controller.dispose();
  }

 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Gecer')),
      body: Theme(
        //激活后的边框颜色为主题色可以通过局部覆盖主题色来改变边框颜色
        data: ThemeData(primaryColor: Colors.black54),
        child: Container(
          padding: EdgeInsets.all(16),
          alignment: Alignment(0, 0),
          child: TextField(
            //控制器
            controller: textEditingController,
            //添加控制器需注释掉此事件
            // //监听修改输入框的情况
            // onChanged: (value){
            //   //修改之后的值
            //   debugPrint(value);
            // },
            //监听提交情况
            onSubmitted: (value) {
              //提交的值
              debugPrint(value);
            },
            //定制样式
            decoration: InputDecoration(
              icon: Icon(Icons.favorite, color: Colors.red), //图标
              labelText: '2020', //标题
              labelStyle: TextStyle(color: Colors.redAccent),
              //激活后的默认文字
              hintText: '新年愿望',
              //无边框
              // border: InputBorder.none
              //全边框
              // border: OutlineInputBorder()
              //背景颜色
              // filled: true,
              // fillColor:Colors.red[50]
            ),
          ),
        ),
      ),
    );
  }
}

二.表单

获取表单数据

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  //1.定义一个form表单的key
  final formKey = GlobalKey<FormState>();
  //3.定义存储用户名密码的字段
  String userName, password;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: Form(
          key: formKey, //2.设置key
          child: Container(
              padding: EdgeInsets.all(16),
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    TextFormField(
                      decoration: InputDecoration(
                        labelText: 'username', //标题
                      ),
                      //4.保存值
                      onSaved: (value) {
                        userName = value;
                      },
                    ),
                    TextFormField(
                      //不显示输入内容，显示小圆点
                      obscureText: true,
                      decoration: InputDecoration(
                        labelText: 'password', //标题
                      ),
                      //4.保存值
                      onSaved: (value) {
                        password = value;
                      },
                    ),
                    SizedBox(
                      height: 28,
                    ),
                    Container(
                        width: double.infinity,
                        child: RaisedButton(
                          color: Theme.of(context).primaryColor,
                          onPressed: () {
                            //5.触发保存事件
                            formKey.currentState.save(); 
                            debugPrint('userName $userName password $password');
                          },
                          child: Text(
                            "login",
                            style: TextStyle(color: Colors.white),
                          ),
                        ))
                  ])),
        ));
  }
}

验证表单数据

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  final formKey = GlobalKey<FormState>();
  String userName, password;
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: Form(
          key: formKey, 
          child: Container(
              padding: EdgeInsets.all(16),
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    TextFormField(
                      decoration: InputDecoration(
                        labelText: 'username', //标题
                      ),
                      onSaved: (value) {
                        userName = value;
                      },
                      //1.指定验证方法
                      validator: (value){
                        if(value.isEmpty){
                          //1.1如果为空显示错误信息
                          return '用户名不能为空';
                        }
                        //1.2如果没有问题返回null即可
                        return null;
                      },
                    ),
                    TextFormField(
                      //不显示输入内容，显示小圆点
                      obscureText: true,
                      decoration: InputDecoration(
                        labelText: 'password', //标题
                      ),
                      onSaved: (value) {
                        password = value;
                      },
                    ),
                    SizedBox(
                      height: 28,
                    ),
                    Container(
                        width: double.infinity,
                        child: RaisedButton(
                          color: Theme.of(context).primaryColor,
                          onPressed: () {
                            formKey.currentState.save(); 
                            //2.触发验证
                            formKey.currentState.validate();
                            debugPrint('userName $userName password $password');
                          },
                          child: Text(
                            "login",
                            style: TextStyle(color: Colors.white),
                          ),
                        ))
                  ])),
        ));
  }
}

自动验证

当TextFormField的autovalidate属性设为true时即可不用通过按钮触发验证并且在输入框值改变后即可进行验证。