为什么新值没有显示在屏幕上？

Question

我正在更改 Screen2 class 中文本小部件的值，即 tex 变量，但它没有在屏幕上更新。我正在 RaisedButton 中打印 tex 值，它正在为我打印我分配给文本的新值，但它没有在屏幕上更新。

这些是我的代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Screen1(),
    );
  }
}

class Screen1 extends StatefulWidget {
  @override
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  var tec1 = TextEditingController(text: "");
  var tec2 = TextEditingController(text: "");
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 1'),
      ),
      body: Center(
        child: Column(
          children: [
            TextField(
              controller: tec1,
            ),
            TextField(
              controller: tec2,
            ),
            RaisedButton(
              child: Text("calculate"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) =>
                        Screen2(Operation(tec1.text, tec2.text)),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Operation {
  String n1;
  String n2;
  Operation(this.n1, this.n2);
}

class Screen2 extends StatefulWidget {
  final Operation par;
  Screen2(this.par);

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

class _Screen2State extends State<Screen2> {
  String tex;
  Widget build(BuildContext context) {
    var n1 = double.parse(widget.par.n1);
    var n2 = double.parse(widget.par.n2);
    var plus = n1 + n2;
    var min = n1 - n2;
    var div = n1 / n2;
    var mul = n1 * n2;
    tex = '${widget.par.n1} + ${widget.par.n2} = $plus';
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 2'),
      ),
      body: Center(
        child: Column(
          children: [
            Text(
              tex,
              style: TextStyle(fontSize: 20),
            ),
            Center(
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: RaisedButton(
                      child: Icon(Icons.add),
                      onPressed: () {
                        setState(() {
                          tex = '${widget.par.n1} + ${widget.par.n2} = $plus';
                        });
                      },
                    ),
                  ),
                  RaisedButton(
                    child: Text("-"),
                    onPressed: () {
                      setState(() {
                        tex = '${widget.par.n1} - ${widget.par.n2} = $min';
                        print(tex); 
                      });
                    },
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  RaisedButton(
                    child: Text("*"),
                    onPressed: () {
                      setState(() {
                        tex = '${widget.par.n1} * ${widget.par.n2} = $mul';
                      });
                    },
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  RaisedButton(
                    child: Text("/"),
                    onPressed: () {
                      setState(
                        () {
                          tex = '${widget.par.n1} / ${widget.par.n2} = $div';
                        },
                      );
                    },
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

错误发生是因为 tex = '${widget.par.n1} + ${widget.par.n2} = $plus'; 每次按下按钮时（使用 setState 时）重建 UI 时被调用。

此代码有效

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Screen1(),
    );
  }
}

class Screen1 extends StatefulWidget {
  @override
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  var tec1 = TextEditingController(text: "");
  var tec2 = TextEditingController(text: "");
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 1'),
      ),
      body: Center(
        child: Column(
          children: [
            TextField(
              controller: tec1,
            ),
            TextField(
              controller: tec2,
            ),
            RaisedButton(
              child: Text("calculate"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) =>
                        Screen2(Operation(tec1.text, tec2.text)),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Operation {
  String n1;
  String n2;
  Operation(this.n1, this.n2);
}

class Screen2 extends StatefulWidget {
  final Operation par;
  Screen2(this.par);

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

class _Screen2State extends State<Screen2> {
  String tex;
  var n1;
  var n2;
  var plus;
  var min;
  var div;
  var mul;
  void initState() {
    super.initState();
    n1 = double.parse(widget.par.n1);
    n2 = double.parse(widget.par.n2);
    plus = n1 + n2;
    min = n1 - n2;
    div = n1 / n2;
    mul = n1 * n2;
    tex = '${widget.par.n1} + ${widget.par.n2} = $plus';
  }

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen 2'),
      ),
      body: Center(
        child: Column(
          children: [
            Text(
              tex ?? '',
              style: TextStyle(fontSize: 20),
            ),
            Center(
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: RaisedButton(
                      child: Icon(Icons.add),
                      onPressed: () {
                        setState(() {
                          tex = '${widget.par.n1} + ${widget.par.n2} = $plus';
                        });
                      },
                    ),
                  ),
                  RaisedButton(
                    child: Text("-"),
                    onPressed: () {
                      setState(() {
                        tex = '${widget.par.n1} - ${widget.par.n2} = $min';
                        print(tex);
                      });
                    },
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  RaisedButton(
                    child: Text("*"),
                    onPressed: () {
                      setState(() {
                        tex = '${widget.par.n1} * ${widget.par.n2} = $mul';
                      });
                    },
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  RaisedButton(
                    child: Text("/"),
                    onPressed: () {
                      setState(
                        () {
                          tex = '${widget.par.n1} / ${widget.par.n2} = $div';
                        },
                      );
                    },
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

为什么新值没有显示在屏幕上？

Why the new value is not displaying on screen?

widget

dart

flutter

flutter-dependencies