更改前缀图标颜色的文本表单字段在 Flutter 点击字段

l0oc07j2  于 2023-04-07  发布在  Flutter
关注(0)|答案(3)|浏览(118)

我在Flutter应用程序中有一个名称表单字段。其中有一个前缀图标。当我单击表单字段时,图标的颜色会变为蓝色,而我想将其更改为绿色。我如何才能做到这一点,有人能指导我吗?这是它的代码:

TextFormField(
      decoration: InputDecoration(
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.green, width: 2.0),
          borderRadius: BorderRadius.circular(10.0),
        ),
        prefixIcon: const Icon(Icons.person),
       
        hintText: "Name",
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
      ),
    );
toiithl6

toiithl61#

Flutter的方法是使用resolveWith。您可以检查当前状态以检查文本字段是否聚焦,显示错误等。并根据您设置的颜色。
从文档(https://api.flutter.dev/flutter/material/InputDecoration-class.html):

final ThemeData themeData = Theme.of(context);
    return Theme(
      data: themeData.copyWith(
          inputDecorationTheme: themeData.inputDecorationTheme.copyWith(
        prefixIconColor:
            MaterialStateColor.resolveWith((Set<MaterialState> states) {
          if (states.contains(MaterialState.focused)) {
            return Colors.green;
          }
          if (states.contains(MaterialState.error)) {
            return Colors.red;
          }
          return Colors.grey;
        }),
      )),
      child: TextFormField(
        initialValue: 'abc',
        decoration: const InputDecoration(
          prefixIcon: Icon(Icons.person),
        ),
      ),
    );
zbq4xfa0

zbq4xfa02#

使用Theme颜色进行更改,然后定义焦点节点以确定字段何时处于焦点上,以便应用这些颜色更改

... 
  FocusNode _fieldNode = FocusNode(); //<-Define this then
...
TextFormField(
      decoration: InputDecoration(
        focusedBorder: OutlineInputBorder(
          borderSide: const BorderSide(color: Colors.green, width: 2.0),
          borderRadius: BorderRadius.circular(10.0),
        ),
        prefixIcon: Icon(Icons.person,
            color: _fieldNode.hasFocus
                ? Theme.of(context).primaryColor
                : Colors.purple)),
       
        hintText: "Name",
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
      ),
    );
mdfafbf1

mdfafbf13#

您可以使用colorScheme设置文本域边框或前缀图标等选择的默认颜色

MaterialApp(theme: ThemeData(
        colorScheme: ThemeData().colorScheme.copyWith(primary: kPrimaryColor),
 )

相关问题