无法更改TextField边框颜色

Question

我试图使用TextField改变我的BorderSide边框的颜色，但它不起作用。

这是我的代码。

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

结果截图如下所示。

Answer 1

新的方法是使用这样的enabledBorder：

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

Answer 2

由于默认主题设置为屏幕，因此不会更改。

因此，只需通过使用新的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)),
          ),
        ));

Answer 3

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

必须更改的属性是hintColor

BorderSide不应该用于此，你需要改变主题。

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

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

下面是代码和gif：

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

但是要更改窗口小部件中的标签和文本，我们需要将主题设置为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)),
              )
            )
          ],
        ),
      )
    );
  }
}

Answer 4

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

1. disabledBorder：启用时激活设置为false
2. enabledBorder：启用时激活设置为true（默认情况下，TextField的enabled属性为true）
3. errorBorder：在出现错误时激活（即验证失败）
4. focusedBorder：当我们单击/聚焦TextField时激活。
5. focusedErrorBorder：当出现错误时激活，我们当前关注的是TextField。

代码段如下：

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：

---

enabledBorder：

focusedBorder：

errorBorder：

errorFocusedBorder：

希望它能帮到你。

Answer 5

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