📅  最后修改于: 2023-12-03 15:36:35.583000             🧑  作者: Mango
Flutter是Google开发的移动应用程序SDK。它可以使用单个代码库构建高性能,高保真的iOS和Android应用程序。Flutter提供了丰富的小部件库和工具,以帮助开发人员快速构建美观的用户界面。
在本教程中,我们将使用Flutter构建一个简单的计算器应用程序。这个应用程序将允许用户执行基本的数学运算,如加法,减法,乘法和除法。
在开始构建我们的计算器应用程序之前,请确保您已经安装了Flutter和Android Studio。您还需要安装一个模拟器或连接一个实际的移动设备来运行应用程序。
要检查您的Flutter安装,请运行以下命令:
flutter doctor
该命令将显示Flutter工具是否正确安装,并且您是否已经配置了Android开发环境。
使用Android Studio创建一个新的Flutter项目。打开Android Studio,然后选择“File”>“New Flutter Project”。
在下一个屏幕上,选择导航到您的项目文件夹并命名您的项目。选择“Flutter应用程序”作为项目类型,并选择您的目标平台(Android和iOS)。
最后,选择您的语言和平台版本。单击“完成”按钮以创建您的项目。
现在我们已经创建了一个新的Flutter项目,接下来我们需要构建用户界面。我们将使用一个简单的设计来建立我们的计算器应用程序。
首先,找到lib/main.dart文件并替换其中的代码。
import 'package:flutter/material.dart';
void main() => runApp(CalculatorApp());
class CalculatorApp extends StatefulWidget {
@override
_CalculatorAppState createState() => _CalculatorAppState();
}
class _CalculatorAppState extends State<CalculatorApp> {
String _output = "0";
double _num1 = 0.0;
double _num2 = 0.0;
String _operand = "";
buttonPressed(String buttonText) {
if (buttonText == "CLEAR") {
_output = "0";
_num1 = 0.0;
_num2 = 0.0;
_operand = "";
} else if (buttonText == "+" || buttonText == "-" || buttonText == "*" || buttonText == "/") {
_num1 = double.parse(_output);
_operand = buttonText;
_output = "0";
} else if (buttonText == ".") {
if (_output.contains(".")) {
print("Already conatins a decimal");
return;
} else {
_output = _output + buttonText;
}
} else if (buttonText == "=") {
_num2 = double.parse(_output);
if (_operand == "+") {
_output = (_num1 + _num2).toStringAsFixed(2);
}
if (_operand == "-") {
_output = (_num1 - _num2).toStringAsFixed(2);
}
if (_operand == "*") {
_output = (_num1 * _num2).toStringAsFixed(2);
}
if (_operand == "/") {
_output = (_num1 / _num2).toStringAsFixed(2);
}
_num1 = 0.0;
_num2 = 0.0;
_operand = "";
} else {
_output = _output + buttonText;
}
setState(() {
_output = double.parse(_output).toStringAsFixed(2);
});
}
Widget buildButton(String buttonText) {
return Expanded(
child: OutlineButton(
padding: EdgeInsets.all(24.0),
onPressed: () => buttonPressed(buttonText),
child: Text(buttonText),
),
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Calculator App',
home: Scaffold(
appBar: AppBar(
title: Text('计算器应用程序'),
),
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
alignment: Alignment.centerRight,
padding: EdgeInsets.symmetric(horizontal: 12.0, vertical: 24.0),
child: Text(
_output,
style: TextStyle(
fontSize: 48.0,
fontWeight: FontWeight.bold,
),
),
),
Row(
children: <Widget>[
buildButton("7"),
buildButton("8"),
buildButton("9"),
buildButton("/")
],
),
Row(
children: <Widget>[
buildButton("4"),
buildButton("5"),
buildButton("6"),
buildButton("*")
],
),
Row(
children: <Widget>[
buildButton("1"),
buildButton("2"),
buildButton("3"),
buildButton("-")
],
),
Row(
children: <Widget>[
buildButton("."),
buildButton("0"),
buildButton("00"),
buildButton("+")
],
),
Row(
children: <Widget>[
buildButton("CLEAR"),
buildButton("="),
],
),
],
),
),
),
);
}
}
我们的UI包括一个文本框和一组按钮,代表数字,运算符和特殊命令(如“clear”)。还有一个StatefulWidget,用于跟踪所输入的值,并通过构建适当的逻辑来计算输出结果。
现在,我们已经完成了我们的计算器应用程序,为了运行我们的应用程序,请使用此命令运行您的应用程序:
flutter run
这将打开模拟器并运行您的计算器应用程序。
现在,您可以尝试在文本框中输入一些数字并尝试点击不同的按钮来执行相应的操作。当您按下“=”按钮时,应用程序将计算并显示您输入数字的结果。
恭喜您!您已经成功创建了一个使用Flutter的简单计算器应用程序。这仅仅是Flutter功能的一小部分,您可以使用Flutter创建更为复杂的应用程序,包括网络应用程序和游戏等。继续探索Flutter的功能,发现更多令人惊叹的应用程序!