扑改变焦点颜色和图标颜色，但行不通

Question

更改焦点颜色和图标颜色，但不起作用，

TextFormField(
              cursorColor: Colors.red[600],
              decoration: const InputDecoration(
                border: UnderlineInputBorder(),
                filled: false,
                iconColor: Colors.red,
                focusColor: Colors.red,
                icon: Icon(Icons.phone),
                hintText: 'Where can we reach you?',
                labelText: 'Phone Number *',
                prefixText: '+86',
              ),
              keyboardType: TextInputType.phone,
              onSaved: (String? value) {
                this._phoneNumber = value;
                print('phoneNumber=$_phoneNumber');
              },
              // TextInputFormatters are applied in sequence.
              inputFormatters: <TextInputFormatter>[
                FilteringTextInputFormatter.digitsOnly
              ],
            ),

我将焦点颜色和图标颜色更改为红色。我确实重新启动，但输出仍然是蓝色的。我的主题主要颜色也是红色。

theme: ThemeData(primaryColor: Colors.red, fontFamily: 'Poppins'),

问题是什么？ 这是当前输出。

Answer 1

如果您想更改焦点上的图标颜色，则可以使用此方法

Color iconColor = Colors.grey;//add this as a variable

//use the focus widget in place of your textfield.
 Focus(
     onFocusChange: (hasFocus)
        {
         if(hasFocus)
             {
               iconColor = Colors.red;
              }
         else{
                iconColor = Colors.grey;
             }
             setState((){});
           },
          child: TextField(
             decoration: InputDecoration(prefix: Icon(Icons.phone, color: iconColor,)),
            ),
      ),

Answer 2

来自 intical文档这是可用的：

此示例显示了如何使用prefixicon的文本场
通过使用themedata来根据物质状态更改颜色。

因此，您的代码可能是：

Theme(
  data: Theme.of(context).copyWith(
    inputDecorationTheme: Theme.of(context).inputDecorationTheme.copyWith(
      iconColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
        if (states.contains(MaterialState.focused)) {
          return Colors.red;
        }
        if (states.contains(MaterialState.error)) {
          return Colors.deepOrange;
        }
        return Colors.grey;
      }),
    ),
  ),
  child: TextFormField(
    cursorColor: Colors.red[600],
    decoration: const InputDecoration(
      border: UnderlineInputBorder(),
      filled: false,
      icon: Icon(Icons.phone),
      hintText: 'Where can we reach you?',
      labelText: 'Phone Number *',
      prefixText: '+86',
    ),
    keyboardType: TextInputType.phone,
    onSaved: (String? value) {
      this._phoneNumber = value;
      print('phoneNumber=$_phoneNumber');
    },
    // TextInputFormatters are applied in sequence.
    inputFormatters: <TextInputFormatter>[
      FilteringTextInputFormatter.digitsOnly
    ],
  ),
),

好处是，如果您愿意，可以将此InputDecoration设置为整个应用程序，仅一次使用 theme> theme proterty在 pocity> posital> pocity> portialapp /代码>小部件，并将在任何地方应用。

Answer 3

尝试使用 focusnode 。

  late FocusNode focusNode = FocusNode()
    ..addListener(() {
      setState(() {});
    });

TextFormField(
  focusNode: focusNode,
  cursorColor: Colors.red[600],
  decoration: InputDecoration(
    icon: Icon(
      Icons.phone,
      color: focusNode.hasFocus ? Colors.red : Colors.grey,
    ),
  ),

此外，请详细介绍焦点节点

  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }

有关 a>