颤振中的标签顺序
Tab order in flutter
在我的 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 控制器。
这是我的代码:
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,一种依赖于widget创建顺序来描述遍历顺序的策略。
ReadingOrderTraversalPolicy,一种将顺序描述为当前方向性的自然“阅读顺序”的策略。
NumericFocusOrder, 分配数字遍历顺序的焦点顺序。
LexicalFocusOrder 分配基于字符串的词法遍历顺序的焦点顺序。
还有一个关于构建自适应应用程序的非常有趣的部分,其中不同平台的焦点和遍历顺序是其中的一部分,您可以 check it out here
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
中并指定您希望它们遵循的策略。
在我的 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 控制器。
这是我的代码:
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,一种依赖于widget创建顺序来描述遍历顺序的策略。
ReadingOrderTraversalPolicy,一种将顺序描述为当前方向性的自然“阅读顺序”的策略。
NumericFocusOrder, 分配数字遍历顺序的焦点顺序。
LexicalFocusOrder 分配基于字符串的词法遍历顺序的焦点顺序。
还有一个关于构建自适应应用程序的非常有趣的部分,其中不同平台的焦点和遍历顺序是其中的一部分,您可以 check it out here
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
中并指定您希望它们遵循的策略。