flutter - 在运行时更改 Drawer 中的 ProfileImage

Question

我的抽屉侧边菜单中有一个图像，它的路径存储在一个名为的最终对象中userdata：

class MyDrawer extends StatelessWidget {
  MyDrawer({Key key, this.userdata}) : super(key: key);
  final User userdata;

  @override
  Widget build(BuildContext context) {
    return new Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          if (userdata != null) ...[
            DrawerHeader(
                decoration: BoxDecoration(color: Colors.green),
                child: Stack(children: <Widget>[
                  Align(
                      alignment: Alignment.centerLeft,
                      child: ClipOval(
                        child: userdata.image == '' || userdata.image == null
                            ? CircleAvatar(
                                radius: 50,
                                backgroundColor: Colors.white,
                                backgroundImage: AssetImage('assets/images/avatar.png'))
                            : Image.network(
                                userdata.image,
                                width: 100,
                                height: 100,
                                fit: BoxFit.cover,
                              ),
                      )),

当我现在在一个页面 ( profile.dart) 上时，我可以更新我的个人资料图片（由抽屉推送 - sidemenu-）

如何更新userdata抽屉类中的对象？

我发现了一些类似流的想法，但这真的有必要吗？

编辑：profile.dart

class ProfilePage extends StatefulWidget {
  @override
  _MyProfilePageState createState() => _MyProfilePageState();
}

class _MyProfilePageState extends State<ProfilePage> {
  final _formKey = GlobalKey<FormState>();
  final _username = TextEditingController();
  final _email = TextEditingController();
  final _firstname = TextEditingController();
  final _lastname = TextEditingController();
  final picker = ImagePicker();
  String image = '';

  @override
  void initState() {
    ProfileApi().getProfile().then((user) {
      setState(() {
        this._username.text = user.sId;
        this._email.text = user.email;
        this._firstname.text = user.firstname;
        this._lastname.text = user.lastname;
        this.image = user.image;
      });
    });
    super.initState();
  }

.....

  changeUser() async {
    try {
      User userdata = await ProfileApi().updateProfile(
          this._username.text, this._email.text, this._firstname.text, this._lastname.text);

    //call some function here to update userdata in my drawer  <--

      Fluttertoast.showToast(msg: 'Profile updated');
    } on Exception catch (error) {
      Fluttertoast.showToast(msg: error.toString());
      return;
    }
  }

我还有一个存储类，其中还提供了 userdata 对象：

class UserStorage {
  Future<User> getUserData() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String userdata = prefs.getString('userdata') ?? '';
    if (userdata != "") {
      dynamic user = json.decode(userdata);
      return User.fromJson(user);
    } else {
      return null;
    }
  }
}

标签： flutter

Answer 1

将您的userData内容保存在全局变量

globals.dart文件中

library globals;

ValueNotifier userDataNotifier = ValueNotifier(null);

将您的MyDrawer类转换为StatefulWidget并删除其中的User变量。ValueListenableBuilder然后在小部件中使用您的变量

导入“globals.dart”作为全局变量；// ...

class MyDrawer extends StatefulWidget {
  MyDrawer({Key key}) : super(key: key);

  @override
  _MyDrawerState createState() => _MyDrawerState();
}

class _MyDrawerState extends State<MyDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      //...
            Align(
              //...
              child: ValueListenableBuilder(
                valueListenable: globals.userDataNotifier,
                builder: (context, userdata, _) {
                  return ClipOval(
                    child: userdata.image == '' || userdata.image == null
                        ? CircleAvatar(
                        radius: 50,
                        backgroundColor: Colors.white,
                        backgroundImage: AssetImage('assets/images/avatar.png'))
                        : Image.network(
                      userdata.image,
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                    ),
                  );
                },
              ),
            ),
    );
  }
}

最后在您的changeUser功能中，只需更改通知程序的内容

import 'globals.dart' as globals;
// ...


changeUser() async {
  try {
    User userdata = await ProfileApi().updateProfile(this._username.text, this._email.text, this._firstname.text, this._lastname.text);

    // simply change the content of userData
    globals.userDataNotifier = userdata;

    Fluttertoast.showToast(msg: 'Profile updated');
  } on Exception catch (error) {
    Fluttertoast.showToast(msg: error.toString());
    return;
  }
}