Flutter&鸿蒙next 实现一个计算器应用

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 本文介绍了如何使用 Flutter 创建一个简单的计算器应用,包括基本的加减乘除运算。文章详细讲解了界面布局、计算逻辑和状态管理的实现步骤,通过具体的代码示例展示了如何构建计算器界面、处理用户输入和显示计算结果。

在本篇文章中,我们将学习如何使用 Flutter 创建一个简单的计算器应用,包含基础的加减乘除运算。我们将逐步讲解计算器界面的构建、逻辑处理、以及如何使用 Flutter 提供的组件来实现该功能。

一、功能需求
我们需要实现以下功能:

用户可以输入数字和操作符(+、-、*、/)。
显示当前的输入和运算结果。
支持基本的加法、减法、乘法和除法运算。
支持清除输入的功能(清空屏幕)。
支持结果显示,并且用户可以继续在结果基础上进行运算。
二、实现思路
界面布局:使用 GridView 布局来组织按钮,模拟计算器的界面。
计算逻辑:使用一个简单的字符串存储用户输入的内容,并通过对输入字符串进行解析来执行相应的计算操作。
状态管理:通过 StatefulWidget 来管理用户输入的状态和计算结果的更新。
三、代码实现

  1. 创建 Flutter 项目
    首先,我们需要创建一个 Flutter 项目,并打开 lib/main.dart 文件。

  2. 编写代码
    import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Calculator',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Calculator(),
);
}
}

class Calculator extends StatefulWidget {
@override
_CalculatorState createState() => _CalculatorState();
}

class _CalculatorState extends State {
String _output = "0"; // 显示的输出内容
String _input = ""; // 存储用户输入的表达式

// 按钮点击处理
void _onButtonPressed(String value) {
setState(() {
if (value == "C") {
_input = ""; // 清除输入
_output = "0"; // 重置显示
} else if (value == "=") {
try {
// 计算并显示结果
_output = _calculateResult();
} catch (e) {
_output = "Error"; // 处理错误
}
} else {
// 添加输入字符到表达式
_input += value;
_output = _input;
}
});
}

// 计算表达式的结果
String _calculateResult() {
// 使用 Dart 内置的表达式解析器
final expression = _input.replaceAll("x", "*").replaceAll("÷", "/");
// 用 Flutter 提供的 dart:math 计算表达式的结果
final result = _parseMathExpression(expression);
return result.toString();
}

// 解析并计算表达式
double _parseMathExpression(String expression) {
// 使用 Dart 内置库来执行运算 (这里只是一个简单实现示例)
// 这里可以集成更复杂的库,或自己手写计算器的解析器。
return double.parse(expression);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Calculator'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
// 显示输入和输出
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(_input, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
SizedBox(height: 10),
Text(_output, style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold)),
],
),
),
// 按钮布局
GridView.builder(
shrinkWrap: true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
itemCount: buttonLabels.length,
itemBuilder: (context, index) {
return ElevatedButton(
onPressed: () => _onButtonPressed(buttonLabels[index]),
child: Text(buttonLabels[index], style: TextStyle(fontSize: 24)),
style: ButtonStyle(
padding: MaterialStateProperty.all(EdgeInsets.all(20)),
backgroundColor: MaterialStateProperty.all(Colors.blue),
),
);
},
),
],
),
);
}

// 计算器的按钮标签
final List buttonLabels = [
'7', '8', '9', '/',
'4', '5', '6', 'x',
'1', '2', '3', '-',
'C', '0', '=', '+',
];
}

  1. 代码详细解释
  2. 界面布局
    我们使用 Scaffold 来构建界面。主屏幕由两个部分组成:

输入区域:通过 Text 小部件显示用户输入的数学表达式,和运算结果。通过 Padding 控制文本的间距,使其看起来清晰整齐。
按钮区域:使用 GridView.builder 来生成按钮网格。每个按钮通过 ElevatedButton 实现,点击按钮后调用 _onButtonPressed 函数处理相应的输入。

  1. 输入和显示
    我们使用一个 String _input 变量来存储用户输入的数学表达式,并通过 _output 来显示当前的计算结果。

清除操作:当用户点击 "C" 按钮时,清空 _input 和 _output 变量,重置显示为 0。
计算操作:当用户点击 "=" 按钮时,调用 _calculateResult 函数计算结果,并将计算结果显示在屏幕上。

  1. 计算逻辑
    _onButtonPressed 方法会根据不同的输入更新 _input 和 _output 的内容。特别地,如果用户点击 "=",会调用 _calculateResult 方法来进行计算。
    在 _calculateResult 中,我们会将表达式中的乘法符号 "x" 和除法符号 "÷" 替换为 Dart 可识别的 "*" 和 "/"。
    然后,调用一个简单的 _parseMathExpression 方法,实际上这里只是一个简单的 double.parse 示例,您可以根据需要集成一个更强大的数学表达式解析库。
  2. 按钮
    我们定义了一个 buttonLabels 列表来存储所有按钮的标签,并使用 GridView.builder 来动态生成每个按钮。通过 ElevatedButton 来实现按钮的外观,并且通过 onPressed 回调触发计算器的功能。

  3. 优化建议
    目前的计算器实现相对简单,适用于一些基础运算,但在实际开发中,你可能需要对表达式进行更复杂的解析、错误处理和优化。比如:

支持括号运算。
支持浮点数精度处理。
使用更专业的数学表达式解析库,如 math_expressions 或其他第三方库来支持复杂的运算和表达式计算。
四、总结
本文展示了如何使用 Flutter 创建一个简单的计算器应用,从界面布局到逻辑处理都进行了详细的讲解。通过本示例,你应该能够更好地理解 Flutter 中的组件使用、状态管理以及如何处理用户输入和输出。希望这篇文章能够帮助你在开发中使用 Flutter 时更加得心应手!
————————————————

                        版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/lbcyllqj/article/details/143580131

目录
相关文章
|
5天前
|
弹性计算 双11 开发者
阿里云ECS“99套餐”再升级!双11一站式满足全年算力需求
11月1日,阿里云弹性计算ECS双11活动全面开启,在延续火爆的云服务器“99套餐”外,CPU、GPU及容器等算力产品均迎来了全年最低价。同时,阿里云全新推出简捷版控制台ECS Lite及专属宝塔面板,大幅降低企业和开发者使用ECS云服务器门槛。
|
22天前
|
存储 弹性计算 人工智能
阿里云弹性计算_通用计算专场精华概览 | 2024云栖大会回顾
阿里云弹性计算产品线、存储产品线产品负责人Alex Chen(陈起鲲)及团队内多位专家,和中国电子技术标准化研究院云计算标准负责人陈行、北京望石智慧科技有限公司首席架构师王晓满两位嘉宾,一同带来了题为《通用计算新品发布与行业实践》的专场Session。本次专场内容包括阿里云弹性计算全新发布的产品家族、阿里云第 9 代 ECS 企业级实例、CIPU 2.0技术解读、E-HPC+超算融合、倚天云原生算力解析等内容,并发布了国内首个云超算国家标准。
阿里云弹性计算_通用计算专场精华概览 | 2024云栖大会回顾
|
4天前
|
人工智能 弹性计算 文字识别
基于阿里云文档智能和RAG快速构建企业"第二大脑"
在数字化转型的背景下,企业面临海量文档管理的挑战。传统的文档管理方式效率低下,难以满足业务需求。阿里云推出的文档智能(Document Mind)与检索增强生成(RAG)技术,通过自动化解析和智能检索,极大地提升了文档管理的效率和信息利用的价值。本文介绍了如何利用阿里云的解决方案,快速构建企业专属的“第二大脑”,助力企业在竞争中占据优势。
|
3天前
|
人工智能 自然语言处理 安全
创新不设限,灵码赋新能:通义灵码新功能深度评测
自从2023年通义灵码发布以来,这款基于阿里云通义大模型的AI编码助手迅速成为开发者心中的“明星产品”。它不仅为个人开发者提供强大支持,还帮助企业团队提升研发效率,推动软件开发行业的创新发展。本文将深入探讨通义灵码最新版本的三大新功能:@workspace、@terminal 和 #team docs,分享这些功能如何在实际工作中提高效率的具体案例。
|
6天前
|
自然语言处理 数据可视化 前端开发
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
合合信息的智能文档处理“百宝箱”涵盖文档解析、向量化模型、测评工具等,解决了复杂文档解析、大模型问答幻觉、文档解析效果评估、知识库搭建、多语言文档翻译等问题。通过可视化解析工具 TextIn ParseX、向量化模型 acge-embedding 和文档解析测评工具 markdown_tester,百宝箱提升了文档处理的效率和精确度,适用于多种文档格式和语言环境,助力企业实现高效的信息管理和业务支持。
3908 0
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
|
9天前
|
负载均衡 算法 网络安全
阿里云WoSign SSL证书申请指南_沃通SSL技术文档
阿里云平台WoSign品牌SSL证书是由阿里云合作伙伴沃通CA提供,上线阿里云平台以来,成为阿里云平台热销的国产品牌证书产品,用户在阿里云平台https://www.aliyun.com/product/cas 可直接下单购买WoSign SSL证书,快捷部署到阿里云产品中。
2174 6
阿里云WoSign SSL证书申请指南_沃通SSL技术文档
|
2天前
|
安全 数据建模 网络安全
2024阿里云双11,WoSign SSL证书优惠券使用攻略
2024阿里云“11.11金秋云创季”活动主会场,阿里云用户通过完成个人或企业实名认证,可以领取不同额度的满减优惠券,叠加折扣优惠。用户购买WoSign SSL证书,如何叠加才能更加优惠呢?
823 1
|
21天前
|
编解码 Java 程序员
写代码还有专业的编程显示器?
写代码已经十个年头了, 一直都是习惯直接用一台Mac电脑写代码 偶尔接一个显示器, 但是可能因为公司配的显示器不怎么样, 还要接转接头 搞得桌面杂乱无章,分辨率也低,感觉屏幕还是Mac自带的看着舒服
|
17小时前
|
存储 分布式计算 流计算
实时计算 Flash – 兼容 Flink 的新一代向量化流计算引擎
本文介绍了阿里云开源大数据团队在实时计算领域的最新成果——向量化流计算引擎Flash。文章主要内容包括:Apache Flink 成为业界流计算标准、Flash 核心技术解读、性能测试数据以及在阿里巴巴集团的落地效果。Flash 是一款完全兼容 Apache Flink 的新一代流计算引擎,通过向量化技术和 C++ 实现,大幅提升了性能和成本效益。
307 6
实时计算 Flash – 兼容 Flink 的新一代向量化流计算引擎
|
28天前
|
存储 人工智能 缓存
AI助理直击要害,从繁复中提炼精华——使用CDN加速访问OSS存储的图片
本案例介绍如何利用AI助理快速实现OSS存储的图片接入CDN,以加速图片访问。通过AI助理提炼关键操作步骤,避免在复杂文档中寻找解决方案。主要步骤包括开通CDN、添加加速域名、配置CNAME等。实测显示,接入CDN后图片加载时间显著缩短,验证了加速效果。此方法大幅提高了操作效率,降低了学习成本。
5406 15