管理 ListView Builder 的提供程序

Question

我正在使用一个列表视图构建器来创建一个列表，该列表基于具有 changenotifier 的类中的更改。我在提供程序中创建了一个列表，该列表在调用 bleservice 类中的配对函数时得到更新。然后将设备添加到设备列表中，然后通知侦听器更新 UI 并显示列表。更新后的 UI 有一个按钮，对应于 devicesList 中的设备索引，允许连接。

ListView.builder(
                itemBuilder: (context, index) {
                  if (bleService.isPairing){
                  List<Container> containers = new List<Container>();
                  for (BluetoothDevice device in bleService.devicesList) {
                    containers.add(
                      Container(
                        height: 50,
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              child: Column(
                                children: <Widget>[
                                  Text(device.name == ''
                                      ? '(unknown device)'
                                      : device.name),
                                  Text(device.id.toString()),
                                ],
                              ),
                            ),
                            FlatButton(
                                color: Colors.blue,
                                child: Text(
                                  'Connect',
                                  style: TextStyle(color: Colors.white),
                                ),
                                onPressed: () {
                                  bleService.connectDevice(device);
                                }),
                          ],
                        ),
                      ),
                    );
                  }
                  return ListView(
                    padding: const EdgeInsets.all(8),
                    children: <Widget>[
                      ...containers,
                    ],
                  );
                }
                  else
                    return Container(child: Text('Disconnected'));
                  },
              ),

提供者：

class BleService with ChangeNotifier{
    List<BluetoothDevice> _devicesList = [];
    List<BluetoothDevice> get devicesList {
        return [..._devicesList];
    }

    _addNewDeviceTolist(final BluetoothDevice device) {
    if (!_devicesList.contains(device)) {
      _devicesList.add(device); //stream/upload this to BleScreen as more devices get added
      notifyListeners();
    }
  }
}

当将 listview builder 与 futurebuilder 结合使用时，应用程序给我一个空错误，当我这样运行它时，页面根本不会加载。我在这里做错了什么？

Answer 1

您需要为 ListView.builder() 指定项目计数：

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  BleService bleService;
  @override
  Widget build(BuildContext context) {
    bleService = Provider.of<BleService>(context);
    return bleService != null ? Container(
      child: ListView.builder(
        itemCount: bleService.isPairing ? bleService.devicesList.length : 0,
        itemBuilder: (context, index) {
          return bleService.isPairing ? bleService.devicesList.map((BluetoothDevice device) => Container(
            height: 50,
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Column(
                    children: <Widget>[
                      Text(device.name == ''? '(unknown device)' : device.name),
                      Text(device.id.toString()),
                    ],
                  ),
                ),
                FlatButton(
                  color: Colors.blue,
                  child: Text(
                    'Connect',
                    style: TextStyle(color: Colors.white),
                  ),
                  onPressed: () {
                    bleService.connectDevice(device);
                  }
                ),
              ],
            ),
          )).toList() : Container(child: Text('Disconnected'));
        }
      ),
    ) : Container();
  }
}

您的代码也需要更多改进。