您可以在
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());
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(),
),
);
}
}
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