首页 > 解决方案 > 如何让我的 Flutter 应用仅在需要时生成数字?

问题描述

所以我的程序的想法是使用运算符生成随机数,然后对该操作产生非用户结果。它可以工作,但是每次我执行任何操作(例如打开 TextField 或提交结果以将用户输入与实际答案进行比较)时,我的应用程序都会刷新数据。我猜这个问题是因为糟糕的状态管理,但我无法弄清楚如何自己解决它。(我有自己的数学课,有程序功能,但不用担心)

代码需要什么:

class _GameplayPageState extends State<GameplayPage> {
  @override
  Widget build(BuildContext context) {
    var mathManager = Mathematics();
    var firstNum = mathManager.getNumber();
    var secondNum = mathManager.getNumber();
    var mathOperator = mathManager.getOperator();
    var calResult = mathManager.calculate(firstNum, mathOperator, secondNum);


     Positioned(
                top: 120,
                child: Container(
                  width: screenWidth,
                  height: 230,
                  // decoration: BoxDecoration(color: Colors.orange),
                  child: Align(
                    alignment: Alignment.center,
                    child: Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          SizedBox(
                            width: 10,
                          ),
//                    >>>> LOOK HERE
                          Text(
                            firstNum.toString(),
                            style: TextStyle(
                                fontFamily: 'Montserrat',
                                fontSize: 100,
                                color: Color(0xff52de97),
                                letterSpacing: 0.5),
                          ),
                          Text(
                            mathOperator,
                            style: TextStyle(
                              fontFamily: 'Montserrat',
                              fontSize: 70,
                              color: Color(0xff52de97),
                            ),
                          ),
                          Text(
                            secondNum.toString(),
                            style: TextStyle(
                              fontFamily: 'Montserrat',
                              fontSize: 100,
                              color: Color(0xff52de97),
                              letterSpacing: 0.5,
                            ),
                          ),
                          SizedBox(
                            width: 10,
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
child: TextField(
                          onSubmitted: (String value) async {
                            await showDialog(
                              context: context,
                              builder: (BuildContext context) {
                                return AlertDialog(
                                  content: (value == calResult ? Text('Right') : Text('Wrong!')),
                                );
                              });
                          },

                 FlatButton(
                            onPressed: () {
                              setState(() {

                              });
                            },

抱歉格式错误;(

标签: eventsflutterdartstate

解决方案


您可以尝试创建一个单独的有状态小部件以包含调用 setstate() 的代码部分,并将原始小部件转换为无状态小部件。

在您的代码中,每当更新任何值时,GameplayPage 小部件都会自行重建。这是因为 setstate() 导致小部件重建。所以你应该把不变的东西和那些改变成不同的小部件分开。

例如,您可以将 FlatButton 创建为自定义小部件,并将必要的详细信息作为参数发送。


推荐阅读