在按钮单击时更新颤动中的文本字段
Posted
技术标签:
【中文标题】在按钮单击时更新颤动中的文本字段【英文标题】：updating text field in flutter on button click 【发布时间】：2018-10-07 22:07:03 【问题描述】：我正在开发一个关于颤振的应用程序，在主屏幕上我有一个按钮可以打开另一个屏幕，该屏幕位于方法内。在那个屏幕上，我想做一些计算，比如接受用户输入和更新文本字段，单击按钮时调用的方法 calculateAmount 会更新反映在文本字段上的变量 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;
);
【问题讨论】：
您在哪里创建总和金属变量？它不在代码中。 抱歉 dhuma 我忘记在课堂主页添加它们了。 请更新正确的代码，以便我为您提供帮助 它现在更新了... 代码应该只包含重现所需的内容。我无法以任何方式将 Padding 或类似内容与问题相关联。 【参考方案1】：我不太明白您想要的输出是什么，但这个示例可能有助于向您展示代码中哪里出了问题。
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")
],
)
)
);
【讨论】：
感谢您的帮助。你让我明白有状态和无状态小部件之间的区别。 很好的解决方案，你也可以使用clear()将控制器的文本设为空，在这个例子中你可以使用_c.text = ""代替_c.text = ""。【参考方案2】：
你的代码有很多问题。
-
如果您想从 TextField 读取数据，请使用控制器。
On Button Pressed 在 setState() 方法中进行计算。
由于您想在文本中再次显示计算值，您必须创建一个 StateFullWidget 以便在调用 setState() 时重新渲染并显示更新后的值。
希望对你有帮助。
【讨论】：
以上是关于在按钮单击时更新颤动中的文本字段的主要内容，如果未能解决你的问题，请参考以下文章
文本字段值已更新并保存，但当再次加载表单并单击按钮时，字段会重置为默认值
在 Cocoa/Interface Builder 中，单击按钮后如何清除文本字段中的文本