Question

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

我尝试通过使用仅管理 TextField 是否被选中的 List 来实现这一点。我使用 GestureDetector 来设置该值。但这似乎太老套，无法成为一个好的解决方案，尤其是因为点击 TextField 并不是聚焦它的唯一方法。

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

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

谢谢！

Answer 1

您可以在 FocusNode 中使用 Focus 或 FocusScope 来实现类似的功能。 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 的生命周期。引用自文档：

<块引用>

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

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

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

1 个答案: