添加“未来”api调用json数据作为infinate滚动Flutter_gallery示例项目

时间:2018-03-16 17:35:02

标签: dart flutter flutter-sliver

尝试学习新的颤振框架,看起来非常有前途!通过所有在线演示,我现在正尝试添加外部数据,可以通过新的Future数据调用每10个项目无限滚动到“pesto”部分的flutter_gallery示例项目。

https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/pesto_demo.dart

我已经成功地对外部数据进行“未来”调用并填充示例中的pesto部分,但是现在我想将它带到下一级别并在用户调用另一个未来数据项中的10个项目时滚动到列表中的第7项。

无法找到一个例子来解开我的困惑,想知道是否有人知道使用flutter_gallery示例解决这个问题的任何编码示例。我在使用CustomScrollView(有很多ListView示例,但没有帮助)的示例中理解正确的结构,无论是语法还是结构,或者两者兼而有之。

期待任何想法或代码片段。

1 个答案:

答案 0 :(得分:0)

几周前,我也开始学习Flutter,并且遇到了同样的情况,这是我提出的第一个解决方案。可能可以改善答案,让我知道您如何解决此问题。

我能够使用 ListView 实现一个屏幕,该屏幕使用 StreamBuilder BLoC ListView滚动添加更多项。建造者

下面是 StreamBuilder 的代码段,我将其作为 body: body:中的 child:来调用>

StreamBuilder<List<Content>> _getContentsList() {
var page = 1;
return StreamBuilder<List<Content>>(
  stream: bloc.contents,
  initialData: [],
  builder: (context, snapshot) =>
      ListView.builder(itemBuilder: (context, index) {
        print('looping...');
        if (snapshot.data.isNotEmpty) {
          if (index < snapshot.data.length) {
            return ListTile(
              title: Text(
                snapshot.data.elementAt(index).title,
                style:
                    TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              ),
              subtitle: Text(
                snapshot.data.elementAt(index).description,
                style: TextStyle(fontSize: 14.0),
              ),
            );
          } else if (index / 9 >= page) {
            page++;
            print('index: $index, page: $page');
            bloc.index.add(index);
          } else
            return null;
        }
      }),
);}

BLoC 类中,我正在调用一个API,该API需要一个起始索引并从该索引返回9个列表项。