Flutter ListView 不更新数据更改

Question

我是 Flutter 的新手。 目前正在学习和开发一个flutter项目。 这是我的代码。 但我的列表视图没有更新。 提前感谢您指出任何错误

    import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:stacked/stacked.dart';
import 'package:sx_tvapp_app/data/network/models/favourite_item.dart';
import 'package:sx_tvapp_app/ui/views/favourite_items/favourite_items_viewmodel.dart';

class FavouriteItemsView extends StatefulWidget {
  final FavouriteItemsViewType type = FavouriteItemsViewType.one;
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _FavouriteItemsViewState();
  }
}

class _FavouriteItemsViewState extends State<FavouriteItemsView> {
  final String title = 'お気に入り';

  List<String> items = ['A', 'B', 'C', 'D', 'E', 'F'];

  FavouriteItemPage page;
  List<FavouriteItemContent> contents = List();
  bool isLoading = false;

  FavouriteItemsViewModel viewModel;

  void showLoading() {
    setState(() {
      isLoading = true;
    });
  }

  Future loadData() async {
    print('loadData');
    print(contents.length.toString());
    if (page == null) {
      this.viewModel.getFavouriteItemForLoggedOutUser();
      showLoading();
    } else {
      if (page.totalPages > page.number) {
        this.viewModel.getFavouriteItemForLoggedOutUser(page: page.number + 1);
        showLoading();
      }
    }
  }

  void bindModel(FavouriteItemsViewModel viewModel) {
    viewModel.pageSubject.listen((value) {
      print(value);
      page = value;
    });

    viewModel.favouriteItemSubject.listen((value) {
      print(' content is going to be added');
      print(value.contents.length);
      setState(() {
//        contents.addAll(value.contents);
        for (int i = 0; i < value.contents.length; i++) {
          var commonItem = contents.where((element) {
            return element.id == value.contents[i].id;
          }).toList();
          if (commonItem.length == 0) {
            print('item is being addedf');
            contents.add(value.contents[i]);
          }
        }

//        contents = contents.toSet().toList();
        isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ViewModelBuilder<FavouriteItemsViewModel>.reactive(
      viewModelBuilder: () => GetIt.instance.get<FavouriteItemsViewModel>(),
      onModelReady: (model) {
        this.viewModel = model;
        this.bindModel(model);
//        this.loadData();
        model.getFavouriteItemForLoggedOutUser();
      },
      builder: (context, viewModel, child) {
        return Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: Column(
            children: <Widget>[
              Expanded(
                child: NotificationListener<ScrollNotification>(
                  onNotification: (ScrollNotification scrollInfo) {
                    if (!isLoading &&
                        scrollInfo.metrics.pixels ==
                            scrollInfo.metrics.maxScrollExtent) {
                      loadData();
                    }
                  },
                  child: buildListView(),
                ),
              ),
              Container(
                height: isLoading ? 50.0 : 0,
                color: Colors.transparent,
                child: Center(
                  child: new CircularProgressIndicator(),
                ),
              ),
            ],
          ),
        );
      },
    );
  }

  Widget buildListView() {
    return ListView.builder(
        itemCount: contents.length,
        padding: EdgeInsets.fromLTRB(0, 9, 0, 9),
        itemBuilder: (context, index) {
          return buildRow(contents[index]);
        });
  }

  Widget buildRow(FavouriteItemContent content) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Container(
              width: 15,
              height: 0,
            ),
//TODO: Handle this after null image url issue is fixed
//            CachedNetworkImage(
//              fit: BoxFit.fill,
//              height: 25,
//              width: 25,
//              imageUrl: content.channelIconUrl,
//              placeholder: (context, url) => CircularProgressIndicator(),
//              errorWidget: (context, url, error) => new Icon(Icons.error),
//            ),
            getImage(content.channelIconUrl, 25, 25),
            Container(
              width: 9,
              height: 0,
            ),
            Container(
              child: Text(
                content.name,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 12,
                  letterSpacing: -0.25,
                  color: Color.fromRGBO(96, 96, 96, 1.0),
                ),
              ),
            ),
          ],
        ),
        Container(
          width: 0,
          height: 30,
        ),
//TODO: Handle this after null image url issue is fixed
//        CachedNetworkImage(
//          fit: BoxFit.fill,
//          height: 211,
//          width: double.infinity,
//          imageUrl: content.imageUrl,
//          placeholder: (context, url) => CircularProgressIndicator(),
//          errorWidget: (context, url, error) => new Icon(Icons.error),
//        ),
        getImage(content.imageUrl, double.infinity, 211),
        Container(
          width: 0,
          height: 13,
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(15, 12.5, 15, 9),
          child: Text(content.details),
        )
      ],
    );
  }

  Widget getImage(String url, double width, double height) {
    if (url != null) {
      return CachedNetworkImage(
        imageUrl: url,
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Image(
          image: AssetImage(
              'assets/images/product_detail/product_detail_placeholder.png'),
        ),
      );
    } else {
      return Image(
        width: width,
        height: height,
        image: AssetImage(
            'assets/images/product_detail/product_detail_placeholder.png'),
      );
    }
  }
}

enum FavouriteItemsViewType { one, two, three, four }

我在这里所做的是，我在开头请求获取 API，它为我提供了第一页的数据。 然后我向下滚动到底部后再次请求。 这是一个带分页的 ListView。

Answer 1

您可能想要使用的是 StreamBuilder，当新数据从 stream 到达时，它将重建其中包含的任何内容。 Streambuilder 将成为您的 go 以获取 flutter 中的大多数数据。

https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html