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

实时监听输入变化 → onChanged

Dart 复制代码

import 'package:flutter/material.dart';

class SearchExample extends StatefulWidget {
  const SearchExample({super.key});

  @override
  State<SearchExample> createState() => _SearchExampleState();
}

class _SearchExampleState extends State<SearchExample> {
  // 存储当前输入的搜索关键词
  String _searchText = "";

  // 这个就是被调用的onSearch方法
  void onSearch(String value) {
    // 这里可以写实际的搜索逻辑，比如网络请求、过滤列表等
    setState(() {
      // 把输入的新值保存到状态中
      _searchText = value;
    });
  }

  @override
  Widget 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

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

Dart 复制代码

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

点击输入框 → onTap

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

Dart 复制代码

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

表单验证 → validator

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

Dart 复制代码

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

点击外部收起键盘 → onTapOutside

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

Dart 复制代码

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

`onEditingComplete`

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

Dart 复制代码

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

123