flutter - 颤动中的标签顺序
问题描述
在我的 Windows 应用程序上(界面如下所示: https ://i.stack.imgur.com/SibAC.png )
当我聚焦到 Input-1 并按下键盘上的 Tab 键时,主要焦点将聚焦到 Input-3。有什么方法可以重新排列我的焦点顺序:Input-1 -> Input-2 -> Input-3 -> Input-4 -> Input-5。
注意:这不是颤振文档示例中的选项卡栏/选项卡控制器。
这是我的代码:
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
并指定您希望它们遵循的策略。
推荐阅读
- mongodb - 使用 node-red 中的用户名和密码连接 MongoDB 失败
- python - Python for循环错误:系列中的真值不明确
- r - 使用函数基于现有列创建新列
- python - 创建自定义时间选择器小部件
- python - 具有用户定义的连续概率分布的随机数
- java - Groovy 与 Java / Spring 的集成导致 classcastexception
- python - 如何将 OpenCV Videocapture 与保存的 Keras 模型一起使用?
- powershell - 查找模块-名称 GetStuff | Install-Module 成功,但 Get-Command -Module GetStuff 失败
- google-apps-script - 使用脚本而不是 IMPORTDATA 的有限数据集
- java - 以编程方式隐藏 Android 应用程序中的主页和最近按钮