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 被触发,新的文本值被传递给父组件。
相关推荐
雨季6661 分钟前
Flutter 三端应用实战:OpenHarmony “微光笔记”——在灵感消逝前,为思想点一盏灯
开发语言·javascript·flutter·ui·dart
kirk_wang1 小时前
Flutter艺术探索-Flutter三方库鸿蒙适配实战:从原理到实践
flutter·移动开发·flutter教程·移动开发教程
晚霞的不甘2 小时前
Flutter for OpenHarmony 实现高级视差侧滑菜单:融合动效、模糊与交互动画的现代 UI 设计
flutter·ui·前端框架·交互·鸿蒙
晚霞的不甘3 小时前
Flutter for OpenHarmony构建全功能视差侧滑菜单系统:从动效设计到多页面导航的完整实践
前端·学习·flutter·microsoft·前端框架·交互
恋猫de小郭4 小时前
Flutter 在 Android 出现随机字体裁剪?其实是图层合并时的边界计算问题
android·flutter·ios
2501_944448004 小时前
Flutter for OpenHarmony 衣橱管家App实战 - 智能推荐实现
flutter
菜鸟小芯5 小时前
【开源鸿蒙跨平台开发先锋训练营】DAY8~DAY13 底部选项卡&我的页面功能实现
flutter·harmonyos
灰灰勇闯IT5 小时前
Flutter for OpenHarmony:悬浮按钮(FloatingActionButton)最佳实践 —— 强化核心操作,提升用户效率
flutter·华为·交互
雨季6665 小时前
Flutter 三端应用实战:OpenHarmony “心流之泉”——在碎片洪流中,为你筑一眼专注的清泉
开发语言·前端·flutter·交互
一起养小猫5 小时前
Flutter for OpenHarmony 进阶:表达式解析算法与计算器核心实现
算法·flutter·harmonyos