概要
flutter是一个基于dart语言的框架，所以在编写代码之前，先要熟悉dart语言
计算器很简单，在生活中都用过，这次我们要做的就是最为常见的计算器，我们需要用到以下控件：
1.Textfield × 2（过程+结果）
2.buttonbar（RaisedButton×17+FloatingActionButton×1）
对，就只有两种控件，还是十分easy的
具体过程
这里我们将会详细讲讲制作流程
初始化
在制作之前，我们先得要初始化一下变量
var getthing = TextEditingController();//列的式子得到的结果
var answer = TextEditingController();//答案的值
var sign = "";//现在的符号
var zhiliu = false;//等于号是否在上按下过
以及计算方面
String calulate(String sg){
if(getthing.text[getthing.text.length-1] != "."){
if(sign != ""){
if(sign == "+"){
answer.text = (double.parse(getthing.text.split("+")[0])+double.parse(getthing.text.split("+")[1])).toString();//算之后的结果
getthing.text = answer.text+sg;
sign = sg;
}
else if(sign == "-"){
if(getthing.text[0] == "-"){ //避免负号与减号搞混
answer.text = (0-double.parse(getthing.text.split("-")[1])-double.parse(getthing.text.split("-")[2])).toString();
}
else{
answer.text = (double.parse(getthing.text.split("-")[0])-double.parse(getthing.text.split("-")[1])).toString();
}
getthing.text = answer.text+sg;
sign = sg;
}
else if(sign == "×"){
answer.text = (double.parse(getthing.text.split("×")[0])*double.parse(getthing.text.split("×")[1])).toString();
getthing.text = answer.text+sg;
sign = sg;
}
else if(sign == "÷"){
answer.text = (double.parse(getthing.text.split("÷")[0])/double.parse(getthing.text.split("÷")[1])).toString();
getthing.text = answer.text+sg;
sign = sg;
}
return(answer.text);
}
else{
if(zhiliu){
getthing.text = answer.text;
zhiliu = false;
}
getthing.text += sg;
sign = sg;
}
}
return("haveproblem");
}
这便是我们要的计算和变量的初始化
控件
以下一共有20个控件，我们的body部分用的是Column竖向排列，所以我们搭建也要从上到下以row为行分别创建
Textfield
这里有两个，一个是展示过程，另一个是展示结果，之所以这样是为了防止算到结果突然忘了前面写了些啥。两者代码都差不多，都是只读onlyread
Textfield代码：
Expanded(
child: Column(
children: <Widget>[
TextField(
controller: getthing,
cursorColor: Colors.blue,
cursorHeight: 25,
cursorRadius: const Radius.circular(10),
cursorWidth: 2,
showCursor: true,
readOnly: true,
maxLength: 50,
decoration: const InputDecoration(
isCollapsed: true,
contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
),
maxLines: null,
minLines: 1,
),
TextField(
controller: answer,
cursorColor: Colors.blue,
cursorHeight: 25,
cursorRadius: const Radius.circular(10),
cursorWidth: 2,
showCursor: true,
readOnly: true,
maxLength: 50,
decoration: const InputDecoration(
isCollapsed: true,
contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
),
maxLines: null,
minLines: 1,
),
],
)
),
这里要添加expanded是因为我们要让后面打数字的控件都位列于页面最低端，其中用Column是因为要两个竖向排列。
buttonbar
buttonbar里面分别有一下几种控件（按行排列）
第1行 —— 撤回，清空
第2行 —— + - × ÷
第3行 —— 1 2 3
第4行 —— 4 5 6
第5行 —— 7 8 9
第6行 —— 0 .
第7行 —— =（不太雅观所以没填上去）
以下便是其代码（以row为分割线）
Container(
alignment:Alignment.center,
child:
ButtonBar(
alignment:MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
buttonTextTheme: ButtonTextTheme.primary,
children:<Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
// ignore: sort_child_properties_last
child: const Text('撤回'),
onPressed: (){
if(getthing.text[getthing.text.length-1]=="+"|| getthing.text[getthing.text.length-1]=="-"||getthing.text[getthing.text.length-1]=="×"||getthing.text[getthing.text.length-1]=="除"){
sign = "";
getthing.text = getthing.text.substring(0,getthing.text.length-1 );
}else if(getthing.text[getthing.text.length-1]=="0"&& getthing.text[getthing.text.length-2]=="."){
getthing.text = getthing.text.substring(0,getthing.text.length-2 );
}else{
getthing.text = getthing.text.substring(0,getthing.text.length-1 );
}
if(getthing.text.contains("+")){
sign="+";
}
else if(getthing.text.contains("-")){
sign="-";
}
else if(getthing.text.contains("×")){
sign="×";
}
else if(getthing.text.contains("÷")){
sign="÷";
}
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
)
),
RaisedButton(
// ignore: sort_child_properties_last
child: const Text('清空'),
onPressed: (){
zhiliu=false;
sign="";
answer.text = "";
getthing.text = "";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
)
),
]
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
onPressed: (){
var as = calulate("+");
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('+')
),
RaisedButton(
onPressed: (){
var as = calulate("-");
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('-')
),
RaisedButton(
onPressed: (){
var as = calulate("×");
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('×')
),
RaisedButton(
onPressed: (){
var as = calulate("÷");
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('÷')
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
onPressed: (){
getthing.text += "1";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('1')
),
RaisedButton(
onPressed: (){
getthing.text += "2";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('2')
),
RaisedButton(
onPressed: (){
getthing.text += "3";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('3')
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
onPressed: (){
getthing.text += "4";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('4')
),
RaisedButton(
onPressed: (){
getthing.text += "5";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('5')
),
RaisedButton(
onPressed: (){
getthing.text += "6";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('6')
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
onPressed: (){
getthing.text += "7";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('7')
),
RaisedButton(
onPressed: (){
getthing.text += "8";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('8')
),
RaisedButton(
onPressed: (){
getthing.text += "9";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
),
child: const Text('9')
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
// ignore: sort_child_properties_last
child: const Text('0'),
onPressed: (){
getthing.text += "0";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
)
),
RaisedButton(
// ignore: sort_child_properties_last
child: const Text('.'),
onPressed: (){
getthing.text += ".";
},
shape: const BeveledRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(12.0))
)
),
],
),
],
),
),
FloatingActionButton(
onPressed: (){
if(getthing.text[getthing.text.length-1] != "."){
zhiliu=true;
if(sign == "+"){
answer.text = (double.parse(getthing.text.split("+")[0])+double.parse(getthing.text.split("+")[1])).toString();
sign = "";
}
else if(sign == "-"){
if(getthing.text[0] == "-"){ //避免负号与减号搞混
answer.text = (0-double.parse(getthing.text.split("-")[1])-double.parse(getthing.text.split("-")[2])).toString();
}
else{
answer.text = (double.parse(getthing.text.split("-")[0])-double.parse(getthing.text.split("-")[1])).toString();
}
sign = "";
}
else if(sign == "×"){
answer.text = (double.parse(getthing.text.split("×")[0])*double.parse(getthing.text.split("×")[1])).toString();
sign = "";
}
else if(sign == "÷"){
answer.text = (double.parse(getthing.text.split("÷")[0])/double.parse(getthing.text.split("÷")[1])).toString();
sign = "";
}
}
},
backgroundColor: Colors.yellow
),
看起来很长，其实大部分都是复制粘贴下来的（特别是数字部分，之间只有两段代码不同），其原理还是十分简单的
最后的界面如下图
这便是这一章全部内容了，有问题可以到下方评论区来询问，谢谢
425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
