Question

我该如何在Flutter中解决该问题，在本机Android中id是什么意思？我做了一个计算器，但结果没有出现在“文本”小部件中。按下其中一个算术运算符

它应该在文本“ null”上显示结果，

但什么也没发生。

我已附上问题图片这是代码

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

void main() {
runApp(MaterialApp(home: Calculator()));
}

class Calculator extends StatefulWidget {
@override
_CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State<Calculator> {
var theResult, firstNum, secondNum;
void divideTheNums() {
setState(() {
theResult = firstNum / secondNum;
});
}

void multiplyTheNums() {
setState(() {
theResult = firstNum * secondNum;
});
}

void addTheNums() {
setState(() {
theResult = firstNum + secondNum;
});
}

void subtractTheNums() {
setState(() {
theResult = firstNum - secondNum;
});
}

Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
backgroundColor: Colors.redAccent,
centerTitle: true,
title: Text(
"Calculator",
),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"OutPut:",
style: TextStyle(
fontSize: 25.0, fontWeight: FontWeight.w700),
),
Text(theResult.toString()),
Container(
margin: EdgeInsets.only(bottom: 30.0), child: Text(""))
],
),
Container(
margin: EdgeInsets.only(bottom: 20.0),
child: TextField(
controller: TextEditingController(),
decoration: InputDecoration(
hintText: "Enter First Number:",
border: OutlineInputBorder()),
),
),
TextField(
controller: TextEditingController(),
decoration: InputDecoration(
hintText: "Enter Second Number:",
border: OutlineInputBorder()),
), Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 20.0),
child: RaisedButton(
color: Colors.redAccent,
onPressed: divideTheNums,
child: Text(
"/",
style: TextStyle(color: Colors.white, fontSize: 23.0),
),
),
),
Container(
margin: EdgeInsets.only(),
child: RaisedButton(
color: Colors.redAccent,
onPressed: multiplyTheNums,
child: Text(
"*",
style: TextStyle(color: Colors.white, fontSize: 23.0),
),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 20.0, top: 20.0),
child: RaisedButton(
color: Colors.redAccent,
highlightColor: Colors.white,
onPressed: subtractTheNums,
child: Text(
"-",
style: TextStyle(color: Colors.white, fontSize: 23.0),
),
),
),
Container(
margin: EdgeInsets.only(top: 20.0),
child: RaisedButton(
color: Colors.redAccent,
onPressed: addTheNums,
child: Text(
"+",
style: TextStyle(color: Colors.white, fontSize: 23.0),
),
),
)
],
)
],
),
),
),
),
);
}
}

Answer 1

问题是您在任何地方都没有收到 TextField 的值，而您正在分配第一个和第二个值的值，默认为null。

要解决此问题，您可以使用 Form 和 TextFormField 来实现。我认为以下代码可帮助您清除想法。

您还可以在TextFormField中使用验证来验证或检查它是否为空。

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

void main() {
  runApp(MaterialApp(home: Calculator()));
}

class Calculator extends StatefulWidget {
  @override
  _CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State<Calculator> {
  double theResult, firstNum, secondNum;
  final _form =  GlobalKey<FormState>();

  void divideTheNums() {
    _form.currentState.save();
    setState(() {
      theResult = firstNum / secondNum;
    });
  }

  void multiplyTheNums() {
    _form.currentState.save();
    setState(() {
      theResult = firstNum * secondNum;
    });
  }

  void addTheNums() {
    _form.currentState.save();
    setState(() {
      theResult = firstNum + secondNum;
    });
  }

  void subtractTheNums() {
    _form.currentState.save();
    setState(() {
      theResult = firstNum - secondNum;
    });
  }

  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        backgroundColor: Colors.redAccent,
        centerTitle: true,
        title: Text(
          "Calculator",
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Container(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "OutPut:",
                      style: TextStyle(
                          fontSize: 25.0, fontWeight: FontWeight.w700),
                    ),
                    Text(theResult==null?"":theResult.toString()),
                    Container(
                        margin: EdgeInsets.only(bottom: 30.0), child: Text(""))
                  ],
                ),
                Form(
                  key: _form,
                  child: Container(
                    margin: EdgeInsets.only(bottom: 20.0),
                    child: Column(
                      children: <Widget>[
                        TextFormField(
                          controller: TextEditingController(),
                          onSaved: (value){
                            firstNum = double.parse(value);
                          },
                          keyboardType: TextInputType.numberWithOptions(),
                          decoration: InputDecoration(
                              hintText: "Enter First Number:",
                              border: OutlineInputBorder()),
                        ),
                        Padding(padding: EdgeInsets.only(top: 10.0),),
                        TextFormField(
                          controller: TextEditingController(),
                          onSaved: (value){
                            secondNum = double.parse(value);
                          },
                          keyboardType: TextInputType.numberWithOptions(),
                          decoration: InputDecoration(
                              hintText: "Enter Second Number:",
                              border: OutlineInputBorder()),
                        ),
                      ],
                    ),
                  ),
                ),
                Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(right: 20.0),
                      child: RaisedButton(
                        color: Colors.redAccent,
                        onPressed: divideTheNums,
                        child: Text(
                          "/",
                          style: TextStyle(color: Colors.white, fontSize: 23.0),
                        ),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(),
                      child: RaisedButton(
                        color: Colors.redAccent,
                        onPressed: multiplyTheNums,
                        child: Text(
                          "*",
                          style: TextStyle(color: Colors.white, fontSize: 23.0),
                        ),
                      ),
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.only(right: 20.0, top: 20.0),
                      child: RaisedButton(
                        color: Colors.redAccent,
                        highlightColor: Colors.white,
                        onPressed: subtractTheNums,
                        child: Text(
                          "-",
                          style: TextStyle(color: Colors.white, fontSize: 23.0),
                        ),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 20.0),
                      child: RaisedButton(
                        color: Colors.redAccent,
                        onPressed: addTheNums,
                        child: Text(
                          "+",
                          style: TextStyle(color: Colors.white, fontSize: 23.0),
                        ),
                      ),
                    )
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

为不同的用户输入使用不同的 TextEditingController

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

void main() {
  runApp(MaterialApp(home: Calculator()));
}

class Calculator extends StatefulWidget {
  @override
  _CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State<Calculator> {
  TextEditingController first = TextEditingController();
  TextEditingController second = TextEditingController();
  double theResult=0, firstNum=0, secondNum=0;

  void divideTheNums() {
   setState(() {
     firstNum = double.parse(first.text);
     secondNum = double.parse(second.text);
     theResult = firstNum / secondNum;
   });
  }

  void multiplyTheNums() {
    setState(() {
      firstNum = double.parse(first.text);
      secondNum = double.parse(second.text);
      theResult = firstNum * secondNum;
    });
  }

  void addTheNums() {
   setState(() {
     firstNum = double.parse(first.text);
     secondNum = double.parse(second.text);
     theResult = firstNum + secondNum;
   });
  }

  void subtractTheNums() {
   setState(() {
    firstNum = double.parse(first.text);
    secondNum = double.parse(second.text);
    theResult = firstNum - secondNum;
   });
  }

 Widget build(BuildContext context) {
   return new Scaffold(
     resizeToAvoidBottomPadding: false,
     appBar: AppBar(
     backgroundColor: Colors.redAccent,
      centerTitle: true,
      title: Text(
       "Calculator",
      ),
  ),
  body: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Container(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  "OutPut:",
                  style: TextStyle(
                      fontSize: 25.0, fontWeight: FontWeight.w700),
                ),
                Text(theResult.toString()),
                Container(
                    margin: EdgeInsets.only(bottom: 30.0), child: Text(""))
              ],
            ),
            Container(
              margin: EdgeInsets.only(bottom: 20.0),
              child: TextField(
                controller: first,
                decoration: InputDecoration(
                    hintText: "Enter First Number:",
                    border: OutlineInputBorder()),
              ),
            ),
            TextField(
              controller: second,
              decoration: InputDecoration(
                  hintText: "Enter Second Number:",
                  border: OutlineInputBorder()),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(right: 20.0),
                  child: RaisedButton(
                    color: Colors.redAccent,
                    onPressed: divideTheNums,
                    child: Text(
                      "/",
                      style: TextStyle(color: Colors.white, fontSize: 23.0),
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(),
                  child: RaisedButton(
                    color: Colors.redAccent,
                    onPressed: multiplyTheNums,
                    child: Text(
                      "*",
                      style: TextStyle(color: Colors.white, fontSize: 23.0),
                    ),
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(right: 20.0, top: 20.0),
                  child: RaisedButton(
                    color: Colors.redAccent,
                    highlightColor: Colors.white,
                    onPressed: subtractTheNums,
                    child: Text(
                      "-",
                      style: TextStyle(color: Colors.white, fontSize: 23.0),
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 20.0),
                  child: RaisedButton(
                    color: Colors.redAccent,
                    onPressed: addTheNums,
                    child: Text(
                      "+",
                      style: TextStyle(color: Colors.white, fontSize: 23.0),
                    ),
                  ),
                )
              ],
            )
          ],
        ),
      ),
    ),
  ),
);
}
}

颤振计算器问题

2 个答案: