首页 > 编程知识 正文

flutter页面跳转回调,flutter 方法

时间:2023-05-04 11:06:27 阅读:251325 作者:4100

文章目录 一、前言二、示例代码二、函数三、定义一个函数变量:四、函数回调的写法1-Function:五、函数回调的写法2-typedof:六、函数回调的写法3-系统默认:

一、前言

如果对回调函数概念了解的话可以跳过本段内容和第二段内容

在实际开发工作中,有些时候会需要用到回调函数。对应实际生活中的例子,就好像你在网上定了个外卖,然后外卖会在某个时刻送到你手里。在这期间你可以做其他的事情,也不需要关注外卖是怎么做的,怎么送到你手里。

所以回调函数常常用在对某个事件执行时间不确定,需要在这个事件出结果后能主动通知自己的程序逻辑。在程序中的例子就好像是,去执行了一段逻辑,但是不知道这个逻辑什么时候返回结果,需要在逻辑执行完后告诉自己结果再进行下一步操作。

在Flutter中的话可以举这样一个例子,假如有个功能是一个类似于音乐播放器的功能(这个音乐播放器一般来说都是一个单独的模块,使用系统的或者第三方的,反正很少自己去写)。我们需要在音乐播放完毕的时候告诉我们音乐放完了。因为我们不知道音乐什么时候会播放完,所以这时候就需要使用回调函数了。

下面根据这个功能做一个简单的演示程序(这个演示程序没有页面,可以在https://dartpad.cn/ 中进行测试)。后续的几种接口回调的方式都是不同的接口回调的改写

二、示例代码

这个示例代码是一个音乐播放器的代码,三秒后音乐播放停止触发接口回调。

main(){ MediaPlayer mediaPlayer = MediaPlayer(); mediaPlayer.setCompleteCallbackListener((){ print("播放结束了"); }); mediaPlayer.start();}//播放器class MediaPlayer{ Function completeCallback; start(){ print("开始播放音乐"); //以下为延迟3秒后停止音乐播放器 Future.delayed(Duration(seconds: 3)) .then((value) => completeCallback() ); } setCompleteCallbackListener(Function completeCallback){ this.completeCallback = completeCallback; }} 二、函数

一般来说回调函数都是使用函数来写的,在Dart中,函数是的类型使用Function进行表示。简单示例如下(关于函数的详细解释不是本篇重点):

//省略返回值test1(){ print('111111');}//携带返回值void test2(){ print('22222222');} 三、定义一个函数变量:

Dart中可以将函数定义为一个变量,代码如下:

import 'package:flutter_test/flutter_test.dart';main(){ test('测试函数', (){ function1(); });}final Function function1 = (){ print('YM---->函数调用');}; 四、函数回调的写法1-Function:

Dart里面可以把函数作为形参使用,因此回调函数可以使用以下写法:

import 'package:flutter_test/flutter_test.dart';main(){ test('测试函数', (){ testF((){ print('YM---->回调函数触发'); }); });}void testF(Function callBack){ callBack();}

根据上述知识可以将函数变量赋值与调用的地方分开,来满足实际开发中业务的需要,代码如下:

import 'package:flutter_test/flutter_test.dart';main(){ test('测试函数', (){ testF((){ print('触发回调函数'); }); testF1(); });}Function function1;void testF(Function callBack){ function1 = callBack;}void testF1(){ function1();}

在实际业务中有时候会在函数中传递一些参数,所以代码可以改写为以下方式:

import 'package:flutter_test/flutter_test.dart';main(){ test('测试函数', (){ testF((int result){//添加参数,类型为int print('触发回调函数:$result'); }); testF1(); });}Function function1;void testF(Function callBack){ function1 = callBack;}void testF1(){ function1(10);} 五、函数回调的写法2-typedof:

通过上述方式可以发现,函数回调无法限定参数和返回值,这样在编码中容易出现很多潜在的错误,因此可以使用typedof进行限制,代码如下:

ps:typedef的含义是给某一种特定的函数类型起了一个名字,可以认为是一个类型的别名。这样在使用过程中就会进行类型检查

import 'package:flutter_test/flutter_test.dart';main(){ test('测试函数', (){ testF((int result){//添加参数,类型为int print('触发回调函数:$result'); }); });}// typedef FunctionTest = Function();//定义成这样也是可以的typedef Function2<int> = void Function(int result);//限定参数和返回值void testF(Function2<int> function2){ function2(12);} 六、函数回调的写法3-系统默认:

以上的代码属于Dart中的写法,可以说各个平台都可以使用,不过在日常开发中Flutter也提供了一些默认的回调函数,使我们日常开发更加简洁,这里简单举几个例子,代码如下:

VoidCallback无参回调

这里要注意导入相应包import 'package:flutter/cupertino.dart';

import 'package:flutter/cupertino.dart';import 'package:flutter_test/flutter_test.dart';main(){ test('测试函数', (){ testF((){ print('触发回调函数'); }); testF2(); });}VoidCallback _voidCallback;void testF(VoidCallback callback){ _voidCallback = callback;}void testF2(){ _voidCallback();}

ValueChanged有参回调

这里要注意导入相关的包import 'package:flutter/cupertino.dart';

import 'package:flutter/cupertino.dart';import 'package:flutter_test/flutter_test.dart';main(){ test('测试函数', (){ testF((int result){ print('触发回调函数:$result'); }); testF2(); });}ValueChanged<int> _valueCallback;void testF(ValueChanged<int> callback){ _valueCallback = callback;}void testF2(){ _valueCallback(10);}

关于系统更多的回调函数,可以查看系统源码.

ps: 以上定义的参数类型可以省略,只写参数名,不过为了规范以及减少错误,最好写上

JavaScript事件循环的概念是什么React中的权限组件设计问题小结

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。