SetState不更新Text小部件内的变量

Question

我遇到一个问题，我正在尝试为有状态计算器小部件创建（BMIState）；调用calculate（）方法后，我看不到计算结果。

预期的行为是，调用result.toString()的Text小部件将基于来自两个文本控制器的输入来显示计算结果。

但是，即使在调用calculate()并使用result更改setState()的值之后，“文本”小部件仍会以其初始值的toString返回“结果”（即null。

import 'package:flutter/material.dart';

class BMIPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BMIState();
}

class BMIState extends State {
  TextEditingController mController = TextEditingController();
  TextEditingController kgController = TextEditingController();
  double result = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
            child: ListView(
              children: <Widget>[
                Column(
                  children: <Widget>[
                    TextField(
                      controller: mController,
                      keyboardType: TextInputType.number,
                      ),
                    ),
                        child: TextField(
                          controller: kgController,
                          keyboardType: TextInputType.number,),
                       ),
                    FlatButton(
                      onPressed: () {
                        calculate();
                      },
                    ),
                    Column(
                      children: <Widget>[
                        Text(
                          "BMI",
                          style: TextStyle(
                              fontSize: 40, fontWeight: FontWeight.w600, color: Colors.orangeAccent),
                        ),
                        Text(
                          result.toString(),
                          style: TextStyle(
                              fontSize: 40, fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ],             
              ],
            )));
  }
  void calculate() {
    double height = double.tryParse(mController.text);
    double weight = double.tryParse(kgController.text);

    setState(() {
      result = weight ~/ height * height;
    });
  }
}

Answer 1

您可以在下面复制粘贴运行完整代码
步骤1：您需要使用class BMIState extends State<BMIPage> {而不是class BMIState extends State {

步骤2：Scaffold body而非child

工作演示

完整代码

import 'package:flutter/material.dart';

class BMIPage extends StatefulWidget {
  @override
  BMIState createState() => BMIState();
}

class BMIState extends State<BMIPage> {
  TextEditingController mController = TextEditingController();
  TextEditingController kgController = TextEditingController();
  double result = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(children: <Widget>[
      Column(
        children: <Widget>[
          TextField(
            controller: mController,
            keyboardType: TextInputType.number,
          ),
          TextField(
            controller: kgController,
            keyboardType: TextInputType.number,
          ),
          FlatButton(
            child: Text("calculate"),
            onPressed: () {
              calculate();
            },
          ),
          Column(
            children: <Widget>[
              Text(
                "BMI",
                style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.w600,
                    color: Colors.orangeAccent),
              ),
              Text(
                result.toString(),
                style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ],
      )
    ]));
  }

  void calculate() {
    double height = double.tryParse(mController.text);
    double weight = double.tryParse(kgController.text);

    print(mController.text);
    print(kgController.text);
    setState(() {
      result = weight ~/ height * height;
    });

    print(result);
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BMIPage(),
    );
  }
}