根据 TextField state 更改 TextField 背景颜色

Question

我目前正在尝试实现一个 TextField，它应该根据文本字段的 state 更改背景颜色（未聚焦，聚焦，错误）。

我试图通过使用仅管理是否选择 TextField 的 List 来实现这一点。 我使用 GestureDetector 来设置该值。 但这似乎太老套了，不能成为一个好的解决方案，尤其是因为点击 TextField 并不是集中注意力的唯一方法。

在这一点上，我希望有一种方法可以获取 TextField Widget 用来显示适当边框样式的相同信息。 但我不确定是否可以访问这些信息。 非常感谢您提供有关如何执行此操作的提示。

我也在想我可以为此使用 FocusScope，但我找不到在单个 TextFormField 上调用.hasFocus 的方法，因为它只显示是否选择了整个表单中的一个 TextFormField，而不是选择哪个。

谢谢！

Answer 1

您可以在FocusScope中使用FocusNode或Focus来实现类似的效果。 TextField本身使用一个FocusNode来确定它是否有焦点，然后在焦点 state 发生变化时动画颜色变化。 这是使用Focus和Builder仅重建更改焦点的TextFields的示例实现：

https://dartpad.dev/8488f470b166e4235b64d3ba568b6ba6?null_safety=true

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}
/// This is the private State class that goes with MyStatefulWidget.
class MyStatelessWidget extends StatelessWidget {
  
  const MyStatelessWidget();
  
  @override
  Widget build(BuildContext context) {
    return FocusScope(
      debugLabel: 'Scope',
      autofocus: true,
      child: Form(
        child: Column(
          children: [
            Focus(
              debugLabel: 'TextField1',
              child: Builder(
                builder: (BuildContext context) {
                  final FocusNode focusNode = Focus.of(context);
                  final bool hasFocus = focusNode.hasFocus;
                  return TextField(
                    decoration: InputDecoration(
                      fillColor: hasFocus ? Colors.green : Colors.white,
                      filled: true
                    )
                  );
                },
              ),
            ),
            Focus(
              debugLabel: 'TextField2',
              child: Builder(
                builder: (BuildContext context) {
                  final FocusNode focusNode = Focus.of(context);
                  final bool hasFocus = focusNode.hasFocus;
                  return TextField(
                    decoration: InputDecoration(
                      fillColor: hasFocus ? Colors.green : Colors.white,
                      filled: true
                    )
                  );
                }
              )
            )
          ],
        ),
      ),
    );
  }
}

您当然也可以直接使用FocusNode 。 为此，您可能必须将TextFields包装到StatefulWidget中，然后向所使用的FocusNode添加一个侦听器，以便在焦点更改时触发重建（使用setState ）。 但请注意，您需要管理此FocusNode的生命周期。 从文档中引用：

管理 FocusNode 意味着管理它的生命周期，监听焦点的变化，并在需要时重新设置它的父节点，以保持焦点层次结构与小部件层次结构同步。 这个小部件为您完成所有这些事情。 如果您不使用 Focus 小部件并且需要自己进行操作，请参阅 FocusNode 以获取有关节点管理所需的详细信息的更多信息。

https://api.flutter.dev/flutter/widgets/Focus-class.html