在 Flutter 中更改 TextField 的下划线

Question

我正在开发一个使用 Flutter SDK 的应用程序。当我使用 TextField 小部件并将其聚焦时，下划线变为蓝色。我需要把这个颜色改成红色，我该怎么做？

我需要更改的内容的屏幕截图。我只想更改下划线，，而不是标签颜色。

Answer 1

我还没试过，不过我帮你看了看文档。

看看 TextField class you can set an InputDecoration, which in turn has an InputBorder. Setting that to an UnderlineInputBorder with your own BorderSide 我想应该可以解决问题。可以设置BorderSide的颜色。

如果您希望所有文本字段具有相同的样式，您还可以在全局 InputDecorationTheme 中设置 InputBorder。

Answer 2

我已经使用 InputDecoration.collapsed 删除了分隔线，我正在更改底部边框的颜色。

如果您输入名称，底部边框颜色为蓝色，如果您输入数字或其他特殊字符，底部边框颜色为红色

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

如果这回答了您的问题，请告诉我:)

Answer 3

虽然这些其他答案可能会以某种方式起作用，但您绝对应该不使用它。这不是在 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),
    ),
  ),
);

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

Answer 4

您还可以通过以下方式改变它的颜色。

将您的 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),
    ),
  ),
)

Answer 5

我们可以通过在 TextField 小部件中使用 enabledBorder: UnderlineInputBorder() 属性装饰来做到这一点。启用的边框有一个 sub-属性 borderSide: BorderSide(color) 用于定义下划线颜色。因此，在本教程中，我们将更改 Flutter Android iOS 应用程序示例中的文本输入 TextField 底部下划线颜色。我们还将在焦点上更改 TextField 下划线颜色。

在中心小部件中创建 TextField 小部件包装在容器小部件中。

enabledBorder -> borderSide: BorderSide(color) : 用于设置没有焦点的文本输入下划线颜色。 focusedBorder -> borderSide: BorderSide(color) : 用于设置焦点上的文本输入下划线颜色。

import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: SafeArea(
            child: Center(
              child : Container(
                width: 290,
                padding: EdgeInsets.all(10.0),
                child : TextField(
                        autocorrect: true,
                        decoration: InputDecoration(
                          hintText: 'Type Text Here',        
                          enabledBorder: UnderlineInputBorder(      
                            borderSide: BorderSide(color: Colors.red),   
                            ),  
                          focusedBorder: UnderlineInputBorder(
                          borderSide: BorderSide(color: Colors.green),
                      ),  
                    )
                )
              )
            )
        )
      ));
    }
  }

在 Flutter 中更改 TextField 的下划线

Change TextField's Underline in Flutter

underline

textfield

dart

flutter