美文网首页Flutterflutter学习
Flutter基础组件(3-3)-ListView数item中的

Flutter基础组件(3-3)-ListView数item中的

作者: 周灬 | 来源:发表于2019-12-10 14:36 被阅读0次

ListView的数据展示和数据刷新、加载更多我们都已经明白了,ListView的点击也是一个需要讲解的东西.
先写一个大的框架方便后期使用:

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的点击事件

在item 上增加FlatButton

Widget _buildItem(BuildContext context,int index){
  return FlatButton(
    onPressed: () => print(index),
    child: Card(
      child: Center(
        child: Text('$index'),
      ),
    ),
  );
}

ListView中的item采用的是FlatButton,这样做的目的是方便编写点击事件,()=> 符号表示传递的是回调函数,不使用的话表示直接执行这个函数.

2.用GestureDetector增加手势的点击事件

使用GestureDetector 手势检测器 可以给 widget添加点击事件
示例代码如下:

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学习知识请联系:QQ(814299221)

相关文章

网友评论

    本文标题:Flutter基础组件(3-3)-ListView数item中的

    本文链接:https://www.haomeiwen.com/subject/jqmbgctx.html