我目前正在尝试实现一个 TextField,它应该根据文本字段的状态(未聚焦、聚焦、错误)更改背景颜色。
我尝试通过使用仅管理 TextField 是否被选中的 List 来实现这一点。我使用 GestureDetector 来设置该值。但这似乎太老套,无法成为一个好的解决方案,尤其是因为点击 TextField 并不是聚焦它的唯一方法。
此时,我希望有一种方法可以获得与 TextField 小部件用于显示适当边框样式的相同信息。但我不确定是否可以访问这些信息。非常感谢您提供有关如何执行此操作的提示。
我还想我可以为此使用 FocusScope,但是我找不到在单个 TextFormField 上调用 .hasFocus 的方法,因为它只显示是否选择了整个 Form 中的一个 TextFormField 而不是选择了哪个.
谢谢!
答案 0 :(得分:2)
您可以在 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 以了解有关节点管理需要什么的详细信息的更多信息。