更新外部有状态小部件类的实例时如何更新屏幕

Question

我在我的主页上显示了一个 person 类的实例的权重。 当我通过弹出底部表单中的表单更新此实例的权重时，显示的权重仅在热重新加载后才会更改。 当主页中的实例参数更改时，如何在我的个人类中触发 setState？

main.dart

import 'package:flutter/material.dart';
import 'package:metricwidget/screens/homepage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // Root of application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
      
        primarySwatch: Colors.blue,
      ),
      home: const Homepage(),
    );
  }
}

人.dart

import 'package:flutter/material.dart';

class person extends StatefulWidget {
  int? weight;
  person({Key? key, this.weight}) : super(key: key);

  void updateWeight(newWeight){
    weight = newWeight;
  }

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

class _personState extends State<person> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        widget.weight.toString(),
        style: const TextStyle(fontSize: 24),
      ),
    );
  }
}

主页.dart

import 'package:mvs/person.dart';
import 'package:flutter/material.dart';

class Homepage extends StatefulWidget {
  const Homepage({Key? key}) : super(key: key);

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

class _HomepageState extends State<Homepage> {
  var joe = person(weight: 23);
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            child: joe,
          ),
          OutlinedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (context) {
                  return Form(
                    key: _formKey,
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(12.0),
                          child: TextFormField(
                            onSaved: (String? value) {
                              if (int.parse(value!) > 0) {
                                setState(() {
                                  joe.updateWeight(int.parse(value));
                                });
                              }
                            },
                            keyboardType: TextInputType.number,
                            maxLength: 3,
                            initialValue: joe.weight.toString(),
                            decoration: const InputDecoration(
                              icon: Icon(Icons.label),
                            ),
                            validator: (value) {
                              if (value!.isEmpty) {
                                return "Please enter value";
                              }
                              return null;
                            },
                          ),
                        ),
                        OutlinedButton(
                          onPressed: () {
                            _formKey.currentState!.save();
                            Navigator.pop(context);
                          },
                          child: const Text("submit"),
                        )
                      ],
                    ),
                  );
                },
              );
            },
            child: const Text("Update"),
          )
        ],
      ),
    );
  }
}

Answer 1

能够使用 provider 和 changenotifier 解决这个问题，与下面文档中概述的格式相同

参考： https : //pub.dev/packages/provider