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

【问题标题】：How to use ListView builder with Providers?如何将 ListView 构建器与提供程序一起使用？
【发布时间】：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);

标签： android flutter listview dart android-contentprovider

【解决方案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

【讨论】：