什么主题元素控制TextField小部件的焦点颜色 [英] What theme element controls the TextField widget focused color

问题描述

我有一个正在使用ThemeData.dark()的应用程序.当我点击一个文本字段时，标签和文本字段会变成我要更改的绿色阴影.

I have an app that is using ThemeData.dark(). When I tap on a text field, the label and text field turn a shade of green that I'd like to change.

为了获得不同的颜色，我必须更改主题的哪个方面?

What aspect of the theme do I have to change to get a different color?

我实现了答案，但仍然没有使标签变成蓝色.因此，我开始在代码中向后进行操作，删除了TextField的各个元素，并发现如果应用了labelStyle，则该颜色不会保留下来.这不起作用:

I implemented the answer and still wasn't getting the label to be blue. So I started working backward in my code, removing various elements of the TextField and found that the color wasn't being carried forward if there was a labelStyle applied. This doesn't work:

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，它会正常工作:

If I remove the labelStyle, the it works fine:

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中的错误，还是我想念的其他东西?

I do want to be able to apply the labelStyle so that I can change the fontSize and fontWeight. Is this a bug in Flutter, or is there something else that I'm missing.

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

For the sake of simplicity, I created a new project with just one TextField on it and nothing else. Just to eliminate any other possible causes. I followed the instructions in the proposed answer and the label is still blue when the field does not have focus.

我需要做的就是获取它，以便没有焦点的字段的标签与下划线具有相同的默认灰色.

What I need to do is get it so that the label of the field without focus is the same default grey color as the underline.

这是我实现的代码.我认为我什么都没错过.

This is the code that I implemented. I don't think that I missed anything.

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

推荐答案

您将必须定义自定义主题，在其中必须对 ThemeData Brightness >暗.

You will have to define your custom theme in which you have to do ThemeData brightness to dark.

如果您将看到 ThemeData 类，您会发现它什么也不做，只是将 ThemeData的亮度设置为 dark .dark().

If you will see the ThemeData class you will find out that it does nothing but only sets brightness to dark for ThemeData.dark().

您要查找的属性是 InputDecorationTheme 中的 border 和 labelStyle . border 的三个属性分别是:当您的 TextInput 被聚焦时， focusedBorder ；当您的 TextInput 已以您显示的形式启用 ，并且仅在要设置默认边框时启用 border .

The properties that you are looking for is border and labelStyle inside the InputDecorationTheme. There are three properties for border namely focusedBorder when your TextInput is focused, enabledBorder when your TextInput is enabled in the form you are showing and border when you just want to set the default 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 的所有边框时使用.

There is another InputBorder attribute called OutlineInputBorder, which usually is used when you want to define all the borders for the TextInput.

在 TextField 小部件中，有一种名为 _getEffectiveDecoration()的方法，该方法负责为 TextField 设置装饰.这是该方法的一个片段:

In TextField Widget there is a method called _getEffectiveDecoration(), which is responsible for setting the decoration for the TextField. Here is a snippet of that method:

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 提供的属性应用默认样式.

In the above snippet it can be clearly seen that firstly the decoration that you provide for your TextField is set and then the defaults are applied which are taken from your Theme. What applyDefaults does is that, that it checks whether a particular property is already applied to the TextField or not, if yes, then that property will override the default property, if no, then it will apply the default styling for that property provided by the Theme.

因此，在您的情况下，您想要的是，您想要应用主题中已应用且已通过的两者的组合.

So in your case, what you want is that, that you want to apply a combination of both that is applied in theme and that you have passed.

为此，您必须像这样编写小部件:

For that you will have to write your widget like this:

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

这篇关于什么主题元素控制TextField小部件的焦点颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！