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，小弟在这里谢过啦

项目地址：

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