flutter - SetState 不更新文本小部件中的变量

Question

我在尝试创建有状态计算器小部件时遇到问题（BMIState）；调用 calculate() 方法后，我无法看到计算结果。

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

但是，即使在调用calculate()并更改resultusing的值之后setState()，Text 小部件仍将“result”作为其初始化值（即null）的 toString 返回。

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;
    });
  }
}

标签： flutter

Answer 1

您可以在第 1 步下面复制粘贴运行完整代码
：您需要使用class BMIState extends State<BMIPage> {notclass 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(),
    );
  }
}