flutter表单

textField输入框

在textField中可以使用onChanged方法监听输入框文本的变化，也可以用TextEditingController来监听文本变化，但是TextEditingController要注意及时销毁

class TextFieldDemo extends StatefulWidget {
  TextFieldDemoState createState() => TextFieldDemoState();
}

class TextFieldDemoState extends State {
  // TextEditingController可以监听文本的变化
  final textEditingController = TextEditingController();

  @override
  void dispose() { // 销毁textEditingController
    textEditingController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    // textEditingController可以设置输入框初始文本
    textEditingController.text = 'XXX';
    // 监听文本变化
    textEditingController.addListener(() {
      debugPrint('input: ${textEditingController.text}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: textEditingController,
//      onChanged: (value) { // 监听文本变化
//        debugPrint('input: $value');
//      },
      onSubmitted: (value) { // 提交按钮回调
        debugPrint('submit: $value');
      },
      decoration: InputDecoration(
        icon: Icon(Icons.subject),
        labelText: '姓名',
        hintText: '请输入姓名',
//        border: InputBorder.none, // 去掉边框
//        border: OutlineInputBorder() // 添加四周统一的边框
        filled: true, // 带背景颜色的文本框
      ),
    );
  }
}

Form表单

class FormDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 更改主题颜色
      body: Theme(
        // 覆盖某些特定主题的设置
        data: Theme.of(context).copyWith(primaryColor: Colors.redAccent),
        // 完全替代之前定义的主题
//        data: ThemeData(primaryColor: Colors.redAccent),
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              RegisterForm(),
            ],
          ),
        ),
      ),
    );
  }
}
// ---------- Form -----------
class RegisterForm extends StatefulWidget {
  RegisterFormState createState() => RegisterFormState();
}

class RegisterFormState extends State {
  // 得到表单字段里面的数据需要给表单添加一个GlobalKey，然后把这个key交给表单
  final registerFormKey = GlobalKey();
  String username, password;
  bool autovalidate = false;

  // 表单提交的方法
  void submitRegisterForm () {
    if (registerFormKey.currentState.validate()) {// 验证表单数据
      // 保存表单数据
      registerFormKey.currentState.save();
      
      debugPrint('usrname: $username');
      debugPrint('password: $password');
      // 在屏幕底部动态弹出提示框
      Scaffold.of(context).showSnackBar(SnackBar(content: Text('正在注册...')));
    } else {
      setState(() {
        autovalidate = true; // 打开自动验证
      });
    }
  }
  // 定义验证表单的规则
  String validateUsername(value) {
    if (value.isEmpty) {
      return '用户名不能为空!';
    }
    return null;
  }
  String validatePassword(value) {
    if (value.isEmpty) {
      return '密码不能为空!';
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: registerFormKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText: '用户名',
              hintText: '',
            ),
            onSaved: (value) { // 保存表单数据时会执行这个回调
              username = value;
            },
            // 验证表单里的数据
            validator: validateUsername,
            autovalidate: autovalidate, // 这个属性为true会自动验证表单数据
          ),
          TextFormField(
            obscureText: true,
            decoration: InputDecoration(
              labelText: '密码',
            ),
            onSaved: (value) {
              password = value;
            },
            validator: validatePassword,
          ),
          SizedBox(height: 32.0,),
          Container(
            width: double.infinity,
            child: RaisedButton(
              color: Theme.of(context).accentColor,
              child: Text('注册', style: TextStyle(color: Colors.white),),
              elevation: 0.0,
              onPressed: submitRegisterForm),
          )
        ],
      ),
    );
  }
}