我正在开发一个关于 flutter 的应用程序，在主屏幕上我有一个按钮可以打开另一个屏幕，该屏幕位于方法内。在那个屏幕上，我想做一些计算，比如接受用户输入和更新文本字段，单击按钮时调用的方法 calculateAmount 会更新反射(reflect)在文本字段上的变量 total但是文本字段没有更新，它只会在键盘上按下完成时更新......如何完成这项任务。 这是我的代码:
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
debugShowCheckedModeBanner: false,
home: new homePage()
));
}
class homePage extends StatefulWidget {
@override
homePageState createState() => new homePageState();
}
class homePageState extends State<homePage> {
double metal = 0.0;
double total = 0.0;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("APP-Title",), backgroundColor: Colors.orange),
body: new Container(
child: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(child: new RaisedButton.icon(
color: Colors.orange,
icon: const Icon(
Icons.info, size: 25.0, color: Colors.white,),
label: new Text('Calculate', style: new TextStyle(
color: Colors.white
)),
onPressed: () {
calculateWindow();
),),
],
)
],
)
),
),
);
}
void calculateWindow(){
Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Calculator'),
backgroundColor: Colors.orange,
),
body: new ListView(
children: <Widget>[
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
height: 50.0,
width: 360.0,
decoration: new BoxDecoration(
color: Colors.orange,
shape: BoxShape.rectangle,
),
child: new Center(
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
child: new Text("Gold & Silver in Sold & Ornaments",
style: textStyle,
textAlign: textAlign
),
),
),
new Container(
height: 40.0,
width: 80.0,
decoration: new BoxDecoration(
color: Colors.white),
child: new TextField(
keyboardType: TextInputType.number,
onSubmitted : (String value) {
try {
metal = double.parse(value.toString());
print(total);
} catch (exception) {
metal = 0.0;
}
}
),
),
],
),
),
),
],
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: new Container(
width: 50.0,
child: new RaisedButton.icon(
color: Colors.grey,
icon: const Icon(
Icons.check, size: 25.0, color: Colors.white,),
label: new Text('Calculate', style: new TextStyle(
color: Colors.white,
)),
onPressed: calculateAmount,
),
),
),
],
),
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Container(
height: 50.0,
width: 350.0,
decoration: new BoxDecoration(
color: Colors.blueGrey,
shape: BoxShape.rectangle,
),
child: new Center(
child: new Row(
children: <Widget>[
new Expanded(
child: new Container(
child: new Text("Total Amount:",
style: new TextStyle(
color: Colors.white,),
textAlign: TextAlign.left,),
),
),
new Container(
child: new Text(
'$total',
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
style: textStyle,
textDirection: TextDirection.ltr,
)
),
],
),
),
),
],
),
],
),
);
},
),
);
}
void calculateAmount(){
setState((){
total = metal + 0.025;
});
}
}
最佳答案
我不太了解您想要的输出是什么，但这个示例可能有助于向您展示代码中哪里出了问题。
class TextFieldEx extends StatefulWidget {
@override
_TextFieldExState createState() => new _TextFieldExState();
}
class _TextFieldExState extends State<TextFieldEx> {
TextEditingController _c ;
double _metal = 0.0;
double _total = 0.0;
String _text = "initial";
@override
void initState() {
_c = new TextEditingController();
super.initState();
}
@override
void dispose(){
_c?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new TextField(
keyboardType: TextInputType.number,
onChanged: (v)=>setState((){_text=v;}),
controller: _c,
),
new RaisedButton(
child: new Text("Update"),
onPressed: (){
setState((){
_metal = double.parse(_c.text);
_total = _metal+0.025;
_c.text = "";
});
},
),
new Text("Text Input: $_text"),
new Text("Metal :$_metal"),
new Text("Total:$_total")
],
)
)
);
}
}
关于dart - 在按钮单击时更新 flutter 中的文本字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50056003/