Flutter 부분 리 셋 실현

Flutter 에 서 는 페이지 의 한 widget 상 태 를 업데이트 하려 면 보통 setState 방법 으로 build 방법 을 되 돌려 새로 고침 합 니 다.페이지 레이아웃 이 복잡 할 때,이렇게 하면 틀림없이 안 된다.
다음은 provider 와 StreamBuilder 를 통 해 부분 리 셋 을 실현 하 는 두 가지 부분 리 셋 방식 을 제공 합 니 다.
1、provider 를 통 해 리 셋
우선 pubspec.yaml 에 provider 의존 도 를 추가 합 니 다.

# provider
provider: ^3.1.0

다음은 provider 를 통 해 인증 코드 를 보 내 는 사례 를 실현 합 니 다.
TimerModel 파일 만 들 기

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';

class TimerModel extends ChangeNotifier{

 StreamSubscription _subscription;
 int _count = 0;///    

 int get count => 10 - _count;///    

 _setCount(){
 _count++;
 notifyListeners();
 }

 startTimer(){
 _count = 0;
 _subscription = Observable.periodic(Duration(seconds: 1))
  .startWith(10)
  .take(10)
  .listen((t){
  _setCount();
 });
 }

 @override
 void dispose() {
 _subscription?.cancel();
 super.dispose();
 }
}

페이지 레이아웃 은 다음 과 같 습 니 다:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
  home: Scaffold(
  appBar: AppBar(
   title: Text("     "),
  ),
  body: Center(
   child: ChangeNotifierProvider<TimerModel>(
   builder: (context) => TimerModel(),
   child: Consumer<TimerModel>(builder: (context, timerModel, _) {
    return RaisedButton(
    onPressed: () async {
     if (timerModel.count == 0) {
     timerModel.startTimer();
     }
    },

    child: Text(
     timerModel.count == 0 ? "     " : '${timerModel.count}     ',
     style: timerModel.count == 0
      ? TextStyle(color: Colors.blue, fontSize: 14)
      : TextStyle(color: Colors.grey, fontSize: 14),
    ),
    );
   }),
   ),
  ),
  )
 );
 }
}

MyApp 은 StatelessWidget 에서 계승 한 상태 가 없 는 widget 임 을 볼 수 있 습 니 다.
Timer Model 에서 notify Listeners()를 호출 합 니 다.리 셋 효과 구현.
2.StreamBuilder 부분 리 셋 실현

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:rxdart/rxdart.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

 final StreamController _streamController = StreamController<int>();

 int count = 10;

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
  home: Scaffold(
  appBar: AppBar(
   title: Text("     "),
  ),
  body: Center(
   child: StreamBuilder<int>(
    stream: _streamController.stream,
    initialData: 0,
    builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
    return RaisedButton(
     onPressed: () async {
     if (snapshot.data == 0) {
      startTimer();
     }
     },

     child: Text(
     snapshot.data == 0 ? "     " : '${snapshot
      .data}     ',
     style: snapshot.data == 0
      ? TextStyle(color: Colors.blue, fontSize: 14)
      : TextStyle(color: Colors.grey, fontSize: 14),
     ),
    );
    }
   ),
  ),
  )
 );
 }


 startTimer(){
 count = 10;
 Observable.periodic(Duration(seconds: 1))
  .take(10)
  .listen((t){
  _streamController.sink.add(--count);
 });
 }
}

StreamBuilder 를 사용 하여 부분 적 으로 새로 고침 합 니 다.sink.add 방법 으로 streamController.sink 에 이벤트 흐름 을 추가 합 니 다.이 흐름 은 StreamBuilder 에서 stream 에 의 해 수신 되 고 builder 방법 을 촉발 합 니 다.
마지막 으로 페이지 를 소각 할 때 자원 을 방출 합 니 다.
효과 도

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.