在 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)),),)