如何将 ListView 构建器与提供程序一起使用？

Posted 2023-02-23

【中文标题】如何将 ListView 构建器与提供程序一起使用？

【英文标题】：How to use ListView builder with Providers?

【发布时间】：2020-10-24 22:50:29

【问题描述】：

我正在尝试使用 ListView Builder 和 Provider 创建水平滚动卡片。

Like this one

还有其他方法可以达到同样的效果吗？

它说

══╡ 小部件库发现异常╞═══════════════════════╕═══╕═␕═════════════════ ═════════════════════ 在构建 BookTile(dirty) 时引发了以下 ProviderNotFoundError： 错误：在此 BookTile 小部件上方找不到正确的提供程序

要修复，请：

确保 Provider 是此 BookTile 小部件的祖先 向 Provider 提供类型 向消费者提供类型 向 Provider.of() 提供类型 始终使用包导入。例如：`import 'package:my_app/my_code.dart'; 确保使用了正确的context。

我的代码

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/files.dart';
import 'bookitem.dart';

class BookTile extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final booksData = Provider.of<Files>(context);
    final books = booksData.items;

    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: books.length,
      itemBuilder: (ctx, i) => ChangeNotifierProvider.value(
        value: books[i],
        child: BookItem(),
      ),
    );
  


class BookItem extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final book = Provider.of<File>(context);
    return Container(
      width: 120,
      color: Colors.transparent,
      margin: EdgeInsets.only(right: 20),
      child: Card(
        child: Wrap(
          children: <Widget>[
            Image.network(book.cover),
            Container(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(
                    '$book.completion %',
                    style: TextStyle(
                        color: Colors.black.withOpacity(0.5), fontSize: 12.4),
                  ),
                  IconButton(
                      icon: Icon(
                        Icons.more_horiz,
                        size: 14.5,
                      ),
                      onPressed: null)
                ],
              ),
            ),
          ],
        ),
      ),
    );
  

【问题讨论】：

在哪里声明您在此处提到的文件提供程序 final booksData = Provider.of(context);

【参考方案1】：

这不完全是你的代码，但你会明白的

// provider with ChangeNotifier      
List<Client>? _clients = [];

  get clients => _clients;

  addClient(Client client) async 
    _clients!.add(client);
    notifyListeners();
  

您想在哪里使用

Consumer<ClientProvider>(
          builder: (_, data, __) => Expanded(
            child: ListView.builder(
              itemCount: data.clients.length,
              itemBuilder: (context, index) 
                return ClientRow(data.clients[index]);
              ,)

here is the sample Im doing now