在 Flutter 中更改 TextField 的下划线

Question

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

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

Answer 1

虽然这些其他答案可能以某种方式起作用，但您绝对不应该使用它。 这不是在 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的InputDecoration 。 它会自动将颜色设置为红色。

Answer 2

您还可以通过以下方式更改其颜色。

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

    Theme( data: Theme.of(context).copyWith(accentColor: Colors.red), child: TextField(), )

2. 使用inputDecoration属性。

    TextField( decoration: InputDecoration( focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.red), ), ), )

Answer 3

我已经使用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 4

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

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

enabledBorder -> borderSide: BorderSide(color) : 用于设置没有焦点的文本输入下划线颜色。 focusBorder -> 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),
                      ),  
                    )
                )
              )
            )
        )
      ));
    }
  }

Answer 5

我还没有尝试过，但我为你查看了文档。

查看TextField类，您可以设置一个InputDecoration ，而后者又具有一个InputBorder 。 我想，将其设置为使用您自己的BorderSide的UnderlineInputBorder应该可以解决问题。 您可以设置 BorderSide 的颜色。

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

Answer 6

我用以下方法解决了：

    TextField(
decoration: InputDecoration(
focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red)),),)