焦点、键盘与输入体验
通过管理焦点、键盘类型、输入操作和无障碍功能，完善 Flutter 表单，打造流畅的输入体验。
焦点、键盘与输入体验 是 CoddyKit 上的免费 Flutter Mobile Development 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Flutter Mobile Development 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Flutter Mobile Development 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Why Input UX Matters
A working form is not enough — users expect the keyboard, focus order and actions to feel effortless. This lesson covers the polish that makes forms delightful.
FocusNode Basics
A FocusNode represents the focus state of a field. Create one per field you want to control.
final emailFocus = FocusNode();
final passwordFocus = FocusNode();Attaching Focus
Pass the node to a TextField via the focusNode property.
TextField(
focusNode: emailFocus,
decoration: const InputDecoration(labelText: 'Email'),
);Moving Focus Programmatically
Request focus on the next field when the user submits the current one.
TextField(
focusNode: emailFocus,
onSubmitted: (_) => FocusScope.of(context).requestFocus(passwordFocus),
);Keyboard Types
Pick the right keyboardType so the keyboard matches the field.
TextInputType.emailAddressTextInputType.numberTextInputType.phone
TextField(
keyboardType: TextInputType.emailAddress,
);Input Actions
The textInputAction controls the keyboard's action button — Next, Done, Search and more.
TextField(
textInputAction: TextInputAction.next,
);Obscuring & Toggling Passwords
Use obscureText for passwords, and a suffix icon to toggle visibility.
TextField(
obscureText: hidden,
decoration: InputDecoration(
suffixIcon: IconButton(
icon: Icon(hidden ? Icons.visibility : Icons.visibility_off),
onPressed: () => setState(() => hidden = !hidden),
),
),
);Input Formatters
inputFormatters restrict or transform input — for example digits only.
TextField(
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
);Dismissing the Keyboard
Unfocus to dismiss the keyboard when the user taps elsewhere.
GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: const FormBody(),
);Avoiding the Keyboard Overlap
Wrap your form in a scrollable so fields are not hidden behind the keyboard. A SingleChildScrollView handles this automatically.
SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(children: fields),
);Disposing Focus Nodes
FocusNodes are resources — dispose them to avoid leaks.
@override
void dispose() {
emailFocus.dispose();
passwordFocus.dispose();
super.dispose();
}Quick Check
Which property sets the keyboard's bottom-right button to say Next?
Recap
You polished input UX:
- FocusNode and moving focus on submit
- keyboardType and textInputAction
- Password toggles and input formatters
- Dismissing the keyboard and avoiding overlap
These details turn a functional form into a great one.
用 AI 导师学习 Dart — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 22
- 课程
- 88
常见问题解答
「焦点、键盘与输入体验」课时是免费的吗？
是的 — 「焦点、键盘与输入体验」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Flutter Mobile Development 课程的其余内容，请升级到 CoddyKit PRO。 Flutter Mobile Development 课程共包含 4 节课。
「焦点、键盘与输入体验」这节课中我会学到什么？
通过管理焦点、键盘类型、输入操作和无障碍功能，完善 Flutter 表单，打造流畅的输入体验。 你通过在浏览器中直接运行的动手代码来练习 Flutter Mobile Development，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Flutter Mobile Development 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Flutter Mobile Development 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「焦点、键盘与输入体验」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Flutter Mobile Development 课中编写并运行代码吗？
能。每节 Flutter Mobile Development 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。