Flutter - 如何在屏幕上显示 For-loop 结果

Question

这可能是非常基本的，但我无法弄清楚。我想在应用程序屏幕上显示我的 for 循环结果。尝试使用带有变量 _result 的 Text 小部件方法不会将结果显示在屏幕上。最初，在应用程序启动时，屏幕仅显示0，但单击按钮后不会更改。打印命令在运行控制台上向我显示了正确的结果，但这些结果并没有出现在屏幕上。我已经尝试了很多随着时间的推移学到的东西，比如将int 更改为String，但无济于事，它仍然无法正常工作。我已经做了很多谷歌搜索，但我仍然无法弄清楚。我错过了什么？请帮忙。

这是完整的代码：

//import 'dart:html';

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

void main() => runApp(MyApp());

// ignore: must_be_immutable
class MyApp extends StatelessWidget {
  var sum = 25;
  var _result = 0;

  //static int _result = 0;

  //String resultS;
  //= _result.toString();

  void callForLoop() {
    print('The sum of ' '$sum' ' with 5 digits');
    for (int z = 1; z <= 9; z++) {
      for (int y = 1; y <= 9; y++) {
        for (int x = 1; x <= 9; x++) {
          for (int w = 1; w <= 9; w++) {
            for (int v = 1; v <= 9; v++) {
              if (z + y + x + w + v == sum) {
                if (z < y) {
                  if (y < x) {
                    if (x < w) {
                      if (w < v) {
                        _result = (z + y + x + w + v);
                        print('$z + $y + $x + $w + $v');

                        //style: Theme.of(context).textTheme.headline4,
                        continue;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    //resultS = _result.toString();
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
          Text('$_result'),
          //style: Theme.of(context).textTheme.headline4,
          Container(
              margin: const EdgeInsets.fromLTRB(20, 0, 20, 0),
              child: RaisedButton(
                onPressed: () => callForLoop(),
                child: Text('Call For Loop'),
                textColor: Colors.white,
                color: Colors.lightBlue,
                padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
              )),
        ]))));
  }
}
 

Answer 1

将您的 StatelessWidget 转换为 StatefulWidget。如果使用 Android Studio，请突出显示类名，右键单击它，然后选择“Convert to StatefulWidget”。转换完成后，使用 setState() 函数将在其中为 _result 分配新值的代码行包装起来，如下所示：

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

void main() => runApp(MyApp());

// ignore: must_be_immutable
class MyApp extends StatelessWidget {
  var sum = 25;
  var _result = 0;

  String _display = "";
  //static int _result = 0;

  //String resultS;
  //= _result.toString();

  void callForLoop() {
    print('The sum of ' '$sum' ' with 5 digits');
    for (int z = 1; z <= 9; z++) {
      for (int y = 1; y <= 9; y++) {
        for (int x = 1; x <= 9; x++) {
          for (int w = 1; w <= 9; w++) {
            for (int v = 1; v <= 9; v++) {
              if (z + y + x + w + v == sum) {
                if (z < y) {
                  if (y < x) {
                    if (x < w) {
                      if (w < v) {
                        _display = '$z + $y + $x + $w + $v';

                        //style: Theme.of(context).textTheme.headline4,
                        continue;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    //resultS = _result.toString();
    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
          Text(_display),
          //style: Theme.of(context).textTheme.headline4,
          Container(
              margin: const EdgeInsets.fromLTRB(20, 0, 20, 0),
              child: RaisedButton(
                onPressed: () => callForLoop(),
                child: Text('Call For Loop'),
                textColor: Colors.white,
                color: Colors.lightBlue,
                padding: EdgeInsets.fromLTRB(12, 12, 12, 12),
              )),
        ]))));
  }
}

setState() 函数调用 build() 方法并在屏幕上重绘小部件。因此，当您在我向您展示的 setState() 方法中为 _result 分配一个新值时，它应该使用新值更新 Text 小部件。