flutter - 了解Fluff中的ScopedModel和状态

Question

我希望有人能帮助我理解Flutter中的ScopedModel

我有一个简单的项目，当我更改模型值时，页面包装器会将我重定向到其他页面。

在下面的示例代码中，我想要的只是当我在登录页面中点击登录按钮时，我希望pageWrapper将我重定向到HomePage()。

我确实注意到，在单击登录按钮然后单击热重载后，我被重定向到了主页。告诉我该模型已更新。只是PageWrapper没有重绘。如果是这样，我应该怎么做，以便在发生更改时PageWrapper会重绘？

这是示例代码
主镖

void main() => runApp(MyApp(
  model: UserInfoModel(),
));

class MyApp extends StatelessWidget {
  final UserInfoModel model;

  const MyApp({Key key, @required this.model}): super(key: key);


  @override
  Widget build(BuildContext context) {

    return ScopedModel<UserInfoModel>(
      model: model,
      child: MaterialApp(
        title: 'scoped model demo',
        home: PageWrapper(),
      ),
    );
  }
}

page_wrapper.dart

class PageWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<UserInfoModel>(
      builder: (context, child, userInfo){
        if (userInfo.isLoggedIn){
          return Home();
        }else{
          return Login();
        }
      }
    );
  }
}

login.dart

class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {

  @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<UserInfoModel>(
      builder: (context, child, userInfoModel){

        return Scaffold(
          appBar: AppBar(
            title: Text("Login"),
          ),
          body: Container(
            child: Center(
                child: FlatButton.icon(onPressed: (){
                  userInfoModel.isLoggedIn=true;
                }, icon: Icon(Icons.person,size: 120,), 
                    label: Text("Login"))
            ),
          ),
        );
      });
  }
}

Dart

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Container(
        child: Center(
          child: Text("you're home"),
        ),
      ),
    );
  }
}

user_info_model.dart

class UserInfoModel extends Model{
  String firstName;
  String lastName;
  bool isLoggedIn=false;

  UserInfoModel({
    this.firstName,
    this.lastName
});

}

Answer 1

您可以在下面复制粘贴运行完整代码
第1步:您可以将UserInfoModel与get和set交互，您可以在下面看到代码
步骤2:您需要notifyListeners()
程式码片段

if (userInfo.isLoggedIn) {
            return Home();
...
onPressed: () {
                userInfoModel.isLoggedIn = true;
              },

class UserInfoModel extends Model {
      String firstName;
      String lastName;
      bool _isLoggedIn = false;

      UserInfoModel({this.firstName, this.lastName});

      bool get isLoggedIn => _isLoggedIn;

      set isLoggedIn(bool newSetting) {
        _isLoggedIn = newSetting;
        notifyListeners();
      }
    }                               

工作演示



完整的代码

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

void main() => runApp(MyApp(
      model: UserInfoModel(),
    ));

class MyApp extends StatelessWidget {
  final UserInfoModel model;

  const MyApp({Key key, @required this.model}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ScopedModel<UserInfoModel>(
      model: model,
      child: MaterialApp(
        title: 'scoped model demo',
        home: PageWrapper(),
      ),
    );
  }
}

class PageWrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<UserInfoModel>(
        builder: (context, child, userInfo) {
      if (userInfo.isLoggedIn) {
        return Home();
      } else {
        return Login();
      }
    });
  }
}

class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return ScopedModelDescendant<UserInfoModel>(
        builder: (context, child, userInfoModel) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Login"),
        ),
        body: Container(
          child: Center(
              child: FlatButton.icon(
                  onPressed: () {
                    userInfoModel.isLoggedIn = true;
                  },
                  icon: Icon(
                    Icons.person,
                    size: 120,
                  ),
                  label: Text("Login"))),
        ),
      );
    });
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Container(
        child: Center(
          child: Text("you're home"),
        ),
      ),
    );
  }
}

class UserInfoModel extends Model {
  String firstName;
  String lastName;
  bool _isLoggedIn = false;

  UserInfoModel({this.firstName, this.lastName});

  bool get isLoggedIn => _isLoggedIn;

  set isLoggedIn(bool newSetting) {
    _isLoggedIn = newSetting;
    notifyListeners();
  }
}