使用 Stream Builder 创建列表视图

Question

想要使用流从服务器的实时数据创建列表视图，因此创建假数据流，然后将其快照保存在列表中以测试结果，当在 ListTile 中使用该列表并运行应用程序时，会出现以下错误：

构建 ListTile(dirty) 时抛出以下断言：找不到材质小部件。

ListTile 小部件需要一个 Material 小部件祖先。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Center(
          child: StreamBuilderPage(),
        ),
      ),
    );
  }
}

class StreamBuilderPage extends StatefulWidget {
  @override
  _StreamBuilderPageState createState() => _StreamBuilderPageState();
}

class _StreamBuilderPageState extends State<StreamBuilderPage> {
  List<int> items = [];
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      //Error number 2
      stream: NumberCreator().stream,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.connectionState == ConnectionState.done) {
          return Text('done');
        } else if (snapshot.hasError) {
          return Text('Error!');
        } else {
          items.add(snapshot.data);
          print(items); //print every second: [0] then [0,1] then [0,1,2] ...
          return ListView.builder(
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(items[index].toString()),
              );
            },
            itemCount: items.length,
          );
        }
      },
    );
  }
}

class NumberCreator {
  NumberCreator() {
    Timer.periodic(Duration(seconds: 1), (timer) {
      //add count to stream
      _controller.sink.add(_count);
      _count++;
    });
  }
  var _count = 1;
  final _controller = StreamController<int>();

  Stream<int> get stream => _controller.stream;

  dispose() {
    _controller.close();
  }
}

究竟是什么导致了这个错误？感谢社区。

Answer 1

尝试这个

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StreamBuilderPage(),
    );
  }
}

class StreamBuilderPage extends StatefulWidget {
  @override
  _StreamBuilderPageState createState() => _StreamBuilderPageState();
}

class _StreamBuilderPageState extends State<StreamBuilderPage> {
  List<int> items = [];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: StreamBuilder(
            //Error number 2
            stream: NumberCreator().stream,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.connectionState == ConnectionState.done) {
                return Text('done');
              } else if (snapshot.hasError) {
                return Text('Error!');
              } else {
                items.add(snapshot.data);
                print(
                    items); //print every second: [0] then [0,1] then [0,1,2] ...
                return ListView.builder(
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(items[index].toString()),
                    );
                  },
                  itemCount: items.length,
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

class NumberCreator {
  NumberCreator() {
    Timer.periodic(Duration(seconds: 1), (timer) {
      //add count to stream
      _controller.sink.add(_count);
      _count++;
    });
  }
  var _count = 1;
  final _controller = StreamController<int>();

  Stream<int> get stream => _controller.stream;

  dispose() {
    _controller.close();
  }
}