Flutter 介面回呼callback 具體實作案例

前言 ：

各位同學大家好 有段時間沒有給大家更文章了 ，在安卓和IOS 我們常用介面回呼倆進行界面和方法呼叫的時候進行通信，寫法也比較直接明了 今天我們就分享flutter里面怎么使用 ，

準備作業：

需要安裝flutter的開發環境：大家可以去看看之前的教程：
1 win系統flutter開發環境安裝教程: https://www.jianshu.com/p/152447bc8718
2 mac系統flutter開發環境安裝教程：https://www.jianshu.com/p/bad2c35b41e3

效果圖：

具體實作：

我們從日志里面可以看到我們點擊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

QQ 交流群: