Question

我正在尝试更改focusColor中的TextFormField。

TextFormField(
            maxLines: 1,
            autofocus: false,
            decoration: InputDecoration(
              focusColor: Colors.green,
              hintText: 'Email',
              icon: Icon(Icons.email),
            ))

只要TextFormField成为焦点，其边框和图标就会变成蓝色。我希望通过更改focusColor可以覆盖此行为，但是例如当我抛出Colors.green时，它似乎没有任何作用。

当焦点对准时，如何设置其他颜色？

Answer 1

伴侣将其放入您的

MaterialApp(theme: themeData()),

ThemeData themeData() {
  return ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      border: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
      focusedBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
      enabledBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
      errorBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
      focusedErrorBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
        ),
 );
}

您刚刚为TextFormField量身定制了一切

Answer 2

我找到的最简单的方法是用Theme小部件包装。由于TextField或TextFormField在聚焦时将原色作为边框和图标颜色，因此我们可以

Theme(
  data: Theme.of(context).copyWith(primaryColor: Colors.green),
  child: TextFormField(
    maxLines: 1,
    autofocus: false,
    decoration: InputDecoration(
      hintText: 'Email',
      icon: Icon(Icons.email),
    ),
  ),
),

希望这可以解决您的查询。

Answer 3

首先，您需要初始化2件事：

FocusNode focusNode = FocusNode();
Color color = Colors.green;

第二，您需要调用addListener

@override
  void initState() {
    focusNode.addListener(() {
      setState(() => color = focusNode.hasFocus ? Colors.red : Colors.green);
    });
    super.initState();
  }

第三，分配focusNode，为TextFormField的cursorColor和prefixIcon属性添加颜色。您可能会错过的是InputDecoration的focusedBorder属性。

    TextFormField(
      focusNode: focusNode,
      cursorColor: color,
      decoration: InputDecoration(
        prefixIcon: Icon(
          Icons.ac_unit,
          color: color,
        ),
        enabledBorder:
            OutlineInputBorder(borderSide: BorderSide(color: Colors.green)),
        focusedBorder:
            OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),
      ),
    ),

Answer 4

有一种最简单的方法可以自定义 TextFormField 和所有其他材料组件。您只需要自定义主要和次要（强调）颜色。


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    final theme = ThemeData();
    return MaterialApp(
      title: _title,
      theme: theme.copyWith(
        primaryColor: Colors.green, // DEPRECATED WAY
        accentColor: Colors.red, // DEPRECATED WAY
        colorScheme: theme.colorScheme.copyWith(
          secondary: Colors.red, // NEW WAY 
          primary: Colors.green, // NEW WAY
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

https://dartpad.dev/1a28bdd9203250d3226cc25d512579ec?null_safety=true

由于最近对 MaterialApp (https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties ) 的 ThemeData 进行了迁移，因此我将 NEW WAY 和 DEPRECATED WAY 放在了评论中。上面的代码适用于使用旧样式和新样式的组件。

更改TextFormField的颜色

4 个答案: