首页 > 解决方案 > Flutter 自动更新与性能对比

问题描述

案例场景:

  1. 我有一个通过使用端点显示在屏幕上的人员列表。

  2. 当用户仍在同一屏幕上时,我希望每当有新人添加到数据库时列表自动刷新(不使用刷新指示器刷新列表)。

  3. 我通过使用 StreamBuilder 和一个调用端点来检索人员列表并使用 ValueNotifier 来跟踪以进行相应更新的流方法来管理这一点。

  4. 但我相信这可以使用没有流的 Riverpod 来实现。任何线索将不胜感激。

下面是我的流实现:

import 'package:car_clone/model/person.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:http/http.dart' as http;

class HomePageContents extends HookWidget {
   final String title;
   final refreshKey;
   List<Person> person = [];

   HomePageContents(this.refreshKey, {@required this.title});

   // real stream
   Stream<List<Person>> realPeople(ValueNotifier personMonitor) async* {

   var url = 'http://192.168.43.46:8080/api/v1/person';
   var res = await http.get(
      url, headers: {"Content-Type": "application/json"});
   if (res.statusCode == 200) {

      print('Response :: ${res.body}');
      person = personFromJson(res.body);
      print('pop ${person.length}');

  }
   yield person;
   personMonitor.value = person;
 }

@override
Widget build(BuildContext context) {
  final personState = useState(person);

  return StreamBuilder(
    stream: realPeople(personState),
    builder: (context, snapshot){
      if(snapshot.hasData){

        return ListView.builder(
            itemCount: snapshot.data.length,
            itemBuilder: (context, index){
              Person person = snapshot.data[index];
              return Text('${person.name}');
         });
      }
      else{

         return CircularProgressIndicator();
      }
    },
  );
 }
}

标签: flutterriverpoddart-stream

解决方案


推荐阅读