哪个主题元素控制TextField小部件的聚焦颜色

Question

我有一个应用程序，是使用ThemeData.dark（）。当我点击文本字段时，标签和文本字段会变成我想更改的绿色。

我需要改变主题的哪些方面才能获得不同的颜色？

编辑：我实现了答案，但仍然没有得到蓝色的标签。因此，我开始在代码中反向工作，删除TextField的各种元素，发现如果应用了labelStyle，则颜色不会向前推进。这不起作用：

return Container(
  child: TextField(
    controller: widget.textFieldController,
    inputFormatters: [
      LengthLimitingTextInputFormatter(5),
      ThousandsFormatter(
        allowFraction: true,
      ),
    ],
    keyboardType: TextInputType.numberWithOptions(
      signed: false,
    ),
    decoration: InputDecoration(
      labelText: widget.labelText,
      hintText: widget.hintText,
      labelStyle: TextStyle(
        fontSize: 15,
        fontWeight: FontWeight.w700,
      ),
    ),
  ),
);

如果我删除标签样式，它工作正常：

return Container(
  child: TextField(
    controller: widget.textFieldController,
    inputFormatters: [
      LengthLimitingTextInputFormatter(5),
      ThousandsFormatter(
        allowFraction: true,
      ),
    ],
    keyboardType: TextInputType.numberWithOptions(
      signed: false,
    ),
    decoration: InputDecoration(
      labelText: widget.labelText,
      hintText: widget.hintText,
    ),
  ),
);

我确实希望能够应用labelStyle，以便我可以更改fontsize和fontWeight。这是Flutter的一个错误，还是我错过了什么。

编辑：为了简单起见，我创建了一个新项目，上面只有一个文本字段，没有其他内容。只是为了消除任何其他可能的原因。我按照建议答案中的说明，当字段没有焦点时，标签仍然是蓝色的。

我需要做的是得到它，以便没有焦点的字段的标签与下划线的默认灰色相同。

这是我实现的代码。我不认为我错过了什么。

  darkTheme: ThemeData(
    brightness: Brightness.dark,
    buttonColor: Colors.deepPurple.shade600,
    inputDecorationTheme: InputDecorationTheme(
      labelStyle: TextStyle(
        color: Colors.blue,
      ),
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(
          style: BorderStyle.solid,
          color: Colors.blue,
        ),
      ),
    ),
    appBarTheme: AppBarTheme(
      color: Colors.deepPurple.shade600,
    ),
  ),

return Scaffold(
  appBar: AppBar(
    // Here we take the value from the MyHomePage object that was created by
    // the App.build method, and use it to set our appbar title.
    title: Text(widget.title),
  ),
  body: Padding(
    padding: const EdgeInsets.all(20.0),
    child: TextField(
      decoration: InputDecoration(
        labelText: 'First Name',
        labelStyle:
            Theme.of(context).inputDecorationTheme.labelStyle.copyWith(
                  fontSize: 15,
                  fontWeight: FontWeight.w700,
                ),
      ),
    ),
  ),
);

Answer 1

您必须定义自定义主题，您必须在其中执行主题数据亮度到暗。

如果您看到主题数据类，您会发现它除了将主题数据的亮度设置为暗之外什么都不做。深色（）。

/INPECTYLECode和您正在查找的主题代码。border有三个属性，即当您的TextInput处于焦点状态时，enabledBorder当您的TextInput在显示的表单中处于enabled状态时，border只想设置默认边框时。

您可以这样做：

ThemeData data = ThemeData(
      brightness: Brightness.dark,
      inputDecorationTheme: InputDecorationTheme(
        labelStyle: TextStyle(color: Colors.blue),
        focusedBorder: UnderlineInputBorder(
          borderSide: BorderSide(
               style: BorderStyle.solid, 
               color: Colors.blue
          ),
        )
      )
    );

还有另一个名为OutlineInputBorder的InputBorder属性，通常用于定义TextInput的所有边框。

编辑：

在TextField小部件中有一个名为\u getEffectiveDecoration（）的方法，该方法负责设置TextField的装饰。

下面是该方法的一个片段：

final InputDecoration effectiveDecoration = (widget.decoration ?? const InputDecoration())
      .applyDefaults(themeData.inputDecorationTheme)
      .copyWith(
        enabled: widget.enabled,
        hintMaxLines: widget.decoration?.hintMaxLines ?? widget.maxLines,
      );

在上面的代码片段中可以清楚地看到，首先设置了为文本字段提供的装饰，然后应用了取自主题的默认值。applyDefaults所做的是，它检查特定属性是否已应用于TextField，如果是，则该属性将覆盖默认属性，如果不是，则将应用主题提供的该属性的默认样式。

所以在你的例子中，你想要的是，你想要应用在主题中应用的和你已经通过的两者的组合。

为此，您必须编写如下小部件：

return Container(
  child: TextField(
    controller: widget.textFieldController,
    inputFormatters: [
      LengthLimitingTextInputFormatter(5),
      ThousandsFormatter(
        allowFraction: true,
      ),
    ],
    keyboardType: TextInputType.numberWithOptions(
      signed: false,
    ),
    decoration: InputDecoration(
      labelText: widget.labelText,
      hintText: widget.hintText,
      labelStyle: Theme.of(context)
        .inputDecorationTheme
        .labelStyle
        .copyWith(
          fontSize: 15,
          fontWeight: FontWeight.w700,
        ),
      ),
    ),
);