Flutter - FormBuilder,如何根据另一个FormBuilderTextField值的长度来禁用FormBuilderTextField

bnl4lu3b  于 2022-11-25  发布在  Flutter
关注(0)|答案(1)|浏览(116)

我有一个FormBuilderTextField,我想根据另一个FormBuilderTextField值的长度切换它的enabled属性。
我知道TextEditingController有很多方法,但我想尝试另一种方法,因为我有很多FormBuilderTextField
我尝试使用onChanged,但没有效果。

3qpi33ja

3qpi33ja1#

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  TextEditingController username = TextEditingController();
  TextEditingController password = TextEditingController();
  bool enabledPassword = false;
  bool enabledSubmitButton = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const SizedBox(height: 12),
        TextField(
          controller: username,
          onChanged: (value) {
            setState(() {
              enabledPassword = value.length >= 8 ? true : false;//this
            });
          },
          decoration: const InputDecoration(
            hintText: 'Username',
            contentPadding:
                EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.all(Radius.circular(32.0)),
            ),
        
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.blue, width: 2.0),
              borderRadius: BorderRadius.all(Radius.circular(32.0)),
            ),
          ),
        ),
        const SizedBox(height: 12),
        TextField(
          controller: password,
          onChanged: (value) {
            setState(() {
              enabledSubmitButton = value.length >= 8 ? true : false;//this
            });
          },
          enabled: enabledPassword,//this
          decoration: const InputDecoration(
            hintText: 'Password',
            contentPadding:
                EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
            border: OutlineInputBorder(),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.blue, width: 2.0),
              borderRadius: BorderRadius.all(Radius.circular(32.0)),
            ),
            disabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.grey, width: 2.0),
              borderRadius: BorderRadius.all(Radius.circular(32.0)),
            ),
          ),
        ),
        const SizedBox(height: 12),
        ElevatedButton(
          onPressed: enabledSubmitButton//this
              ? () {
                  print('Username:${username.text}');
                  print('Password:${password.text}');
                }
              : null,
          child: const Text('Submit'),
        )
      ],
    );
  }
}

参见结果here

相关问题