flutter VoidCallBack ValueChange<T> 的函数定义

在 Flutter 中,VoidCallbackValueChanged<T> 是两种常用的回调函数类型,它们通常用于处理事件或传递数据。下面是它们的详细定义及使用方式。

1. VoidCallback 函数类型

VoidCallback 是一个没有参数也没有返回值的回调函数类型。它通常用于简单的事件处理,比如按钮点击、切换状态等。

定义:

dart 复制代码
typedef VoidCallback = void Function();
  • VoidCallback 表示一个没有参数和返回值的回调函数。
  • 这种类型通常用于 UI 控件的事件(如点击、拖动等)。

示例:使用 VoidCallback 处理按钮点击

dart 复制代码
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('VoidCallback Example')),
        body: Center(
          child: MyButton(
            onPressed: () {
              print('Button pressed!');
            },
          ),
        ),
      ),
    );
  }
}

// 自定义按钮组件
class MyButton extends StatelessWidget {
  final VoidCallback onPressed; // VoidCallback 类型的回调

  MyButton({required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed, // 触发 onPressed 回调
      child: Text('Press Me'),
    );
  }
}

在这个例子中:

  • MyButton 组件接收一个 VoidCallback 类型的 onPressed 参数。
  • 当按钮被点击时,onPressed 回调函数被执行,打印消息。

2. ValueChanged 函数类型

ValueChanged<T> 是一个带有一个类型为 T 参数的回调函数类型,并且没有返回值。它通常用于将数据传递给父组件,处理用户输入或组件状态的变化。

定义:

dart 复制代码
typedef ValueChanged<T> = void Function(T value);
  • ValueChanged 表示一个接受类型为 T 的参数,并且没有返回值的回调函数。
  • T 是类型参数,表示这个回调函数接受的数据类型可以是任意类型。

示例:使用 ValueChanged 处理输入变化

dart 复制代码
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ValueChanged Example')),
        body: Center(
          child: MyTextField(
            onChanged: (text) {
              print('Text changed: $text');
            },
          ),
        ),
      ),
    );
  }
}

// 自定义文本输入框组件
class MyTextField extends StatelessWidget {
  final ValueChanged<String> onChanged; // ValueChanged 类型的回调

  MyTextField({required this.onChanged});

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: onChanged, // 触发 onChanged 回调
      decoration: InputDecoration(
        labelText: 'Enter something',
      ),
    );
  }
}

在这个例子中:

  • MyTextField 组件接收一个 ValueChanged 类型的 onChanged 回调函数。
  • 每当文本框内容变化时,onChanged 被触发,新的文本值被传递给父组件。
相关推荐
愚者Pro1 小时前
切换本地 Flutter SDK 版本
flutter
TT_Close2 小时前
别再复制旧 Flutter 工程了,真正拖慢你的不是业务代码
flutter·npm·visual studio code
风华圆舞4 小时前
鸿蒙 + Flutter 下 AI 助手为什么要支持流式输出
人工智能·flutter·harmonyos
风华圆舞8 小时前
鸿蒙 + Flutter 下 AI 页面的状态协同设计
人工智能·flutter·harmonyos
风华圆舞9 小时前
鸿蒙语音播报功能 的 Flutter 侧封装思路
flutter·华为·harmonyos
brycegao3219 小时前
Flutter 国际化富文本解决方案:基于双层占位符的轻量化图文混排方案
flutter·国际化·i18n·富文本·rtl·移动端工程架构
风华圆舞10 小时前
鸿蒙 + Flutter 下美食探索场景为什么 AI 推荐比传统搜索更自然
flutter·harmonyos·美食
MemoriKu10 小时前
Flutter 相册 APP 收尾优化实战:未分析任务横幅持久隐藏与标签回归测试补强
大数据·人工智能·flutter·elasticsearch·机器学习·搜索引擎·重构
风华圆舞11 小时前
鸿蒙 + Flutter 如何把 AI 助手嵌进应用页面里——以食界探味为
人工智能·flutter·harmonyos
风华圆舞12 小时前
鸿蒙 + Flutter 下如何管理 AI 会话——AgentService 设计解析
人工智能·flutter·harmonyos