无法更改 Flutter 中输入装饰的 focusColor 属性答案

【问题标题】：Unable to change the focusColor property of Input Decoration in Flutter无法更改 Flutter 中输入装饰的 focusColor 属性
【发布时间】：2022-09-23 18:15:31
【问题描述】：

我需要在焦点上更改 TextField 的颜色（或每当用户点击它时）。我正在使用 InputDecoration 的 focusColor 属性，但它没有按预期工作。你能帮帮我吗？我正在使用下面的代码：

    return Card(
  child: Theme(
    data: Theme.of(context).copyWith(
      primaryColor: CustomColors.grey,
    ),
    child: TextField(
      autofocus: widget.autofocus,
      onSubmitted: (value) => setState(() {
        if (onSearch != null) {
          onSearch(value);
        }
      }),

      controller: searchTextController,
      onChanged: (value) => setState(() {
        if (widget.onChange != null) {
          widget.onChange!(value);
        }
      }),
      decoration: InputDecoration(
        border: InputBorder.none,
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(3.0)),
            borderSide: BorderSide(
                width: 0.5,
                color: CustomTheme.searchBarCardBorderColor(context))),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(3.0)),
            borderSide: BorderSide(
                color: CustomTheme.searchBarfocusBorderColor(context))),
        focusColor: CustomTheme.searchBarCursorNFocusColor(context),
      ),
    ),
  ),
);

focusColor 属性似乎已被弃用。

标签： flutter

【解决方案1】：

我以前遇到过同样的问题。底线是您需要更改默认主题。因此，您可以使用：

child: new Theme(
          data: new ThemeData(
            primaryColor: Colors.red,
          ),
          child: new TextField(
      controller: searchTextController,
      onChanged: (value) => setState(() {
        if (widget.onChange != null) {
          widget.onChange!(value);
        }
      }),
      decoration: InputDecoration(
        hoverColor: Theme.searchBarhoverColor(context),
        contentPadding: EdgeInsets.only(top: 8, left: 6, bottom: 6),
        border: InputBorder.none,
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(3.0)),
        ),
        ));

刚刚注意到：您使用了border: InputBorder.none，因此您的边框已关闭

【讨论】：

如果这没有帮助，请尝试更改其他边框属性
也刚刚注意到：您使用边框：InputBorder.none？它关闭了边界
试过了，但还是没有运气
我更新了代码，你可以看看

【解决方案2】：

试试这个代码

  TextField(
            controller: searchTextController,
                    onChanged: (value) => setState(() {
                  if (widget.onChange != null) {
                  widget.onChange!(value);
                 }
                       }),
                    decoration: InputDecoration(
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                        borderSide:
                            BorderSide(color: Colors.lightBlueAccent, width: 1),
                      ),
                      disabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                        borderSide: BorderSide(color: Colors.red, width: 1),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                        borderSide: BorderSide(color: Colors.black),
                      ),
                    ),
                  ),

【讨论】：

它只是改变边框的颜色而不是 textField

【解决方案3】：

对我来说，添加 FocusNode 是解决方案：

创建一个焦点节点：

late FocusNode focusNode = FocusNode()
    ..addListener(() {
      setState(() {});
    });

将其添加到您的 TextField：

TextFormField(
  focusNode: focusNode,
  controller: textEditingController,
  decoration: const InputDecoration(
     filled:true,
     fillColor:focusNode.hasFocus? Colors.red,
     ),
   ),

【讨论】：