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