Flutter中的Scoped_Model浅析，通俗易懂的大白话让你快速掌握！

2023-09-11 13:48:13

在前端开发中，我们经常能听到Redux等状态管理的词汇。但是对于我这种搞移动端出身的人，对这些词汇就不是很熟悉。Flutter作为借鉴了很多React思想的语言，自然也会有相对应的状态管理。比如我多个页面同时使用了User对象，当我其中一个地方改了以后，想要应用到其他页面中，就需要用到状态管理。

在Flutter中，状态管理有很多种实现方式，其中Scoped_Model就是一种简单、轻量级的解决方案。它可以帮助你轻松实现组件间的数据共享和跨组件数据传递，从而提升应用程序的开发效率和代码的可维护性。

什么是Scoped_Model

Scoped_Model是一个Dart包，它提供了一个简单的状态管理解决方案，可以让你在Flutter应用程序中轻松共享数据。它使用了一个名为Model类的中央存储库来存储应用程序的状态。Model可以被任何组件访问，并且当Model发生变化时，所有依赖于它的组件都会自动更新。

如何使用Scoped_Model

要使用Scoped_Model，首先需要在应用程序中导入Scoped_Model包。然后，你需要创建一个Model类来存储你的应用程序状态。Model类必须继承自Model类，并且它必须包含一个名为modelData的变量来存储你的数据。

import 'package:scoped_model/scoped_model.dart';

class AppModel extends Model {
  String modelData = 'Initial data';
}

接下来，你需要创建一个ScopedModelWidget来包装你的应用程序。ScopedModelWidget会将Model类提供给其子组件。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModel<AppModel>(
      model: AppModel(),
      child: MaterialApp(
        // ...
      ),
    );
  }
}

现在，你可以在你的应用程序中访问Model类了。你可以通过ScopedModel.of()方法来获取Model类的实例。

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final model = ScopedModel.of<AppModel>(context);

    return Scaffold(
      body: Center(
        child: Text(model.modelData),
      ),
    );
  }
}