ListView的數(shù)據(jù)展示和數(shù)據(jù)刷新立镶、加載更多我們都已經(jīng)明白了,ListView的點(diǎn)擊也是一個需要講解的東西.
先寫一個大的框架方便后期使用:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter App'),),
body: HomePage(),
),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 30,
itemBuilder:_buildItem,
itemExtent: 60,
);
}
}
1.ListView中item的點(diǎn)擊事件
在item 上增加FlatButton
Widget _buildItem(BuildContext context,int index){
return FlatButton(
onPressed: () => print(index),
child: Card(
child: Center(
child: Text('$index'),
),
),
);
}
ListView中的item采用的是FlatButton,這樣做的目的是方便編寫點(diǎn)擊事件,()=> 符號表示傳遞的是回調(diào)函數(shù)突照，不使用的話表示直接執(zhí)行這個函數(shù).
2.用GestureDetector增加手勢的點(diǎn)擊事件
使用GestureDetector 手勢檢測器 可以給 widget添加點(diǎn)擊事件
示例代碼如下：
Widget _buildItem(BuildContext context,int index){
return Container(
height: 60,
color: Colors.cyan,
child: GestureDetector(
child: Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
color: Colors.yellow,
child: Text('123'),
),
onTap: (){
print('haha');
},
),
);
}
想了解更多Flutter學(xué)習(xí)知識請聯(lián)系:QQ(814299221)
