什么主题元素控制 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,
      ),
    ),
  ),
);

如果我删除 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 以便我可以更改 fontSize 和 fontWeight。这是 Flutter 中的错误，还是我遗漏了其他一些东西。

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

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

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

  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

您必须定义您必须在其中执行的自定义ThemeData brightness主题dark。

如果您查看该类，ThemeData您会发现它什么也不做，只是设置brightness为darkfor ThemeData.dark()。

您正在寻找的属性是border和labelStyle内的InputDecorationTheme。有三个属性，border即focusedBorder当您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
          ),
        )
      )
    );

还有另一个InputBorder名为 的属性OutlineInputBorder，通常在您想要定义 的所有边框时使用TextInput。

编辑：

在TextFieldWidget 中有一个名为 的方法_getEffectiveDecoration()，它负责设置 的装饰TextField。

这是该方法的一个片段：

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

在上面的代码片段中可以清楚地看到，首先TextField设置您为您提供的装饰，然后应用从您的Theme. 作用applyDefaults是，它检查特定属性是否已应用于TextField，如果是，则该属性将覆盖默认属性，如果否，则它将应用 提供的该属性的默认样式Theme。

因此，就您而言，您想要的是应用主题中应用的和您已经通过的两者的组合。

为此，你必须像这样编写你的小部件：

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,
        ),
      ),
    ),
);