当前位置：网站首页>Synchronously update the newly added and edited data to the list

Synchronously update the newly added and edited data to the list

2022-04-23 12:50:00 【InfoQ】

Preface

The previous articles were all about

Dio

Network request related content , Our dynamic module is short of the details page , But after every successful addition and editing , To return to the list page, you still need to refresh manually , Don't reach “

What you see is what you get

” The effect of . This article will introduce the use of

GetIt

The container plug-in completes the data synchronization between pages . The knowledge points involved in this article are as follows ：

Details page interface construction ;

Update details view times interface implementation ;

GetIt brief introduction ;

Use GetIt Register global objects ;

Use GetIt Realize data synchronization between pages .

Details page

On the details page, we show the dynamic title 、 View times 、 Pictures and content . The easiest way is to use Column The component wraps everything in turn . however , It will actually take a long time to consider the content （ It could also be rich text ）, Therefore, it is more appropriate to wrap with rolling components , It's still used here

CustomerScrollView

Come on , Compared with ordinary

ScrollView

Come on ,

CustomerScrollView

Use

Sliver

Child components , The sliding performance will be higher and smoother . The page itself is relatively simple , I won't go into that , The specific page hierarchy is as follows .

CustomScrollView

slivers

title ： Use
Container
Wrap in order to adjust the layout .

View times ： Similar to the number of views of the list .

picture ： In order to avoid the picture occupying too high a height , Limit picture height to 240.

Content ： Similar to the title , It's just that the font is turned down 2 Number

The above

slivers

The contents of the subcomponents are used SliverToBoxAdapter Convert to

Sliver

. The final interface can be seen from the following dynamic diagram .

Details view times update

When we enter the details page , An interface that needs to submit updates to the backend for viewing times . Be careful , In some application processing, the backend directly increases the number of views to the database when obtaining the details interface . Although this can reduce the number of requests , However, the defect of back-end processing is that the calling details interface will be counted directly as the view details page , As a result, when you get details elsewhere （ For example, edit interface ） May lead to multiple statistics , Industry slang calls it “

Brush flow

”.

Using the front-end update view times can achieve more accurate control , For example, we can set how long we stay on the page to effectively view , Or slide to the bottom of the page to view effectively, and so on .

The interface address for updating the number of views is ：

http://localhost:3900/api/dynamics/view/:id

, Remember to pull the latest code to run . We will update the viewing times after obtaining the details interface successfully . Update view times are not very important logic , There is no need to remind when an error occurs （ Avoid confusion to users ）, This is just an exception message , Used to troubleshoot problems during development . In the actual production process, the abnormal information can be uploaded to the abnormal monitoring background .

if (response.statusCode == 200) {
 setState(() {
 _dynamicEntity = DynamicEntity.fromJson(response.data);
 });
 _updateViewCount();
}
//...

void _updateViewCount() async {
 try {
 var response = await DynamicService.updateViewCount(_dynamicEntity.id);
 if (response.statusCode == 200) {
 setState(() {
 _dynamicEntity.viewCount = response.data['viewCount'];
 GetIt.instance.get<DynamicListener>().dynamicUpdated(
 _dynamicEntity.id,
 _dynamicEntity,
 );
 });
 }
 } catch (e) {
 print(e.toString());
 }
}

GetIt brief introduction

GetIt

Itself is a container management plug-in , It was originally designed to accomplish dependency injection DI and IOC Functions of the container , It's kind of similar Java Spring Of Bean Containers . Because the objects in the container are global , Therefore, it can be used for data synchronization , It's also Flutter One of the officially recommended state management containers . Another common state management plug-in is

Provider

, We'll talk about it later when we talk about state management .

So called containers , In essence, it is an overall situation

Map

object , After you can store objects in it , Take it out directly when you need it , Instead of each user creating their own objects , It also realizes the decoupling between objects .

GetIt The basic usage of is very simple , As shown below . If you consider avoiding taking up too many resources during startup , You can also use lazy Lazy loading way , When lazy loading, a method of building objects is passed in , When taking out the object , If the object does not exist in the container , Then use the method of building objects to create a , If you already have it, go straight back to .

Be careful ,GetIt There are many versions , Yes Flutter Of The minimum SDK The version requires , What we currently use SDK The version is 2.0.6, Therefore, the maximum can only be selected 4.0.3 edition （ The latest version is 7.1.2, need 2.12.x Above version ）.

//  Registered object ： It's usually a single case 
GetIt.instance.registerSingleton<T>(T object);
//  Lazy load mode registration 
GetIt.instance.registerLazySingleton<T>(FactoryFunc<T> func)
//  Get the object in the container 
GetIt.instance.get<T>();

Register dynamic change listening object

When dynamically adding , Or when the dynamic content changes , We need to update the list . The easiest way is to notify the list to refresh , But that increases network requests . We can directly modify the data of the list to complete the update of the list . Consider that not only dynamic list pages need to be updated （ For example, dynamically embed into other pages ）, We abstract the dynamic update method as an interface , Any object that implements the corresponding interface can call the corresponding interface update when it changes dynamically —— The so-called interface oriented programming .

Add a new one

dynamic_listener.dart

file , Define an interface abstract class

DynamicListener

. On the list page

_DynamicPageState

Implement the corresponding interface in .

import 'package:home_framework/models/dynamic_entity.dart';

abstract class DynamicListener {
 void dynamicUpdated(String id, DynamicEntity updatedDynamic);

 void dynamicAdded(DynamicEntity newDynamic);
}

_DynamicPageState Use implements keyword （ You can also use with keyword ） Realization DynamicListener Two methods of interface ：

New response method ： When there is a new dynamic , Insert the new dynamic at the beginning ;

Update method ： Replace old dynamic data with new dynamic data .

meanwhile , stay

initState

Method to register itself GetIt Containers .

class _DynamicPageState extends State<DynamicPage> implements DynamicListener {
 // ...
 
 @override
 void initState() {
 super.initState();
 //  Sign up to  GetIt Containers 
 GetIt.instance.registerSingleton<DynamicListener>(this);
 }
 
 void dynamicUpdated(String id, DynamicEntity updatedDynamic) {
 int index = _listItems.indexWhere((element) => element.id == id);
 if (index != -1) {
 setState(() {
 _listItems[index] = updatedDynamic;
 });
 }
 }

 void dynamicAdded(DynamicEntity newDynamic) {
 setState(() {
 _listItems.insert(0, newDynamic);
 });
 }
 
 // ...
}

Inter page data update

With GetIt Containers , Because you can get the dynamic list state management object directly from the container , It's easier to handle on other pages , The logic is as follows ：

New page ： Call after new success
dynamicAdded
Method to update the list page ;

Edit page ： After successful editing
dynamicUpdated
Method to update the list page ;

Details page ： After updating the number of views, call
dynamicUpdated
Method to update the list page .

The codes of the three pages are as follows ：

// New page 
var response = await DynamicService.post(newFormData);
if (response.statusCode == 200) {
 Dialogs.showInfo(context, ' Add success ');
 GetIt.instance
 .get<DynamicListener>()
 .dynamicAdded(DynamicEntity.fromJson(response.data));
 Navigator.of(context).pop();
}
//-------------------------------------
// Edit page 
if (response.statusCode == 200) {
 Dialogs.showInfo(context, ' Saved successfully ');
 // Process the successfully updated business 
 _handleUpdated(newFormData);
 Navigator.of(context).pop();
}

//  Processing updates , If the picture is updated, the dynamic picture content is updated 
void _handleUpdated(Map<String, String> newFormData) {
 _dynamicEntity.title = newFormData['title'];
 _dynamicEntity.content = newFormData['content'];
 if (newFormData.containsKey('imageUrl')) {
 _dynamicEntity.imageUrl = newFormData['imageUrl'];
 }
 GetIt.instance.get<DynamicListener>().dynamicUpdated(
 _dynamicEntity.id,
 _dynamicEntity,
 );
}

//-------------------------------------
// Details page 
void _updateViewCount() async {
 try {
 var response = await DynamicService.updateViewCount(_dynamicEntity.id);
 if (response.statusCode == 200) {
 setState(() {
 _dynamicEntity.viewCount = response.data['viewCount'];
 GetIt.instance.get<DynamicListener>().dynamicUpdated(
 _dynamicEntity.id,
 _dynamicEntity,
 );
 });
 }
 } catch (e) {
 print(e.toString());
 }
}

Running effect

summary

This chapter completes the business logic of the whole dynamic management , Includes new 、 Delete 、 edit 、 View times and other functions . adopt GetIt Container management plug-in and interface definition , Data synchronization between pages can be done easily and quickly . You can also see from the whole series , There are the following problems in our network request code ：