在我的 Windows 应用程序上(界面如下所示:https : //i.stack.imgur.com/SibAC.png)
当我聚焦到 Input-1 并按下键盘上的 Tab 键时,主要焦点将聚焦到 Input-3。有什么办法可以重新安排我的焦点顺序:Input-1 -> Input-2 -> Input-3 -> Input-4 -> Input-5。
注意:这不是 flutter 文档示例中的 Tab bar/tab controller。
这是我的代码:
3个文件在同一个根目录下
main.dart
import 'package:flutter/material.dart';
import 'tab1.dart';
import 'tab2.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Tab oder',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Tab order'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final TextEditingController _controller = TextEditingController();
final FocusNode _focusNode = FocusNode();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Form(
key: GlobalKey<FormState>(),
onChanged: () {
Form.of(primaryFocus!.context!)!.save();
},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
constraints: const BoxConstraints.tightFor(width: 200.0, height: 200.0),
child: TextFormField(
controller: _controller,
focusNode: _focusNode,
decoration: const InputDecoration(
filled: true,
fillColor: Colors.yellow,
),
),
),
const SizedBox(width: 150.0),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
constraints: const BoxConstraints.tightFor(width: 200.0, height: 120.0),
child: Tab1(),
),
Container(
constraints: const BoxConstraints.tightFor(width: 200.0, height: 120.0),
child: Tab2(),
),
],
),
],
),
),
);
}
}
tab1.dart
import 'package:flutter/material.dart';
class Tab1 extends StatefulWidget {
@override
_Tab1State createState() => _Tab1State();
}
class _Tab1State extends State<Tab1> {
final TextEditingController _controller1 = TextEditingController();
final TextEditingController _controller2 = TextEditingController();
final FocusNode _focusNode1 = FocusNode();
final FocusNode _focusNode2 = FocusNode();
@override
build(BuildContext context) {
return Column(
children: [
TextFormField(
controller: _controller1,
focusNode: _focusNode1,
decoration: const InputDecoration(
filled: true,
fillColor: Colors.greenAccent,
),
),
TextFormField(
controller: _controller2,
focusNode: _focusNode2,
decoration: const InputDecoration(
filled: true,
fillColor: Colors.greenAccent,
),
),
],
);
}
}
tab2.dart
import 'package:flutter/material.dart';
class Tab2 extends StatefulWidget {
@override
_Tab2State createState() => _Tab2State();
}
class _Tab2State extends State<Tab2> {
final TextEditingController _controller1 = TextEditingController();
final TextEditingController _controller2 = TextEditingController();
final FocusNode _focusNode1 = FocusNode();
final FocusNode _focusNode2 = FocusNode();
@override
build(BuildContext context) {
return Column(
children: [
TextFormField(
controller: _controller1,
focusNode: _focusNode1,
decoration: const InputDecoration(
filled: true,
fillColor: Colors.greenAccent,
),
),
TextFormField(
controller: _controller2,
focusNode: _focusNode2,
decoration: const InputDecoration(
filled: true,
fillColor: Colors.greenAccent,
),
),
],
);
}
}
您可以通过FocusTraversalGroup实现您想要的行为,使用此小部件可以指定您希望执行遍历的顺序。
这个小部件将遍历策略作为参数,我使用了OrderedTraversalPolicy,但还有其他类似的:
WidgetOrderTraversalPolicy,一种依赖于小部件创建顺序来描述遍历顺序的策略。
ReadingOrderTraversalPolicy,一种将订单描述为当前方向性的自然“阅读顺序”的策略。
NumericFocusOrder,分配数字遍历顺序的焦点顺序。
LexicalFocusOrder分配基于字符串的词法遍历顺序的焦点顺序。
还有一个关于构建自适应应用程序的非常有趣的部分,其中不同平台的焦点和遍历顺序是其中的一部分,您可以在此处查看
class Tab1 extends StatefulWidget {
@override
_Tab1State createState() => _Tab1State();
}
class _Tab1State extends State<Tab1> {
final TextEditingController _controller1 = TextEditingController();
final TextEditingController _controller2 = TextEditingController();
final FocusNode _focusNode1 = FocusNode();
final FocusNode _focusNode2 = FocusNode();
@override
build(BuildContext context) {
return FocusTraversalGroup(
policy: OrderedTraversalPolicy(),
如果您需要更改其他组(如 tab2)的遍历顺序,只需将它们包装在另一个组中FocusTraversalGroup
并指定您希望它们遵循的策略。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句