flutter 即时其他小部件中的文本表单字段焦点更改

yh2wf1be  于 2022-12-24  发布在  Flutter
关注(0)|答案(2)|浏览(121)

使用一个textformfield小部件,我需要根据焦点和非焦点状态改变背景的颜色,但是这个改变在焦点和非焦点时屏幕上不会改变,下面是一个代码样本。
在这里

FocusNode _focusNode = FocusNode();

Container(
   width: double.infinity,
   color: _focusNode.hasFocus ? Colors.red : Colors.black,
   child: TextFormField(
             focusNode: _focusNode,
          ),
)
dw1jzc5e

dw1jzc5e1#

尝试另一种方法,在StatefullWidget中的FocusNode上添加一个侦听器,该侦听器将基于此更改颜色:
首先,在State对象中:

FocusNode _focusNode = FocusNode();
  Color _color = Colors.red;

  @override
  void initState() {
    _focusNode.addListener(
      () {
        if (_focusNode.hasFocus) {
          setState(() {
            _color = Colors.green;
          });
        } else {
          setState(() {
            _color = Colors.red;
          });
        }
      },
    );
    super.initState();
  }

这将监听FocusNode,当它必须聚焦时,它将把颜色更新为绿色,否则,它是红色。
然后在小部件中:

Container(
   width: double.infinity,
   color: _color,
   child: TextFormField(
             focusNode: _focusNode,
          ),
)
vwkv1x7d

vwkv1x7d2#

您可以使用ValueNotifier

ValueNotifier<bool> isFocused = ValueNotifier<bool>(false);
 FocusNode _focusNode = FocusNode();

@override
  void initState() {
    super.initState();
    _focusNode.addListener(
      () {
        if (_focusNode.hasFocus) {
          isFocused.value = true;
        } else {
          isFocused.value = false;
        }
      },
    );
  }

//Your Widget
 ValueListenableBuilder(
     valueListenable: isFocused,
     builder: (context, mobile, child) {
          return Container(
             width: double.infinity,
             color: isFocused.value ? Colors.red : Colors.blue,
             child: TextFormField(
                focusNode: _focusNode,
              ),
          );
       },
   ),

相关问题