flutter状态管理之scoped_model-优快云博客

本文链接：https://blog.youkuaiyun.com/tongxin1004/article/details/89528158

本文介绍如何在Flutter中使用Scoped_model进行状态管理。通过创建UserModel类继承Model，实现数据共享。在MaterialApp中包裹ScopedModel，使UserModel可在其子组件间传递。并通过LoginPage和UserInfoPage实例演示如何使用ScopedModelDescendant访问模型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：有两个widget A,B, 这两个widget共用一些数据，比如用户名...

实现：

1. 添加依赖

scoped_model: ^1.0.1

2. 定义Model的派生类，如UserModel

//user_model.dart
import 'package:scoped_model/scoped_model.dart';

class UserModel extends Model{
  String _user;

  String get user => _user;
  set user(value) => _user = value;

  bool verify(String username){
    return username == 'Linker';
  }
}

3. 用ScopedModel<Model>包裹MaterialApp

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return ScopedModel<UserModel>(
      model: UserModel(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Scoped_model'),),
          body: LoginPage(),
        ),
      ),
    );
  }
}

这样UserModel就可以传给MaterialApp的子widget

4. 用到UserModel的widget用ScopedModelDescendant包裹

//login_page.dart
class LoginPage extends StatelessWidget {
  TextEditingController _userController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
       // mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextField(
            controller: _userController,
            decoration: InputDecoration(
              icon: Icon(Icons.verified_user),
              hintText: 'Enter username',
            ),
          ),
          ScopedModelDescendant<UserModel>(
            builder: (BuildContext context, Widget child, UserModel model) {
              return FlatButton(
                child: Text('Login'),
                color: Colors.blue,
                highlightColor: Colors.blue[300],
                onPressed: (){
                  if(model.verify(_userController.text)){
                    model.user = _userController.text;
                    Navigator.of(context).push(MaterialPageRoute(
                      builder: (context){
                        return UserInfoPage();
                      }
                    ));
                  }
                },
              );
            },
          ),
        ],
      ),
    );
  }
}

//userinfo_page
class UserInfoPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: ScopedModelDescendant<UserModel>(
          builder: (BuildContext context, Widget child, UserModel model) {
            return Text('Username: ${model.user}', style: Theme.of(context).textTheme.display1,);
          },
        ),
      ),
    );
  }
}