在按钮上单击计算后，在按钮上单击按钮后在文本字段小部件中显示输出

如何解决在按钮上单击计算后，在按钮上单击按钮后在文本字段小部件中显示输出

我有三个不同的小部件（文本字段），我需要一个进行输入，另外两个要在单击按钮后计算后显示结果。在这种情况下，一个文本字段以开尔文为单位显示温度，另外两个文本字段以华氏和摄氏为单位显示结果。如果Celcius文本字段接受输入，则转换后的另外两个将显示结果。请原谅我的代码可能很脏，但我是绿色的。每当在任何一个文本字段中完成输入时，我都会看到结果显示。

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

class TemperatureCalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Temperature Calculator',theme: ThemeData(
        primaryColor: Colors.cyanAccent,),home: new TemperatureHome(),);
  }
}

class TemperatureHome extends StatefulWidget {
  @override
  createState() => TemperatureState();
}

class TemperatureState extends State<TemperatureHome> {
  String result = '';
  final temperatureMeasurer = ['Celcius','Kelvin','farenheit'];
  double formBorders = 6.0;
  TextEditingController celciusController = TextEditingController();
  TextEditingController farenheitController = TextEditingController();
  TextEditingController kelvinController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Temperature Converter"),backgroundColor: Colors.deepOrange,body: Column(children: <Widget>[
        Padding(
            padding: EdgeInsets.only(top: formBorders,bottom: formBorders),child: TextField(
              controller: celciusController,decoration: Inputdecoration(
                  labelText: 'Temperature in degrees Celcius',hintText: 'e.g 25',border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0))),keyboardType: TextInputType.number,)),Padding(
            padding: EdgeInsets.only(top: formBorders,child: TextField(
              controller: farenheitController,decoration: Inputdecoration(
                  labelText: 'Temperature in farenHeit',Padding(
          padding: EdgeInsets.only(top: formBorders,child: TextField(
            controller: kelvinController,decoration: Inputdecoration(
                labelText: 'Temperature in Kelvin',border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0))),Row(
          children: <Widget>[
            RaisedButton(
              color: Theme.of(context).buttonColor,textColor: Theme.of(context).primaryColorDark,onpressed: () {
              setState(() {
                
              });
                  
              },child: Text(
                'Convert',textScaleFactor: 1.5,RaisedButton(
                color: Theme.of(context).buttonColor,child: Text(
                  'Reset',onpressed: () {
                  setState(() {
                    reset();
                  });
                }),],]),);
  }

  double converter() {
    double celciustemp = double.parse(celciusController.text);
    double farenheitTemp = double.parse(farenheitController.text);
    double kelvinTemp = double.parse(kelvinController.text);

    double farenheitToCelsius = (farenheitTemp - 32) * 5 / 9;
    double farenheitToKelvin = (farenheitTemp - 32) * 5 / 9 + 273.15;
    double celciusTofarenheit = (celciustemp * 9 / 5) + 32;
    double celsiusToKelvin = celciustemp + 273.15;
    double kelvinTofarenheit = (kelvinTemp - 273.15) * 9 / 5 + 32;
    double kelvinToCelcius = kelvinTemp - 273.15;

    //if()
  }

  void reset() {
    celciusController.text = '';
    farenheitController.text = '';
    kelvinController.text = '';
    setState(() {
      result = '';
    });
  }
}
`

解决方法

此解决方案可以工作，但您肯定需要进行一些代码更改，例如在转换器方法中处理空情况。

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

class TemperatureCalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Temperature Calculator',theme: ThemeData(
        primaryColor: Colors.cyanAccent,),home: new TemperatureHome(),);
  }
}

class TemperatureHome extends StatefulWidget {
  @override
  createState() => TemperatureState();
}

class TemperatureState extends State<TemperatureHome> {
  String result = '';
  final temperatureMeasurer = ['Celcius','Kelvin','Farenheit'];
  double formBorders = 6.0;
  TextEditingController celciusController = TextEditingController();
  TextEditingController farenheitController = TextEditingController();
  TextEditingController kelvinController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Temperature Converter"),backgroundColor: Colors.deepOrange,body: Column(children: <Widget>[
        Padding(
            padding: EdgeInsets.only(top: formBorders,bottom: formBorders),child: TextField(
              controller: celciusController,decoration: InputDecoration(
                  labelText: 'Temperature in Degrees Celcius',hintText: 'e.g 25',border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0))),keyboardType: TextInputType.number,)),Padding(
            padding: EdgeInsets.only(top: formBorders,child: TextField(
              controller: farenheitController,decoration: InputDecoration(
                  labelText: 'Temperature in FarenHeit',Padding(
          padding: EdgeInsets.only(top: formBorders,child: TextField(
            controller: kelvinController,decoration: InputDecoration(
                labelText: 'Temperature in Kelvin',border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0))),Row(
          children: <Widget>[
            RaisedButton(
              color: Theme.of(context).buttonColor,textColor: Theme.of(context).primaryColorDark,onPressed: () {
                setState((){
                  converter();    
                });
              
                  
              },child: Text(
                'Convert',textScaleFactor: 1.5,RaisedButton(
                color: Theme.of(context).buttonColor,child: Text(
                  'Reset',onPressed: () {
                  setState(() {
                    reset();
                  });
                }),],]),);
  }

  void converter() {
    double celciusTemp = double.tryParse(celciusController.text);
    double farenheitTemp = double.tryParse(farenheitController.text);
    double kelvinTemp = double.tryParse(kelvinController.text);

    double farenheitToCelsius = ((farenheitTemp ?? 0) - 32) * 5 / 9;
    double farenheitToKelvin = ((farenheitTemp ?? 0) - 32) * 5 / 9 + 273.15;
    double celciusToFarenheit = ((celciusTemp ?? 0) * 9 / 5) + 32;
    double celsiusToKelvin = (celciusTemp ?? 0) + 273.15;
    double kelvinToFarenheit = ((kelvinTemp ?? 0) - 273.15) * 9 / 5 + 32;
    double kelvinToCelcius = (kelvinTemp ?? 0) - 273.15;
    
    if(celciusController.text.isNotEmpty 
       && double.tryParse(celciusController.text) != null){
     
        farenheitController.text = celciusToFarenheit.toString();
        kelvinController.text = celsiusToKelvin.toString();
      
    }else if(farenheitController.text.isNotEmpty 
       && double.tryParse(farenheitController.text) != null){
      celciusController.text = farenheitToCelsius.toString();
      kelvinController.text = farenheitToKelvin.toString();
    }else if(kelvinController.text.isNotEmpty 
       && double.tryParse(kelvinController.text) != null){
      celciusController.text = kelvinToCelcius.toString();
      farenheitController.text = kelvinToFarenheit.toString();
    }

    //if()
  }

  void reset() {
    celciusController.text = '';
    farenheitController.text = '';
    kelvinController.text = '';
    setState(() {
      result = '';
    });
  }
}

,

这项工作：

if (celciusController.text != null && celciusController.text.length > 0) {
  farenheitController.text = (int.parse(celciusController.text)* 9 / 5) + 32;
  kelvinController.text = int.parse(celciusController.text)+ 273.15;
} 
else if (farenheitController.text != null && farenheitController.text.length > 0) {
  celciusController.text = (int.parse(farenheitController.text)- 32) * 5 / 9;
  kelvinController.text = (int.parse(farenheitController.text)- 32) * 5 / 9 + 273.15;
}
else{
  ....
}

这行吗？

,

您可以在initState（）中将侦听器添加到文本控制器。一个变通方法的简单示例如下所示：

  @override
  void dispose() {        
    celciusController.dispose();
    farenheitController.dispose();
    kelvinController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    celciusController.addListener((){
        
        setState(() {
                  converter();
                });
    });
    farenheitController.addListener((){
        
        setState(() {
                  converter();
                });
    });
    kelvinController.addListener((){
        
        setState(() {
                  converter();
                });
    });

    super.initState();
  }

从official document中了解更多信息。