添加“未来"消息. api调用json数据作为无限滚动Flutter_gallery示例项目 [英] Adding a "Future" api call to json data as infinate scroll Flutter_gallery example project

问题描述

尝试学习新的flutter框架，看起来非常有前途！我已经尝试了所有在线演示，现在尝试将外部数据添加到"pesto"部分的flutter_gallery示例项目中，该数据可以通过每10个项目的新Future调用无限滚动.

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

我已经成功地对外部数据进行了未来"调用并填充了示例的pesto部分，但是，现在我想将其带入下一个级别，并在用户使用时从另一个将来的数据项中调用另外的10个项滚动到列表中的第七项.

在查找示例以掩盖我的困惑时遇到了麻烦，想知道是否有人知道使用flutter_gallery示例来解决此问题的编码示例.在使用带有语法或结构或两者兼有的CustomScrollView(有很多ListView示例，但无济于事)的示例中，我难以理解执行此操作的正确结构.

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

解决方案

几周前，我也开始学习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 类中，我正在调用一个具有起始索引并从该索引返回9个列表项的API.

Attempting to learn the new flutter framework, looks incredibly promising! Gone through all the online demos and I am now attempting to add external data that can infinitely scroll via a new Future data call every 10 items to the flutter_gallery example project in the "pesto" section.

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

I have been successful in making a "future" call to external data and populating the pesto section of the example, however now I want to take it to the next level and call another 10 items from another future data item when the user scrolls to the 7th item on the list.

Having trouble finding an example to unmask my confusion, wondering if anybody knows of any coded examples that pull apart this problem using the the flutter_gallery example. I'm having trouble understanding the proper structure to do this in the example with the CustomScrollView (there are plenty of ListView examples but that isn't helping) with either syntax or structure or both.

Look forward to any thoughts or code snippets.

解决方案

I also started learning Flutter a couple of weeks back and was facing the same situation and this is the first solution I was able to come up with. The answer can probably be improved let me know how you solve this.

I was able to implement a screen with a ListView that adds more items on scroll using StreamBuilder, BLoC and ListView.builder.

Below is the code snippet for StreamBuilder which I am calling as child: in body: of my Scaffold

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;
        }
      }),
);}

In BLoC class I am calling an API that takes a starting index and returns 9 list items from that index.

这篇关于添加“未来"消息. api调用json数据作为无限滚动Flutter_gallery示例项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！