Flutter 接口回調callback 具體實現案例

前言：

各位同窗你們好有段時間沒有給你們更文章了，在安卓和IOS 咱們經常使用接口回調倆進行界面和方法調用的時候進行通訊，寫法也比較直接明瞭今天咱們就分享flutter裏面怎麼使用。java

準備工做：

須要安裝flutter的開發環境：你們能夠去看看以前的教程：
1 win系統flutter開發環境安裝教程: https://www.jianshu.com/p/152447bc8718
2 mac系統flutter開發環境安裝教程：https://www.jianshu.com/p/bad2c35b41e3

git

效果圖：

具體實現：

咱們從日誌裏面能夠看到咱們點擊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接口屬性：app

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

在listview item 點擊事件ontap方法中調用：ide

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);
      },
    );
  }

假數據：ui

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的接口回調就講完了：this

最後總結：

flutter的接口回調和java 仍是很相似只有flutter 中沒有用 interface這個關鍵字來定義轉而用了 typedef 屬性來處理咱們須要注意一下，這篇文章只是簡單講解寫還有不少其餘更加靈活的用戶我這邊就不展開講了同窗們有興趣能夠字私下研究，最後但願個人文章能幫助到各位解決問題，之後我還會貢獻更多有用的代碼分享給你們。各位同窗若是以爲文章還不錯，麻煩給關注和star，小弟在這裏謝過啦也能夠加我我的QQ/微信（1693891473）spa

項目地址：

碼雲：https://gitee.com/qiuyu123/flutter_callback