如何更改textField下划线颜色？

一尘不染

如何更改textField下划线颜色？

flutter

我是扑扑和飞镖的新手。目前，在我的一个个人项目中使用它。

在我的所有表单中，textField的下划线都显示为蓝色。我想将其更改为其他颜色。我正在使用的一段代码就像…

new TextField(
  controller: this._emailController,
  decoration: new InputDecoration(
      hintText: "Enter your email",
      labelText: "Email",
      labelStyle: new TextStyle(
          color: const Color(0xFF424242)
      )
  ),

),

无法理解如何实现这一目标。

注意：我知道这里有一个类似的问题，在Flutter中更改TextField的下划线。但是，在那里还没有完全解决。另外，在这里看起来与我类似的另一个链接使用appcompat
v7更改EditText底线颜色，但实际上属于Java开发，是通过使用JAVA而不是我用于Android应用开发的DART（flutter）来实现的。因此，请不要对那些链接感到困惑。

阅读 624

2020-08-13

共1个答案

一尘不染

请参见下面的更新或@ GJJ2019的答案

刚使用过：

decoration: InputDecoration(        
              enabledBorder: UnderlineInputBorder(      
                      borderSide: BorderSide(color: Colors.cyan),   
                      ),  
              focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.cyan),
                   ),  
             ),

这个对我有用：）

逻辑答案是使用InputBorder，尤其是UnderlineInputDecorator，并将其作为边框传递给inputdecorator。但是，所有这些操作都告诉InputDecorator是应该使用下划线还是其他指定的内容。

实际颜色基于主题-来源：

Color _getActiveColor(ThemeData themeData) {
  if (isFocused) {
    switch (themeData.brightness) {
      case Brightness.dark:
        return themeData.accentColor;
      case Brightness.light:
        return themeData.primaryColor;
    }
  }
  return themeData.hintColor;
}

因此，要更改颜色，请执行以下操作（或为整个应用程序指定主题）：

new Theme(
  data: new ThemeData(
    primaryColor: Colors.red,
    accentColor: Colors.orange,
    hintColor: Colors.green
  ),
  child: new TextField(
    decoration: new InputDecoration(
      hintText: "Enter your email",
      labelText: "Email",
      labelStyle: new TextStyle(color: const Color(0xFF424242)),
      border: new UnderlineInputBorder(
        borderSide: new BorderSide(
          color: Colors.red
        )
      )
    ),
  ),
),

更新：

现在可以按照您期望的方式进行操作。

decoration: InputDecoration(        
  enabledBorder: UnderlineInputBorder(      
    borderSide: BorderSide(color: theColor),   
  ),  
  focusedBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: theColor),
  ),
  border: UnderlineInputBorder(
    borderSide: BorderSide(color: theColor),
  ),
)

2020-08-13