以下是使用Flutter搭建计算器的步骤：
1. 创建一个新的Flutter项目并命名为calculator。
2. 在lib目录下创建一个名为calculator.dart的文件，并将其作为应用程序的入口文件。
3. 在calculator.dart中导入所需的库：
```
import 'package:flutter/material.dart';
```
4. 创建一个新的StatefulWidget类，名为Calculator。
```
class Calculator extends StatefulWidget {
@override
_CalculatorState createState() => _CalculatorState();
}
```
5. 创建一个新的State类，名为_CalculatorState，并在其中实现UI。
```
class _CalculatorState extends State<Calculator> {
String _output = "0";
String _outputHistory = "";
double num1 = 0.0;
double num2 = 0.0;
String operand = "";
buttonPressed(String buttonText) {
if (buttonText == "CLEAR") {
_outputHistory = "";
_output = "0";
num1 = 0.0;
num2 = 0.0;
operand = "";
} else if (buttonText == "+" ||
buttonText == "-" ||
buttonText == "x" ||
buttonText == "/") {
num1 = double.parse(_output);
operand = buttonText;
_output = "0";
} else if (buttonText == ".") {
if (_output.contains(".")) {
print("Already contains a decimal");
return;
} else {
_output = _output + buttonText;
}
} else if (buttonText == "=") {
num2 = double.parse(_output);
if (operand == "+") {
_output = (num1 + num2).toString();
}
if (operand == "-") {
_output = (num1 - num2).toString();
}
if (operand == "x") {
_output = (num1 * num2).toString();
}
if (operand == "/") {
_output = (num1 / num2).toString();
}
num1 = 0.0;
num2 = 0.0;
operand = "";
} else {
_output = _output + buttonText;
}
setState(() {
_output = double.parse(_output).toStringAsFixed(2);
});
}
Widget buildButton(String buttonText) {
return new Expanded(
child: new OutlineButton(
padding: new EdgeInsets.all(24.0),
child: new Text(
buttonText,
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
onPressed: () => buttonPressed(buttonText),
),
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Calculator"),
),
body: new Container(
child: new Column(
children: <Widget>[
new Container(
alignment: Alignment.centerRight,
padding: new EdgeInsets.symmetric(
vertical: 24.0,
horizontal: 12.0,
),
child: new Text(
_outputHistory,
style: new TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
),
),
),
new Container(
alignment: Alignment.centerRight,
padding: new EdgeInsets.symmetric(
vertical: 24.0,
horizontal: 12.0,
),
child: new Text(
_output,
style: new TextStyle(
fontSize: 48.0,
fontWeight: FontWeight.bold,
),
),
),
new Expanded(
child: new Divider(),
),
new Column(
children: <Widget>[
new Row(
children: [
buildButton("7"),
buildButton("8"),
buildButton("9"),
buildButton("/")
],
),
new Row(
children: [
buildButton("4"),
buildButton("5"),
buildButton("6"),
buildButton("x")
],
),
new Row(
children: [
buildButton("1"),
buildButton("2"),
buildButton("3"),
buildButton("-")
],
),
new Row(
children: [
buildButton("."),
buildButton("0"),
buildButton("00"),
buildButton("+")
],
),
new Row(
children: [
buildButton("CLEAR"),
buildButton("="),
],
),
],
)
],
),
),
);
}
}
```
在上述代码中，我们定义了一个_CalculatorState类，其中包含了一个字符串变量_output，用于存储计算器的输出结果，以及其他变量，用于存储计算器的状态。我们还定义了一个buttonPressed函数，该函数用于处理按下的按钮并更新输出结果。在buildButton函数中，我们创建了一个新的按钮，并将其与buttonPressed函数关联起来。
6. 在Calculator类中，创建一个build函数，用于返回一个MaterialApp并将其包装在Calculator Widget中。
```
class Calculator extends StatefulWidget {
@override
_CalculatorState createState() => _CalculatorState();
}
class CalculatorApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Calculator',
home: Calculator(),
);
}
}
void main() => runApp(CalculatorApp());
```
7. 运行应用程序并测试计算器。
完成上述步骤后，您应该能够成功创建一个基本的Flutter计算器应用程序。您可以根据需要对其进行扩展并添加更多的功能。
577
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
