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

您将必须定义自己的自定义主题，其中您必须对src ----components ----helpers --------config.js --------file2.js --------file3.js ----views ----etc做ThemeData brightness。

如果您看到dark类，您会发现它什么也不做，只是将ThemeData的{{1}}设置为brightness。

您要查找的属性是dark中的ThemeData.dark()和border。 labelStyle的三个属性分别是InputDecorationTheme处于焦点时的border，focusedBorder处于TextInput时的enabledBorder的形式和TextInput（仅在您要设置默认边框时使用）。

您可以执行以下操作：

enabled

还有一个名为border的{{1}}属性，通常在您要为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设置修饰。这是该方法的摘要：

TextField

在上面的代码段中，可以清楚地看到，首先设置您为_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小部件的焦点颜色

1 个答案: