flutter - 在按钮上的文本字段小部件中显示输出 在 Flutter 中单击按钮计算后单击按钮
问题描述
我有三个不同的小部件(文本字段),我需要一个来输入,另外两个在单击按钮后显示计算结果。在这种情况下,一个文本字段以开尔文为单位显示温度,另外两个以华氏温度和摄氏度显示结果。如果 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, bottom: formBorders),
child: TextField(
controller: farenheitController,
decoration: InputDecoration(
labelText: 'Temperature in FarenHeit',
hintText: 'e.g 25',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
keyboardType: TextInputType.number,
)),
Padding(
padding: EdgeInsets.only(top: formBorders, bottom: formBorders),
child: TextField(
controller: kelvinController,
decoration: InputDecoration(
labelText: 'Temperature in Kelvin',
hintText: 'e.g 25',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
keyboardType: TextInputType.number,
),
),
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,
textColor: Theme.of(context).primaryColorDark,
child: Text(
'Reset',
textScaleFactor: 1.5,
),
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 = '';
});
}
}
`
解决方案
此解决方案将起作用,但您肯定需要进行一些代码更改,例如在转换器方法中处理 null 情况。
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, bottom: formBorders),
child: TextField(
controller: farenheitController,
decoration: InputDecoration(
labelText: 'Temperature in FarenHeit',
hintText: 'e.g 25',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
keyboardType: TextInputType.number,
)),
Padding(
padding: EdgeInsets.only(top: formBorders, bottom: formBorders),
child: TextField(
controller: kelvinController,
decoration: InputDecoration(
labelText: 'Temperature in Kelvin',
hintText: 'e.g 25',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
keyboardType: TextInputType.number,
),
),
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,
textColor: Theme.of(context).primaryColorDark,
child: Text(
'Reset',
textScaleFactor: 1.5,
),
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 = '';
});
}
}
推荐阅读
- python - 针对这个特定问题在 python 中的有效编码
- google-cloud-platform - 部署函数时向 Google Cloud Functions 触发主题添加标签
- r - 有没有办法强制自变量的系数在 R 中使用的线性回归模型中为正系数?
- c++ - 找到多阵列的频率
- bash - 像使用 GUI 文件管理器一样在终端中剪切和粘贴文件?
- laravel - 我正在尝试使用 laravel 7 将多个图像下载为与 Id 相关的 zip 文件
- android - Flutter 应用程序卡在安装时出现白屏
- pandas - 在 Python 中使用 CRU 数据集时重命名时间维度
- python - 如何在 tkinter 中制作具有左右功能的图像查看器?
- javascript - 如何从显示画布或图像的外部网站(带有 url 参数)嵌入图片