logo标签列表

在Flutter中更改TextField的下划线

flutterdarttextfieldunderline
32
我正在使用Flutter SDK开发一个应用程序。当我使用TextField小部件并将其聚焦时，下划线会变成蓝色。我需要将此颜色更改为红色，该怎么做？
需要更改的截图如下。我只想更改下划线，而不是标签颜色。

Screenshot of what I need to change. (I want the underline to change, not the label color)

12
我正在开发Flutter应用程序。你写的那个是为本地Android开发的。 - Tiziano Gioè
看一下这个问题，如果你想要改变所有输入框的颜色可能会有用。同时，分享你应用的主题代码也可能很有用。 - Mathieu de Lorimier
顺便说一句，您可能想删除Java和Android标签。 - Rene
1
更改应用程序主题的 hintColor，返回 ThemeData.light().copyWith(hintColor: Colors.blueAccent,)。 - AbdulMomen عبدالمؤمن
1
这绝对不是重复的。Android和Flutter是完全不同的技术。 - George Hilliard
4个回答
17

您还可以按照以下方式更改其颜色。

  1. 将您的TextField包装在Theme中并提供accentColor

Theme(
  data: Theme.of(context).copyWith(accentColor: Colors.red),
  child: TextField(),
)
使用inputDecoration属性。 
TextField(
  decoration: InputDecoration(
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.red),
    ),
  ),
)
1
这真的很难找，但现在阅读下划线输入边框很容易记忆，谢谢楼主。 - Bruno Giubilei
14
虽然其他答案可能在某种程度上有效，但您绝对不应该使用它。 这不是在Flutter中获取自定义主题的正确方式。 更优雅的解决方案如下：
final theme = Theme.of(context);

return new Theme(
  data: theme.copyWith(primaryColor: Colors.red),
  child: new TextField(
    decoration: new InputDecoration(
      labelText: "Hello",
      labelStyle: theme.textTheme.caption.copyWith(color: theme.primaryColor),
    ),
  ),
);

同时，如果你只想显示一个错误（红色），请使用InputDecoration的errorText。它会自动将颜色设置为红色。

你的答案看起来更好，但有点奇怪的是你必须将主要颜色更改为红色，然后将所有其他样式项更改回你真正的主要颜色。 - Rene
是的，我同意。不幸的是，目前您无法更改下划线颜色而不重写所有内容。 - Rémi Rousselet
我该如何设置选定和默认的下划线颜色？假设表单中有4个文本字段，如果我在textfield1中输入数据，则textfield1和其他文本字段的颜色。 - Mayur Prasad
@RémiRousselet，你能帮我理解需要重写什么来将下划线颜色更改为其他颜色吗？因为我也遇到了同样的情况。这是我的帖子链接-https://dev59.com/r1UL5IYBdhLWcg3w6rto - Suresh
对于那些无法理解Remi的答案的人，另一个答案帮助我理解了很多：https://dev59.com/r1UL5IYBdhLWcg3w6rto - user823447
6
我使用了来移除分割线，并且我正在改变底部边框的颜色。
如果您输入一个名称，底部边框的颜色是蓝色，如果您输入数字或其他特殊字符，则底部边框的颜色为红色。
请参考以下链接查看演示效果：demo 
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const EdgeInsets _padding = const EdgeInsets.symmetric(horizontal: 20.0, vertical: 8.0);
  Color borderColor = Colors.blue;
  bool nameFlag = false;

  @override
  void initState() {
    super.initState();
  }

  void validateName(String value) {
    final RegExp nameExp = new RegExp(r'^[A-Za-z ]+$');
    if (!nameExp.hasMatch(value) || value.isEmpty)
      borderColor = Colors.red;
    else
      borderColor = Colors.blue;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Column(children: <Widget>[
        new Flexible(
          child: new Container(
            margin: _padding,
            padding: _padding,
            child: new TextField(
              decoration: new InputDecoration.collapsed(
                hintText: "Enter Name",
              ),
              onChanged: (s) {
                setState(() => validateName(s));
              },
            ),
            decoration: new BoxDecoration(
              color: Colors.white,
              border: new Border(
                bottom: new BorderSide(color: borderColor, style: BorderStyle.solid),
              ),
            ),
          ),
        )
      ]),
    );
  }
}

请问这个回答解决了您的问题吗？ :)
远远超出了它的复杂程度。将来难以维护。 - Rémi Rousselet
@Darky 实际上，这不难维护。你可以创建一个自定义小部件，比如CustomTextFeild，它将具有所有TextField参数以及一些自定义参数，并在任何地方使用它。 - Ajay Kumar
比仅仅将您的TextField包装在Theme中要困难得多。特别是在alpha版本中，一切都迭代得非常快（一个月前inputDecorationTheme甚至还不存在）。 - Rémi Rousselet
@Darky 哦，是的！你说得对...我错过了你上面的答案...很酷，为什么我没想到呢 :) - Ajay Kumar
0
孩子们：<Widget>[ objectTextField = new TextField( decoration: new InputDecoration( border: new UnderlineInputBorder(borderSide: new BorderSide(color: Colors.redAccent)), ....... 我正在做类似的事情，但它没有改变任何东西。 - Tiziano Gioè
你是否尝试设置inputdecorationtheme？它似乎会覆盖你设置的装饰颜色：(widget.decoration ?? const InputDecoration()).applyDefaults(Theme.of(context).inputDecorationTheme); - Rene
1
由于某些不明原因，TextField 在内部覆盖了 inputDecorationTheme 的 borderSide 属性，并使用主题颜色构建它。它无法正常工作。 - Rémi Rousselet
设置 inputDecorationTheme 对我很有效。inputDecorationTheme: InputDecorationTheme( labelStyle: TextStyle(color: Colors.white), helperStyle: TextStyle(color: Colors.white), hintStyle: TextStyle(color: Colors.grey), focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.white), ) ), - surenyonjan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接