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

Posted 2023-03-07

【中文标题】Flutter/Dart 如何将索引从 Listview.builder 传递到项目小部件

【英文标题】：Fluter/Dart How to pass index from Listview.builder to item widget

【发布时间】：2019-12-12 17:44:48

【问题描述】：

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

在班级Timeline 我在 Streambuilder 中嵌入了一个 Listview.builder。

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),
          )
        ],
      ),
    );
  

感谢任何帮助。

【参考方案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),
          )
        ],
      ),
    );
  

截图：

【讨论】：

由于不知道应该构建哪个项目而引发错误。我猜我需要在return语句中实现```final item```

所以您根本看不到您的列表吗？此外，您的Post 不会占用item，因此除非您更改Post，否则您无法通过它。

查看我编辑的代码，我进行了测试，我的答案似乎工作正常。

是的，这行得通！当您按下图标时，它实际上是在删除该项目吗？我通过return Post(deletePost: deletePost, index: index, title: 'Test', imageUrl: 'https://www.google.com',); 并打电话给IconButton( onPressed: () => widget.removePost(widget.index), icon: Icon(Icons.delete), ) 并没有任何反应:(

太棒了。请将其标记为答案，以帮助其他有类似问题的人。它不会在我结束时删除，因为我没有你的帖子，但如果你正确传递它应该对你很好。