无法更改 TextField 边框颜色

Posted 2023-02-23

【中文标题】无法更改 TextField 边框颜色

【英文标题】：Not able to change TextField Border Color

【发布时间】：2018-10-11 20:10:17

【问题描述】：

我正在尝试使用BorderSide 更改我的TextField 边框的颜色，但它不起作用。

这是我下面的代码。

new TextField(
  decoration: new InputDecoration(
    border: new OutlineInputBorder(
      borderSide: new BorderSide(color: Colors.teal)
    ),
    hintText: 'Tell us about yourself',
    helperText: 'Keep it short, this is just a demo.',
    labelText: 'Life story',
    prefixIcon: const Icon(Icons.person, color: Colors.green,),
    prefixText: ' ',
    suffixText: 'USD',
    suffixStyle: const TextStyle(color: Colors.green)),
  )
)

结果截图如下。

【问题讨论】：

您可以使用focusedBorder 和enabledBorder 装饰属性。 var outlineInputBorder = OutlineInputBorder( borderSide: BorderSide(color: Colors.black87, width: 1.5)); var outlineInputBorder2 = OutlineInputBorder( borderSide: BorderSide(color: Colors.indigoAccent,width: 2), ); =======> child: TextFormField(decoration: InputDecoration( focusedBorder: outlineInputBorder2, enabledBorder: outlineInputBorder, border: OutlineInputBorder( borderSide: BorderSide(color: Colors.deepPurple)), hintText: 'Info',),)

【参考方案1】：

新的做法是像这样使用enabledBorder：

new TextField(
  decoration: new InputDecoration(
    enabledBorder: const OutlineInputBorder(
      borderSide: const BorderSide(color: Colors.grey, width: 0.0),
    ),
    focusedBorder: ...
    border: ...
  ),
)

【讨论】：

enabledBorder 与border 有何不同？

@stuckedoverflow 直觉建议 border 应作为默认值，只要在以下情况下省略 enabledBorder、disabledBorder、focusedBorder、errorBorder 或 focusedErrorBorder使用任何这些边界。但是，InputDecorator 的构建方法似乎根本没有引用border。它要么有InputDecorator 之外的用例，要么是一个错误（作为一个从未实际使用过的字段）。

@Abion47 border 属性涵盖所有 5 种情况，如您所料，例如，您可以设置 borderRadius，它会影响所有情况。但是，必须单独覆盖 InputBorder.borderSide。文档：api.flutter.dev/flutter/material/InputDecoration/border.html

【参考方案2】：

由于屏幕上设置了默认主题，这不会改变。

因此，只需使用 new ThemeData()

包装您的 TextField 来为您正在绘制的小部件更改它们

child: new Theme(
          data: new ThemeData(
            primaryColor: Colors.redAccent,
            primaryColorDark: Colors.red,
          ),
          child: new TextField(
            decoration: new InputDecoration(
                border: new OutlineInputBorder(
                    borderSide: new BorderSide(color: Colors.teal)),
                hintText: 'Tell us about yourself',
                helperText: 'Keep it short, this is just a demo.',
                labelText: 'Life story',
                prefixIcon: const Icon(
                  Icons.person,
                  color: Colors.green,
                ),
                prefixText: ' ',
                suffixText: 'USD',
                suffixStyle: const TextStyle(color: Colors.green)),
          ),
        ));

【讨论】：

您已经可以看到它的工作。它只是您的屏幕小部件的主题颜色没有被覆盖

由于 ThemeData 设置而无法正常工作...拯救了我的一天，谢谢。

【参考方案3】：

好吧，我真的不知道为什么分配给边框的颜色不起作用。但是您可以使用文本字段的其他边框属性来控制边框颜色。他们是：

disabledBorder：启用设置为false时激活 enabledBorder：启用设置为true时激活（默认TextField的启用属性为true） errorBorder：出现错误时激活（即验证失败） focusedBorder：当我们单击/聚焦于 TextField 时激活。 focusedErrorBorder：当出现错误并且我们当前专注于该 TextField 时激活。

代码sn-p如下：

TextField(
 enabled: false, // to trigger disabledBorder
 decoration: InputDecoration(
   filled: true,
   fillColor: Color(0xFFF2F2F2),
   focusedBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.red),
   ),
   disabledBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.orange),
   ),
   enabledBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.green),
   ),
   border: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,)
   ),
   errorBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.black)
   ),
   focusedErrorBorder: OutlineInputBorder(
     borderRadius: BorderRadius.all(Radius.circular(4)),
     borderSide: BorderSide(width: 1,color: Colors.yellowAccent)
   ),
   hintText: "HintText",
   hintStyle: TextStyle(fontSize: 16,color: Color(0xFFB3B1B1)),
   errorText: snapshot.error,
 ),
 controller: _passwordController,
 onChanged: _authenticationFormBloc.onPasswordChanged,
                            obscureText: false,
),

disabledBorder：

---

启用边框：

重点边框：

错误边框：

errorFocusedBorder：

希望对你有帮助。

【讨论】：

enabledBorder: outlineInputBorder,;Enabled Border 解决了我的问题。我想将默认颜色更改为蓝色

【参考方案4】：

更改primaryColor和primaryColorDark颜色的代码不会改变边框的颜色，只有点击后颜色保持黑色

必须更改的属性是hintColor

BorderSide 不应该用于此，您需要更改主题。

要使红色默认将主题放在MaterialApp(theme: ...) 中并更改特定小部件的主题，例如将小部件的默认红色更改为黄色，请在小部件周围使用：

new Theme(
  data: new ThemeData(
    hintColor: Colors.yellow
  ),
  child: ...
)

下面是代码和gif：

请注意，如果我们将 primaryColor 颜色定义为黑色，则通过点击小部件将其选择为黑色

但是要改变widget里面的label和text，我们需要设置theme为InputDecorationTheme

以黄色开头的小部件有自己的主题，以红色开头的小部件具有使用函数buildTheme()定义的默认主题

import 'package:flutter/material.dart';

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

ThemeData buildTheme() 
  final ThemeData base = ThemeData();
  return base.copyWith(
    hintColor: Colors.red,
    primaryColor: Colors.black,
    inputDecorationTheme: InputDecorationTheme(
      hintStyle: TextStyle(
        color: Colors.blue,
      ),
      labelStyle: TextStyle(
        color: Colors.green,
      ),
    ),
  );


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      theme: buildTheme(),
      home: new HomePage(),
    );
  


class HomePage extends StatefulWidget 
  @override
  _HomePageState createState() => new _HomePageState();


class _HomePageState extends State<HomePage> 
  String xp = '0';

  @override
  Widget build(BuildContext context) 
    return new Scaffold(
      appBar: new AppBar(),
      body: new Container(
        padding: new EdgeInsets.only(top: 16.0),
        child: new ListView(
          children: <Widget>[
            new InkWell(
              onTap: () ,
              child: new Theme(
                data: new ThemeData(
                  hintColor: Colors.yellow
                ),
                child: new TextField(
                  decoration: new InputDecoration(
                      border: new OutlineInputBorder(),
                      hintText: 'Tell us about yourself',
                      helperText: 'Keep it short, this is just a demo.',
                      labelText: 'Life story',
                      prefixIcon: const Icon(Icons.person, color: Colors.green,),
                      prefixText: ' ',
                      suffixText: 'USD',
                      suffixStyle: const TextStyle(color: Colors.green)),
                )
              )
            ),
            new InkWell(
              onTap: () ,                
              child: new TextField(
                decoration: new InputDecoration(
                    border: new OutlineInputBorder(
                      borderSide: new BorderSide(color: Colors.teal)
                    ),
                    hintText: 'Tell us about yourself',
                    helperText: 'Keep it short, this is just a demo.',
                    labelText: 'Life story',
                    prefixIcon: const Icon(Icons.person, color: Colors.green,),
                    prefixText: ' ',
                    suffixText: 'USD',
                    suffixStyle: const TextStyle(color: Colors.green)),
              )
            )
          ],
        ),
      )
    );
  

【讨论】：

Jannie Theunissen 的答案（目前低于这个）是最新的答案。

【参考方案5】：

enabledBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(10.0),
  borderSide: BorderSide(color: Colors.red)
),

【参考方案6】：

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(4.0)),
      borderSide: BorderSide(width: 1.0),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.grey),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blueGrey),
    ),
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.redAccent),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.orangeAccent),
    ),
    disabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.white),
    ),
    contentPadding: EdgeInsets.all(10.0),
    hintText: 'Tell us about yourself',
    helperText: 'Keep it short, this is just a demo.',
    labelText: 'Life story',
    prefixIcon: const Icon(
      Icons.person,
      color: Colors.green,
    ),
    prefixText: ' ',
    suffixText: 'USD',
    suffixStyle: const TextStyle(color: Colors.green),
  ),
),

【参考方案7】：

最好和最有效的解决方案就是在你的主类中添加主题并添加这样的输入装饰。

theme: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
        border: OutlineInputBorder(
           borderSide: BorderSide(color: Colors.pink)
        )
    ),
)

【参考方案8】：

在您的 lib 文件中

创建一个名为colors的文件夹。

在 colors 文件夹中创建一个 dart 文件并将其命名为 color。

把这段代码粘贴进去

const MaterialColor primaryOrange = MaterialColor(
    _orangePrimaryValue,
    <int, Color>
        50: Color(0xFFFF9480),
        100: Color(0xFFFF9480),
        200: Color(0xFFFF9480),
        300: Color(0xFFFF9480),
        400: Color(0xFFFF9480),
        500: Color(0xFFFF9480),
        600: Color(0xFFFF9480),
        700: Color(0xFFFF9480),
        800: Color(0xFFFF9480),
        900: Color(0xFFFF9480),
    ,
);
const int _orangePrimaryValue = 0xFFFF9480;

转到您的 main.dart 文件并将此代码放入您的主题中

theme:ThemeData(
    primarySwatch: primaryOrange,
),

在你的main.dart 中导入color 文件夹，像这样import 'colors/colors.dart'；

【参考方案9】：

我们已经尝试使用粘贴的 sn-p 自定义搜索框。这段代码对 Flutter 中的各种 TextFiled 装饰很有用。希望这个 sn-p 对其他人有帮助。

Container(
        margin: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
        child:  new Theme(
          data: new ThemeData(
           hintColor: Colors.white,
            primaryColor: Colors.white,
            primaryColorDark: Colors.white,
          ),
          child:Padding(
          padding: EdgeInsets.all(10.0),
          child: TextField(
            style: TextStyle(color: Colors.white),
            onChanged: (value) 
              filterSearchResults(value);
            ,
            controller: editingController,
            decoration: InputDecoration(
                labelText: "Search",
                hintText: "Search",
                prefixIcon: Icon(Icons.search,color: Colors.white,),
                enabled: true,
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                    borderRadius: BorderRadius.all(Radius.circular(25.0))),
                border: OutlineInputBorder(
                    borderSide: const BorderSide(color: Colors.white, width: 0.0),
                    borderRadius: BorderRadius.all(Radius.circular(25.0)))),
          ),
        ),
        ),
      ),

【参考方案10】：

您可以将此代码用于底部工作表以及普通文本字段：

class TextFieldForDropDown extends StatelessWidget 
      final String title;
      final String hintText;
      final TextEditingController textEditingController;
      bool isPassword;
      final Function onTap;
      final bool enable;
      TextFieldForDropDown(this.title, this.hintText, this.textEditingController, this.isPassword = false, this.onTap, this.enable);
      @override
      Widget build(BuildContext context) 
    
        var titleTextStyle = TextStyle(
          color: Color(0xff9098C8),
          fontSize: 12,
          fontWeight: FontWeight.w400,
          fontFamily: "Muli",
        );
    
        var textFieldTextStyle = TextStyle(
          color: Colors.white,
          fontSize: 14,
          fontWeight: FontWeight.w400,
          fontFamily: "Muli",
        );
    
        var borderSides = OutlineInputBorder(borderSide: new BorderSide(color: Color(0xff38406B)));
        var borderSides1 = OutlineInputBorder(borderSide: new BorderSide(color: Color(0xffdae4ff)));
    
        return InkWell(
          onTap: onTap,
          child: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(this.title, style: titleTextStyle),
                SizedBox(height: 8),
                TextFormField(
                  enabled: enable,
                  // onTap: onTap,
                  obscureText: isPassword,
                  style: textFieldTextStyle,
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
                    hintText: this.hintText,
                    hintStyle: titleTextStyle,
                    border: textEditingController.text != "" ? borderSides1 :borderSides,
                    enabledBorder:  textEditingController.text != "" ? borderSides1 :borderSides,
                    disabledBorder: textEditingController.text != "" ? borderSides1 :borderSides,
                    focusedBorder: OutlineInputBorder(borderSide: new BorderSide(color: Color(0xffdae4ff))),
                  ),
                  controller: textEditingController,
                )
              ],
            ),
          ),
        );
      
    

并像这样使用：

TextFieldForDropDown(
                                title: 'Phone Number*',
                                hintText: '[phone]',
                                textEditingController: viewModel.phoneController,
                              ),

【讨论】：

嘿！您能解释一下您的代码并突出显示重要部分吗？仅是代码的答案通常对人们没有太大帮助。

在文本字段的 InputDecoration 中，您可以像我一样根据条件更改边框颜色。

【参考方案11】：

Padding(
            padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
            child: TextField(
              cursorColor: Color.fromRGBO(25, 118, 218, 1),
              decoration: new InputDecoration(
                border: new OutlineInputBorder(
                  borderSide:
                      new BorderSide(color: Color.fromRGBO(25, 118, 218, 1)),
                ),
                focusedBorder: new OutlineInputBorder(
                  borderSide:
                      new BorderSide(color: Color.fromRGBO(25, 118, 218, 1)),
                ),
                labelText: "Edit Phone",
                labelStyle: TextStyle(
                  color: Colors.grey,
                ),
                prefixIcon: const Icon(
                  Icons.phone_outlined,
                  color: Color.fromRGBO(25, 118, 218, 1),
                ),
              ),
            ),
          ),

稍后谢谢我:)