从外部模型类更改颤振小部件状态答案

【问题标题】：Change flutter widget state from an external model class从外部模型类更改颤振小部件状态
【发布时间】：2020-10-28 02:37:29
【问题描述】：

我正在构建一个颤振应用程序。我希望 UI 部分和逻辑部分保持分离，因此我将所有代码放入一个单独的类（不是小部件）。

我的主要小部件文件

import "package:flutter/material.dart";
import 'package:google_sign_in/google_sign_in.dart';
import 'package:appname/Models/user.dart';

final GoogleSignIn googleSignIn = GoogleSignIn();

class googleLogin extends StatefulWidget {
  @override
  _googleLoginState createState() => _googleLoginState();
}

class _googleLoginState extends State<googleLogin> {
  User user = new User();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Container(
        child:Column(
          children: <Widget>[
            MaterialButton(
              padding: EdgeInsets.only(top:50),
              onPressed: (){
                setState(() {
                  user.signInWithGoogle();
                });
              },
              child: Text("Log In")
            ),
            MaterialButton(
                padding: EdgeInsets.only(top:100),
                onPressed: (){
                  setState(() {
                    user.signOutWithGoogle();
                  });
                },
                child: Text("Log Out")
            ),
            if(user.username!="") Text(user.username),
            if(user.email!="")Text(user.email),
            if(user.imageurl!="") Image.network(user.imageurl),
          ],
        )
      )
    );
  }
}

我的用户模型类

import 'dart:convert';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:appname/GoogleSignIn/GoogleSignIn.dart';
import 'package:http/http.dart' as http;

class User{
  String _username="";
  String _email="";
  String _imageurl="";

  String get imageurl=>_imageurl;
  String get email => _email;
  String get username => _username;

  Future<void> signInWithGoogle() async {
    final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
    print(googleSignInAccount.displayName);
    this._username = googleSignInAccount.displayName;
    this._email = googleSignInAccount.email;
    this._imageurl = googleSignInAccount.photoUrl;
    createUser(googleSignInAccount.displayName, googleSignInAccount.email);
    print('signInWithGoogle succeeded');
  }

  void signOutWithGoogle() async{
    await googleSignIn.signOut();
    this._username="";
    this._email = "";
    this._imageurl="";
    print("User Sign Out");
  }

  Future<http.Response> createUser(String name, String email) async {
    return http.post(
      'http://172.20.10.3:8000/createuser/',
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, String>{
        'name':name,
        'email':email
      }),
    );
  }
}

我的期望 - 当单击登录按钮时，User 类中的变量值会发生变化。所以我希望稍后在第一个代码文件中的 Text 小部件能够显示用户的姓名和电子邮件。

会发生什么 - 当我单击登录按钮时，变量的值发生了变化，但 Text 字段没有变化。

我在onPressed() 上使用了setState，所以我只希望状态会更新。请帮忙。

注意 - 我提到了Flutter setState to another class?、Flutter: Calling SetState() from another class、Is it possible to change the state of another class using a button which is located at somewhere else in the widget tree 但他们没有解决我的问题。

【问题讨论】：

标签： flutter dart

【解决方案1】：

您无需等待任何异步函数，因此 setState 将在您更改不同变量的值之前完成。

通过使用await 关键字，您可以等待方法的执行结束，然后再继续。

你需要把你的代码改成这样的

        MaterialButton(
          padding: EdgeInsets.only(top:50),
          onPressed: () async {
            await user.signInWithGoogle();
            setState(() {});
          },
          child: Text("Log In")
        ),
        MaterialButton(
            padding: EdgeInsets.only(top:100),
            onPressed: () async {
              await user.signOutWithGoogle();
              setState(() {});
            },
            child: Text("Log Out")
        ),

并更改 signOutWithGoogle 以返回 Future

Future signOutWithGoogle() async{
   ...
}

【讨论】：