dart 根据在TextFormField中输入的数据向用户显示按钮

rxztt3cl  于 2022-12-06  发布在  其他
关注(0)|答案(4)|浏览(146)
final TextEditingController _weight = TextEditingController();

 if (_weight.text.contains(RegExp(r'[0-9]')))
        Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: BMIButton(
              onpressed: () {
                Navigator.push(
                  context,
                  PageTransition(
                      type: PageTransitionType.rightToLeft,
                      child: BMIHeight(),
                      inheritTheme: true,
                      ctx: context),
                );
              },
            ))

当用户在textFormField中输入一些数据时,我试图显示OutlinedButton。当我在TextFormField中输入值并确认时,它不显示按钮,但当我热重新加载它时,它看到该值并显示按钮。

oxosxuxt

oxosxuxt1#

尝试添加侦听器并调用setState以更新ui

late final TextEditingController _weight = TextEditingController()
    ..addListener(() {
      setState(() {});
    });

并重写dispose方法并释放此控制器。

rkue9o1l

rkue9o1l2#

这意味着你只需要更新小部件的状态,首先确保它在一个StatefulWidget内,然后在该方法的末尾添加一个SetState(() {})

if (_weight.text.contains(RegExp(r'[0-9]')))
        Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: BMIButton(
              onpressed: () {
                Navigator.push(
                  context,
                  PageTransition(
                      type: PageTransitionType.rightToLeft,
                      child: BMIHeight(),
                      inheritTheme: true,
                      ctx: context),
                );
              },
            ))
           //...
           setState(() {}) // add this
hec6srdp

hec6srdp3#

TextEditingController正在实现Listenable。您可以利用它来有条件地构建部分UI。
此外,TextEditingController必须正确地初始化和处理,您可以使用flutter_hooks顺利地完成这一任务。
您将得到以下简洁的结果:

class MyWidget extends HookWidget {
  const MyWidget({super.key});
  @override
  Widget build(BuildContext context) {
    final textController = useTextEditingController();

    return Column(  // example, I'm not sure of what you've got there
      children: [
        TextField(controller: textController),  // Your Text Field
        ValueListenableBuilder(
          valueListenable: textController,
          builder: (context, value, child) {
            return value.text.contains(...)
                ? OutlinedButton(  // Your Button
                    onPressed: () {
                      // .. do stuff
                    },
                    child: const Text('I am ready to be pressed'),
                  )
                : const SizedBox.shrink();  // This is empty, but you can render whatever
          },
        )
      ],
    );
  }
}
hjzp0vay

hjzp0vay4#

检查TextFormField是否被填充的代码需要位于有状态部件的build函数中。要触发状态更新,请监听TextFormField上的变化,然后在函数中设置一些可以检查的变量的状态。将以下代码添加到initState方法中:

_weight.addListener(() {
    setState(() {
        _inputText = _weight.text; // Create this variable inside the state class
    });
});

并按如下所示更改if语句:

if (_inputText.contains(RegExp(r'[0-9]')))

方法二

您也可以使用可见性小部件 Package 小部件:

Visibility(
    visible: RegExp(r'[0-9]').hasMatch(_inputText),
    child: [YOUR WIDGET],
)

这仍然需要具有setState调用的侦听器。

相关问题