如何将索引从 Listview.builder 传递到项目小部件？

Question

我想在 Listview.builder 中传递 listview 项目的索引，以便在项目小部件中从中删除这些项目。

在Timeline类中，我将 Listview.builder 嵌入到 Streambuilder 中。

void removePost(index) {
    setState(() {
      posts.remove(index);
    });
  }

@override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
        body: StreamBuilder<QuerySnapshot>(
          stream: postRef.orderBy('timestamp', descending: false).snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return circularProgress();
            }
            List<Post> posts = snapshot.data.documents
                .map((doc) => Post.fromDocument(doc))
                .toList();
            if (posts.isEmpty) {
              return Text("No Posts");
            }
            return ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                final item = posts[index];
                return Post/Item( //??
                  ????? //What comes here? How to pass the index?
                );
              },
            );
          },
        ));
  }

在我的班级Post中，项目是构建的。 我想按图标按钮删除相关帖子，但不知道如何传递索引。

class Post extends StatefulWidget {
  final int index;
  final String title;
  final String imageUrl;
  final Function(Post) removePost;

  const Post({Key key, this.index, this.title, this.imageUrl, this.removePost})
      : super(key: key);

  factory Post.fromDocument(DocumentSnapshot doc) {
    return Post(
      title: doc['title'],
      imageUrl: doc['imageUrl'],
    );
  }

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

class _PostState extends State<Post> {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Container(
      height: SizeConfig.blockSizeHorizontal * (100 / 3 + 3),
      child: Column(
        children: <Widget>[
          Text(widget.title),
          Text(widget.imageUrl),
          IconButton(
            onPressed: () => widget.removePost(this.widget),
            icon: Icon(Icons.delete),
          )
        ],
      ),
    );
  }
}

任何帮助表示赞赏。

Answer 1

@Juju，你试过了吗，

return ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                final item = posts[index];
                return Post(index: index, title: 'Test', imageUrl: 'https://www.google.com',);
              },
            );

测试：

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Test'),
            ),
            body: Container(
                child: ListView.builder(
                  itemCount: 3,
                  itemBuilder: (context, index) {
                    //final item = posts[index];
                    return Post(index: index, title: 'Test', imageUrl: 'https://www.google.com',);
                  },
                ),
            )
        )
    );
  }
}

class Post extends StatefulWidget {
  final int index;
  final String title;
  final String imageUrl;
  final Function(Post) removePost;

  const Post({Key key, this.index, this.title, this.imageUrl, this.removePost})
      : super(key: key);

//  factory Post.fromDocument(DocumentSnapshot doc) {
//    return Post(
//      title: doc['title'],
//      imageUrl: doc['imageUrl'],
//    );
//  }

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

class _PostState extends State<Post> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: Column(
        children: <Widget>[
          Text(widget.title + ' ' + widget.index.toString()),// Testing passed index here
          Text(widget.imageUrl),
          IconButton(
            onPressed: () => widget.removePost(this.widget),
            icon: Icon(Icons.delete),
          )
        ],
      ),
    );
  }
}

截屏：