Flutter ListView项目单击侦听器

Question

我有一个ListView，我想导航到项目单击的下一页。

我需要我的点击项目的索引ListView。我知道可以使用来完成Controller。但是我找不到任何例子。

Answer 1

为GestureRecognizer（或按钮）添加onTap时，闭包可以捕获在itemBuilder中传递的索引。

例如

 body: ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                child: Text(index.toString()),
                onTap: () => Scaffold
                    .of(context)
                    .showSnackBar(SnackBar(content: Text(index.toString()))),
              );
            },
            itemCount: 10));

此代码将显示一个快餐栏，其中包含您已点击的ListItem的索引。

获得项目索引后，您可以使用此问题的其他答案提供的代码导航到新页面。

Answer 2

如果您使用ListView.builder，则可以使用ListTile来添加onTap。这将确保您具有材料波纹效果。

...

List<Post> posts = ...; // your list of contents.

... 


child: ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    var post = posts[index];

    return ListTile(
      title: Text(post.title),
      subtitle: Text('My new post'),
      onTap: () => onTapped(post),
    );
  },
  itemCount: posts.length,
),


...

void onTapped(Post post) {
    // navigate to the next screen.
}

Answer 3

另一种选择是使用InkWell. InkWell包括一个很好的水龙头涟漪效应，而GestureDetector它没有。

https://api.flutter.dev/flutter/material/InkWell-class.html

像这样使用：

return Scaffold(
    appBar: AppBar(title: Text("Hello World")),
    body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            child: Text(index.toString()),
            onTap: () => Scaffold.of(context)
                .showSnackBar(SnackBar(content: Text(index.toString()))),
          );
        },
        itemCount: 10)
);

Answer 4

Flutter文档中有一个实际上就是这种情况的示例（导航到单击项目的下一页）。

正如其他人所说的，请onTap在中使用ListView.builder。只是以为我会发布示例的链接，以防其他人需要更完整的解释。

将数据发送到新屏幕-flutter.io

...    

final List<Todo> todos;

...

ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(todos[index].title),
      onTap: () {
        //Go to the next screen with Navigator.push
      },
    );
  },
);

Answer 5

您应该在 ListView 中的项目中使用 onPressed 方法（或添加一个 GestureDetector），然后使用 Navigator，类似于下面的代码段，其中 AboutScreen 是您要转到的下一个页面。

onPressed: () {
 Navigator.push(
   context,
   MaterialPageRoute(builder: (context) => AboutScreen()),
 );
}

Answer 6

ListViewpage.dart

        class sta extends StatefulWidget {
          const sta({Key? key}) : super(key: key);
        
          @override
          State<sta> createState() => _staState();
        }
        
        var isShow = false;
        var getdata = Diohelper.getdata();
        
        class _staState extends State<sta> {
          @override
          Widget build(BuildContext context) {
            List mwidge = [];
            int index = 0;
            getdata.forEach((element) {
              element.index = index;
              mwidge.add(ListTile(

                onTap: () {
// on click listner for move to another widget or activity (android native)
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => 
    // here element passing to the detail page element contain index other details
    DetailPage(element)));
                },
                hoverColor: Colors.amber,
                title: Text(element.name.toString()),
                trailing: element.isShow
                    ? SizedBox(
                        width: 100,
                        height: 50,
                        child: OutlinedButton(
                            onPressed: () {
                              Scaffold.of(context).showSnackBar(
                                  SnackBar(content: Text(element.name.toString())));
                            },
                            child: Text("Show")),
                      )
                    : Container(
                        width: 100,
                      ),
              ));
              index++;
            });
            return GestureDetector(
              child: Center(
                child: ListView(
                  children: [...mwidge],
                ),
              ),
            );
          }
        }

详情页.dart

class DetailPage extends StatefulWidget {
  productModel model;

  DetailPage(this.model, {Key? key}) : super(key: key);

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
          child: ListView(
            children: [
              Text("Name:" + widget.model.name.toString()),
              Text("Category:" + widget.model.category.toString()),
              Text("price:" + widget.model.price.toString())
            ],
          ),
        ));
  }
}

完整代码：

import 'package:flutter/material.dart';

void main() =>
    runApp(MaterialApp(home: Scaffold(appBar: AppBar(), body: sta())));

class sta extends StatefulWidget {
  const sta({Key? key}) : super(key: key);

  @override
  State<sta> createState() => _staState();
}

var isShow = false;
var getdata = Diohelper.getdata();

class _staState extends State<sta> {
  @override
  Widget build(BuildContext context) {
    List mwidge = [];
    int index = 0;
    getdata.forEach((element) {
      element.index = index;
      mwidge.add(ListTile(
        onTap: () {
          Navigator.push(context,
              MaterialPageRoute(builder: (context) => DetailPage(element)));
        },
        hoverColor: Colors.amber,
        title: Text(element.name.toString()),
        trailing: element.isShow
            ? SizedBox(
                width: 100,
                height: 50,
                child: OutlinedButton(
                    onPressed: () {
                      Scaffold.of(context).showSnackBar(
                          SnackBar(content: Text(element.name.toString())));
                    },
                    child: Text("Show")),
              )
            : Container(
                width: 100,
              ),
      ));
      index++;
    });
    return GestureDetector(
      child: Center(
        child: ListView(
          children: [...mwidge],
        ),
      ),
    );
  }
}

class DetailPage extends StatefulWidget {
  productModel model;

  DetailPage(this.model, {Key? key}) : super(key: key);

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
          child: ListView(
            children: [
              Text("Name:" + widget.model.name.toString()),
              Text("Category:" + widget.model.category.toString()),
              Text("price:" + widget.model.price.toString())
            ],
          ),
        ));
  }
}

class productModel {
  String? name;
  String? price;
  String? category;
  bool isShow = false;
  int index = 0;

  productModel({this.name, this.price, this.category, this.isShow = false});

  productModel.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    price = json['price'];
    category = json['category'];
    isShow = json['isShow'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['name'] = this.name;
    data['price'] = this.price;
    data['category'] = this.category;
    data['isShow'] = this.isShow;
    return data;
  }
}

class Diohelper {
  static List<productModel> getdata() {
    List<productModel> list = [];
    list.add(productModel(name: "broast", price: "100", category: "chicken"));
    list.add(productModel(name: "mandi", price: "100", category: "chicken"));
    list.add(productModel(name: "mandi", price: "100", category: "veg"));

    return list;
  }
}

Dartpad 或实时代码