(Flutter) TextFormField 在焦点上更改 labelColor

Question

我试图labelText在聚焦时改变我的颜色。我可以更改文本颜色，但不能在聚焦时更改。

我已经尝试了所有提示文本颜色和标签文本颜色，但没有任何帮助。

Container(
  padding: EdgeInsets.fromLTRB(15, 10, 15, 0),
  child: TextFormField(
    cursorColor: Colors.lightGreen,
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
      labelText: 'Phone Number',
      hintText: 'Enter a Phone Number',
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.lightGreen
        )
      ),
      border: OutlineInputBorder(
        borderSide: BorderSide()
      ),
    )
  ),
),

以下是正在发生的事情的图像：

Answer 1

你需要有一种方法来确定它的焦点状态，然后根据它为它的颜色创建一个条件。这是 afocusNode会有所帮助的地方。构造一个新的FocusNode关闭窗口小部件创建，使用，由于focusNode在财产TextFormField。然后在颜色属性TextStyle的属性TextFormField，你可以添加类似：

FocusNode myFocusNode = new FocusNode();

...

  return TextFormField(
    focusNode: myFocusNode,
    decoration: InputDecoration(
      labelText: 'test',
      labelStyle: TextStyle(
        color: myFocusNode.hasFocus ? Colors.blue : Colors.black
      )
    ),
  );

编辑：只是一个简短的说明，您可能需要确保这是在 a 中StatefulWidget，然后将一个侦听器添加到focusNode您创建的 并调用该setState上的任何事件focusNode。否则你不会看到任何变化。

Answer 2

使用主题，这只需要在中心位置完成一次：

inputDecorationTheme: InputDecorationTheme(
      floatingLabelStyle: TextStyle(color: Colors.blue),
),

Answer 3

https://api.flutter.dev/flutter/material/InputDecoration/labelStyle.html

labelStyle: MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
          final Color color = states.contains(MaterialState.focused)
              ? Colors.pink
              : Colors.orange;
          return TextStyle(color: color);
        }),

Answer 4

摘要

您可能想查看Flutter Cookbook 的 Focus 和文本字段食谱。

本质上，我们必须：

1. 创建一个FocusNode属性。
2. 为其添加初始化和处置。
3. 将其添加到TextFormField.
4. 在TextFormField.

1.创建FocusNode属性

class CustomTextFormFieldState extends State<CustomTextFormField> {
  FocusNode _focusNode;
  ...

2.为其添加初始化和处置

@override
void initState() {
  super.initState();
  _focusNode = FocusNode();
}

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

3. 将其添加到 TextFormField

@override
Widget build(BuildContext context) {
  return TextFormField(
    focusNode: _focusNode,
    ...

4.在每次点击时添加焦点请求 TextFormField

不要忘记使用setState：

void _requestFocus(){
  setState(() {
    FocusScope.of(context).requestFocus(_focusNode);
  });
}

将方法添加到TextFormField的onTap属性：

@override
Widget build(BuildContext context) {
  return TextFormField(
    focusNode: _focusNode,
    onTap: _requestFocus,
    ...

Answer 5

对于活动/点击

floatingLabelStyle: TextStyle(color: Colors.yellow),

对于不活跃的

labelStyle: TextStyle(color: Colors.black),

下面是完整的例子

TextField(
         decoration: InputDecoration(
            hintText: 'Verify Password',
            focusColor: appColor,
            labelText: "Verify Password",
            labelStyle: TextStyle(color: Colors.black),
            floatingLabelStyle: TextStyle(color: appColor),
            floatingLabelBehavior: FloatingLabelBehavior.always
         ),
         cursorColor: appColor,
)

Answer 6

这是一个不使用有状态小部件的快速方法

 return Theme( // 1) wrap with theme widget
   data: Theme.of(context).copyWith(primaryColor: //2) color you want here)
   child: TextFormField(
     focusNode: myFocusNode,
     decoration: InputDecoration(
    labelText: 'test',      
    ),
   ),
  );

Answer 7

一个快速的解决方案是改变primarySwatch从theme控件的MaterialApp。唯一的缺点是 aMaterial Color是必需的。

Answer 8

我用 Focus 小部件解决了这个问题。首先，我为每个字段定义了一个颜色变量：

final _lowColor = Colors.amber[50];   // use your own colors
final _highColor = Colors.amber[200];

Color _field1Color = _lowColor;
Color _field2Color = _lowColor;
...

然后我用 Focus Widget 包裹每个 TextFormField 并更改 fieldColor：

child: Focus(
  onFocusChange: (hasFocus) {
    setState(() => _field1Color = hasFocus ? _highColor : _lowColor);
  },
  child: TextFormField(
    ...
      color: _field1Color,
    ...
    ),
  ), 
),

Answer 9

更新

正如Guilherme在评论中提到的，Flutter的后期版本使用不同的逻辑来获取颜色

Color _getActiveColor(ThemeData themeData) {
  if (isFocused) {
    return themeData.colorScheme.primary;
  }
  return themeData.hintColor;
}

来源

您现在需要从而colorScheme不是设置它

ThemeData.dark().copyWith(
  colorScheme: ColorScheme.dark(
    primary: activeColor,
  ),
)

原答案

在挖掘InputDecorator用于确定标签颜色的源代码后，这是我发现的。

TextStyle _getFloatingLabelStyle(ThemeData themeData) {
  final Color color = decoration.errorText != null
    ? decoration.errorStyle?.color ?? themeData.errorColor
    : _getActiveColor(themeData);
  final TextStyle style = themeData.textTheme.subtitle1.merge(widget.baseStyle);
  return style
    .copyWith(color: decoration.enabled ? color : themeData.disabledColor)
    .merge(decoration.labelStyle);
}

Color _getActiveColor(ThemeData themeData) {
  if (isFocused) {
    switch (themeData.brightness) {
      case Brightness.dark:
        return themeData.accentColor;
      case Brightness.light:
        return themeData.primaryColor;
    }
  }
  return themeData.hintColor;
}

简而言之，要更改标签颜色，请设置primaryColor浅色主题或accentColor深色主题。

另一个提示：要在未聚焦时更改标签颜色，请设置hintColor.

ThemeData.dark().copyWith(
  primaryColor: Colors.red,
  accentColor: Colors.white,
  hintColor: Colors.pink,
)

Answer 10

一种更简洁的样式处理方法（您可以将样式添加到主主题并用于深色\浅色模式）

TextFormField(
  decoration: InputDecoration(
    labelText: "some label",
    labelStyle: const TextStyle(color: Colors.grey),
    floatingLabelStyle: const TextStyle(color: Colors.blueAccent),
  ),),