flutter - 根据 TextField 状态更改 TextField 背景颜色

Question

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

我试图通过使用仅管理是否选择了 TextField 的列表来实现此目的。我使用 GestureDetector 来设置该值。但这似乎太老套了，不是一个好的解决方案，尤其是因为点击 TextField 并不是聚焦它的唯一方法。

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

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

谢谢!

Answer 1

您可以在 FocusScope 中使用 FocusNode 或 Focus 来实现类似的目的。 TextField 本身使用一个 FocusNode 来确定它是否有焦点，然后在焦点状态改变时动画改变颜色。以下是使用 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 的生命周期。引用文档:

Managing a FocusNode means managing its lifecycle, listening for changes in focus, and re-parenting it when needed to keep the focus hierarchy in sync with the widget hierarchy. This widget does all of those things for you. See FocusNode for more information about the details of what node management entails if you are not using a Focus widget and you need to do it yourself.

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