Flutter学习笔记

Flutter 状态管理之Scoped_model

2019-10-10  本文已影响0人  王俏

1.添加scoped_model包

scoped_model: ^1.0.1

2.导入包

import 'package:scoped_model/scoped_model.dart';

3.使用

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

class StateManagementDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModel(
      model: CounterModel(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('StateManagementDemo'),
          elevation: 0.0,
        ),
        floatingActionButton: ScopedModelDescendant<CounterModel>(
            rebuildOnChange: false, //改变的时候是否重建
            builder: (context, _, model) => FloatingActionButton(
                  child: Icon(Icons.add),
                  onPressed: model.increaseCount,
                )),
        body: StateWrapper(),
      ),
    );
  }
}

//从父辈继承state,本身不管理state
class StateWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Counter();
  }
}

//从父辈继承state,本身不管理state
class Counter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ScopedModelDescendant<CounterModel>(
      builder: (context, _, model) => ActionChip(
            label: Text('${model.count}'),
            onPressed: model.increaseCount,
          ),
    );
  }
}

class CounterModel extends Model {
  int _count = 0;
  int get count => _count;
  void increaseCount() {
    _count++;
    notifyListeners();
  }
}
上一篇 下一篇

猜你喜欢

热点阅读