Flutter基础（②④事件回调与交互处理）

实时监听输入变化 → onChanged

import 'package:flutter/material.dart';class SearchExample extends StatefulWidget {const SearchExample({super.key});@overrideState<SearchExample> createState() => _SearchExampleState();
}class _SearchExampleState extends State<SearchExample> {// 存储当前输入的搜索关键词String _searchText = "";// 这个就是被调用的onSearch方法void onSearch(String value) {// 这里可以写实际的搜索逻辑，比如网络请求、过滤列表等setState(() {// 把输入的新值保存到状态中_searchText = value;});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text("搜索示例")),body: Padding(padding: const EdgeInsets.all(16.0),child: Column(children: [// 搜索输入框TextField(decoration: const InputDecoration(hintText: "请输入搜索内容...",border: OutlineInputBorder(),),// 当输入内容变化时，会触发这个回调onChanged: (value) {// 把输入的最新值传递给onSearch方法onSearch(value);},),const SizedBox(height: 20),// 显示当前搜索内容Text("你输入的是: $_searchText")],),),);}
}

用户在输入框中输入文字（比如 "苹果"）
输入框检测到内容变化，触发 onChanged 回调
(value) 中的 value 此时就是 "苹果" 这个字符串
执行 onSearch(value)，也就是把 "苹果" 传给 onSearch 方法
onSearch 方法里通过 setState 更新 _searchText 的值
界面刷新，下方的文本会显示 "你输入的是：苹果"

如果没有这个回调，输入框的内容变化就无法被程序感知，也就无法实现实时显示、搜索过滤等功能了

回车 / 完成提交 → onSubmitted

作用：当用户完成输入并提交时触发（比如按键盘的 "完成"、"回车" 键）
场景：适合点击提交后再处理输入（如搜索、登录按钮的回车提交）

TextField(onSubmitted: (value) {print("用户提交了：$value"); // 比如用户输入后按回车，会执行这里},decoration: InputDecoration(hintText: "输入后按回车试试"),
)

点击输入框 → onTap

作用：当用户点击输入框时触发（还没开始输入，只是点击激活输入框）
场景：可以在点击时做一些预处理，比如弹出选择器、清空默认提示等

TextField(onTap: () {print("输入框被点击了");// 比如：弹出日期选择器showDatePicker(context: context,initialDate: DateTime.now(),firstDate: DateTime(2000),lastDate: DateTime(2100),);},decoration: InputDecoration(hintText: "点击我试试"),
)

表单验证  → validator

作用：表单验证回调，配合 Form 使用，用于校验输入内容是否合法
返回值：如果验证失败，返回错误提示文字；验证成功返回 null

TextFormField(validator: (value) {if (value == null || value.isEmpty) {return "请输入内容"; // 为空时提示错误}if (value.length < 3) {return "至少输入3个字符"; // 长度不够时提示}return null; // 验证通过},decoration: InputDecoration(labelText: "请输入"),
)

点击外部收起键盘 → onTapOutside

作用：当用户点击输入框外部时触发（比如输入时点击屏幕其他地方）
场景：可以在点击外部时让输入框失去焦点，收起键盘

TextField(onTapOutside: (event) {// 点击外部时，让输入框失去焦点FocusManager.instance.primaryFocus?.unfocus();},decoration: InputDecoration(hintText: "点击外部收起键盘"),
)

onEditingComplete

作用：当输入框编辑完成（比如按 "完成" 键）且输入框失去焦点时触发
区别：和 onSubmitted 类似，但更强调 "编辑结束且失去焦点"（比如按完成后，输入框会自动失去焦点）

TextField(onEditingComplete: () {print("编辑完成，输入框失去焦点了");},decoration: InputDecoration(hintText: "输入后按完成"),
)

123