Question

我正在使用Flutter SDK处理应用程序。当我使用TextField小部件并将其集中时，下划线变为蓝色。我需要将此颜色更改为红色，我该怎么办？

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

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

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的{{1}}。它会自动将颜色设置为红色。

Answer 2

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

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

func setTransaction(date: Date) {

    /// Analytics for scheduled transfer
    if let product = self.getDestinationAccount()?.typeName {
      print("I TOLD U")
      self.transferAnalyticsHelper.trackScheduleDateTransfer(product: product)
    }
    self.transferAnalyticsHelper.trackScheduleDateTransfer(product: "Here IT WORKS!")

    captureModel.transactionDate = date.hummanDateFormat(format: "dd MMM yyyy' 'HH:mm:ss").capitalizeFirst
    getCaptureInterfaceInfo()

  }

如果这回答了你的问题，请告诉我们。）

Answer 3

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

在 Center 小部件中创建 TextField 小部件并包裹在 Container 小部件中。

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

Answer 4

我还没试过，但我看了你的文档。

查看TextField课程，您可以设置InputDecoration，而InputBorder又有UnderlineInputBorder。使用您自己的BorderSide将其设置为InputDecorationTheme应该可以做到这一点。您可以设置BorderSide的颜色。

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

Answer 5

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

将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 6

我已经解决了：

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

在Flutter中更改TextField的下划线

6 个答案: