Flutter 接口回调callback 具体实现案例

前言：

各位同学大家好有段时间没有给大家更文章了，在安卓和IOS 我们常用接口回调俩进行界面和方法调用的时候进行通信，写法也比较直接明了今天我们就分享flutter里面怎么使用。

准备工作：

需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3

效果图：

QQ截图20201207114550.png
QQ截图20201207114531.png

具体实现：

我们从日志里面可以看到我们点击listview里面item就是在回调方法里面把下标和item里面 text显示内容打印出来的：

import 'package:flutter/material.dart';
typedef _CallBack = void Function(int selectIndex, String selectStr);
class TextList extends StatefulWidget {
  final List dataArr;
  final _CallBack  callback;
  TextList({Key key, this.dataArr,this.callback }) : super(key: key);
  @override
  _TextListState createState() {
    return _TextListState();
  }
}

class _TextListState extends State<TextList> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar:  AppBar(
       title: Text("接口回调列表 "),
      ),
      body: ListView.builder(
        itemCount: widget.dataArr.length,
        itemBuilder: (BuildContext context, int position){
          return   _itemWidget(context, position);
        },
      ),
    );
  }
  Widget _itemWidget(BuildContext  context, int index){
    return GestureDetector(
      child: Center(
        child:Padding(
        padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
          child: Text(widget.dataArr[index]),
        )
      ),
      onTap: (){
        if(widget.callback!=null){
          widget.callback(index,widget.dataArr[index]);
        }
      },
    );
  }
}

我们在TextList 类中定义 dataArr 数组和 callback 方法要在TextList 实例化的从构造方法传入

  final List dataArr;
  final _CallBack  callback;

然后定义一个全局CallBack接口属性：

typedef _CallBack = void Function(int selectIndex, String selectStr);

在listview item 点击事件ontap方法中调用：

   onTap: (){
        if(widget.callback!=null){
          widget.callback(index,widget.dataArr[index]);
        }
      },

TextList 具体实例化调用：

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  TextList(
      dataArr: datalist,
      callback: (index, str){
      print("indexe   -----  >   "+index.toString());
      print("str----  >   "+str);
      },
    );
  }

假数据：

   List  datalist= new List();
  @override
  void initState() {
    super.initState();
    for(var i=0 ; i<20 ;i++){
      datalist.add("第几$i条数据");
    }
  }

完整homepage 代码：

import 'package:flutter/material.dart';
import 'text_list.dart';
/**
 *  创建人：xuqing
 *  创建时间：2020年12月7日10:03:31
 *  类是说明：data 接口回调测试类
 *
 */
class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  @override
  _HomePageState createState() {
    return _HomePageState();
  }
}
class _HomePageState extends State<HomePage> {
  List  datalist= new List();
  @override
  void initState() {
    super.initState();
    for(var i=0 ; i<20 ;i++){
      datalist.add("第几$i条数据");
    }
  }
  @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  TextList(
      dataArr: datalist,
      callback: (index, str){
      print("indexe   -----  >   "+index.toString());
      print("str----  >   "+str);
      },
    );
  }
}

到此flutter的接口回调就讲完了：

最后总结：

flutter的接口回调和java 还是很类似只有flutter 中没有用 interface这个关键字来定义转而用了 typedef 属性来处理我们需要注意一下，这篇文章只是简单讲解写还有很多其他更加灵活的用户我这边就不展开讲了同学们有兴趣可以字私下研究，最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错，麻烦给关注和star，小弟在这里谢过啦也可以加我个人QQ/微信（1693891473）

项目地址：

码云：https://gitee.com/qiuyu123/flutter_callback