我只想让 TextField 移动焦点
Flutter Web:
我只想让 TextField 移动焦点。
向下键: aaa > bbb> ccc> ddd
向上键: ddd > ccc> bbb> aaa
此示例的结果从 a 到 c 。 我想覆盖文本字段前面的两个图标的焦点。
- 如何将焦点仅移动到 TextField?
- onKey:焦点节点
- 您能看出哪个 TextField 获得焦点吗?
class TextBlockSample extends StatefulWidget {
const TextBlockSample({Key? key}) : super(key: key);
@override
State<TextBlockSample> createState() => _TextBlockSampleState();
}
class _TextBlockSampleState extends State<TextBlockSample> {
late List<TextEditingController> _textControllers;
late List<FocusNode> _textFocusNodes;
List<String> users = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
int _currentFieldindex = 0;
@override
void initState() {
_textControllers =
List.generate(5, (index) => TextEditingController(text: users[index]));
_textFocusNodes = List.generate(5, (index) => FocusNode());
super.initState();
}
@override
void dispose() {
_textControllers.map((e) => e.dispose()).toList();
_textFocusNodes.map((e) => e.dispose()).toList();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Focus(
onKey: (FocusNode focusNode, RawKeyEvent event) {
focusNode.unfocus();
int _focusIndex =
_textFocusNodes.indexWhere((element) => element.hasFocus);
if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
focusNode.requestFocus(_textFocusNodes[_focusIndex + 1]);
return KeyEventResult.handled;
}
if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
focusNode.requestFocus(_textFocusNodes[_focusIndex - 1]);
}
return KeyEventResult.ignored;
},
child: FocusScope(
child: Container(
child: Column(
children:
users.mapIndexed((index, user) => inputText(index)).toList(),
),
),
),
);
}
Widget inputText(int index) {
return Container(
height: 60,
width: 500,
child: Row(
children: [
IconButton(
icon: const Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.label_important_outline),
onPressed: () {},
),
Container(
width: 300,
height: 50,
child: TextFormField(
controller: _textControllers[index],
focusNode: _textFocusNodes[index],
textInputAction: TextInputAction.next,
onChanged: (v) {
print('changed:$v');
},
onTap: () {
_currentFieldindex = index;
},
),
)
],
),
);
}
}
Flutter Web:
I want only the TextField to move the focus.
down key: aaa > bbb > ccc > ddd
up key: ddd > ccc > bbb > aaa
The result for this sample goes from a to c .
I want to override the focus of the two icons in front of the textfield.
- How to move focus to TextField only?
- onKey: focusNode
- Can you tell which TextField is focused?
class TextBlockSample extends StatefulWidget {
const TextBlockSample({Key? key}) : super(key: key);
@override
State<TextBlockSample> createState() => _TextBlockSampleState();
}
class _TextBlockSampleState extends State<TextBlockSample> {
late List<TextEditingController> _textControllers;
late List<FocusNode> _textFocusNodes;
List<String> users = ['aaa', 'bbb', 'ccc', 'ddd', 'eee'];
int _currentFieldindex = 0;
@override
void initState() {
_textControllers =
List.generate(5, (index) => TextEditingController(text: users[index]));
_textFocusNodes = List.generate(5, (index) => FocusNode());
super.initState();
}
@override
void dispose() {
_textControllers.map((e) => e.dispose()).toList();
_textFocusNodes.map((e) => e.dispose()).toList();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Focus(
onKey: (FocusNode focusNode, RawKeyEvent event) {
focusNode.unfocus();
int _focusIndex =
_textFocusNodes.indexWhere((element) => element.hasFocus);
if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
focusNode.requestFocus(_textFocusNodes[_focusIndex + 1]);
return KeyEventResult.handled;
}
if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
focusNode.requestFocus(_textFocusNodes[_focusIndex - 1]);
}
return KeyEventResult.ignored;
},
child: FocusScope(
child: Container(
child: Column(
children:
users.mapIndexed((index, user) => inputText(index)).toList(),
),
),
),
);
}
Widget inputText(int index) {
return Container(
height: 60,
width: 500,
child: Row(
children: [
IconButton(
icon: const Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: const Icon(Icons.label_important_outline),
onPressed: () {},
),
Container(
width: 300,
height: 50,
child: TextFormField(
controller: _textControllers[index],
focusNode: _textFocusNodes[index],
textInputAction: TextInputAction.next,
onChanged: (v) {
print('changed:$v');
},
onTap: () {
_currentFieldindex = index;
},
),
)
],
),
);
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论