当颤动中使用多个文本字段时，如何在文本字段获得焦点时更改标签文本颜色答案

【问题标题】：How to change the label text color when text filed is focused when more than one textfield used in flutter当颤动中使用多个文本字段时，如何在文本字段获得焦点时更改标签文本颜色
【发布时间】：2021-11-30 14:24:45
【问题描述】：

我的要求是我有 2 个文本字段小部件，当我单击第一个文本字段小部件时，我需要将标签文本颜色匹配更改为光标和边框颜色。当我点击第二个文本字段时，同样的方式，预期的行为相同。如何做到这一点。

以下是我迄今为止尝试过的代码：

Padding(
              padding: const EdgeInsets.only(left: 32.0, right: 32.0),
              child: TextField(
                cursorColor: Color(0xFFD9A506),
                decoration: new InputDecoration(
                  labelText: 'Username',
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                          color: Color(0xFFD9A506), style: BorderStyle.solid)),
                  enabledBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xFF919191)),
                  ),
                  labelStyle: new TextStyle(color: Color(0xFF919191)),
                ),
                onChanged: (value) {
                  userName = value;
                  setState(() {
                    if (!userName.isEmpty && !password.isEmpty) {
                      isTextFiledFocus = true;
                    } else {
                      isTextFiledFocus = false;
                    }
                  });
                },
              ),
            ),
            Padding(
              padding:
                  const EdgeInsets.only(top: 38.0, left: 32.0, right: 32.0),
              child: TextField(
                  cursorColor: Color(0xFFD9A506),
                  obscureText: isHidePassword,
                  enableSuggestions: false,
                  autocorrect: false,
                  decoration: new InputDecoration(
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(
                            color: Color(0xFFD9A506),
                            style: BorderStyle.solid)),
                    labelText: 'Password',
                    suffixIcon: IconButton(
                        //eye icon
                        color: Color(0xFF919191),
                        onPressed: () {
                          //for keyboard to hide
                          FocusScopeNode currentFocus = FocusScope.of(context);
                          if (!currentFocus.hasPrimaryFocus) {
                            currentFocus.unfocus();
                          }
                          //for keyboard to hide
                          setState(() {
                            isHidePassword = !isHidePassword;
                          });
                        },
                        icon: Icon(isHidePassword
                            ? Icons.visibility
                            : Icons.visibility_off)), //eye icon
                    enabledBorder: const UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xFF919191)),
                    ),
                    labelStyle: new TextStyle(color: Color(0xFF919191)),
                  ),
                  onChanged: (value) {
                    password = value;
                    setState(() {
                      if (!userName.isEmpty && !password.isEmpty) {
                        isTextFiledFocus = true;
                      } else {
                        isTextFiledFocus = false;
                      }
                    });
                  }),
            ),

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以将FocusNode 与侦听器一起使用来更改标签颜色。我们只需要在焦点改变时更新 UI。你也可以用同样的方法改变标签文本。

  final FocusNode focusNode1 = FocusNode();
  final FocusNode focusNode2 = FocusNode();

  @override
  void initState() {
    super.initState();
    focusNode1.addListener(() {
      setState(() {});
    });

    focusNode2.addListener(() {
      setState(() {});
    });
  }

并在TextFiled上分配焦点节点

TextField(
 cursorColor: Color(0xFFD9A506),
 focusNode: focusNode1,
 decoration: InputDecoration(
  labelStyle: TextStyle(
      color: focusNode1.hasFocus
          ? Color(0xFFD9A506)
          : Color(0xFF919191)),
  labelText: "UserName",

对下一个 TextFiled 执行相同操作。

【讨论】：