计算器例子 - 图1

整个项目的 UI 分为两大部分，一部分是顶部显示数字和计算结果，另一部分是底部的输入按钮。
计算器例子 - 图2

calculator.dart 整体布局

整体布局使用 Column，在不同分辨率的手机上，规定底部固定大小，剩余空间都由顶部组件填充，所以顶部组件使用 Expanded 扩充。

  1. import 'package:flutter/material.dart';
  2. import 'calculator_keyboard.dart';
  4. class CalCulatorDemo extends StatefulWidget {
  5.   @override
  6.   _CalCulatorDemoState createState() => _CalCulatorDemoState();
  7. }
  9. class _CalCulatorDemoState extends State<CalCulatorDemo> {
  10.   String _text = '';
  12.   _onValueChange(String value) {
  13.     print('_onValueChange => $value');
  14.   }
  16.   @override
  17.   Widget build(BuildContext context) {
  18.     return Material(
  19.       color: Colors.black,
  20.       child: Container(
  21.         padding: EdgeInsets.symmetric(horizontal: 20),
  22.         width: double.infinity,
  23.         child: Column(
  24.           children: [
  25.             Expanded(
  26.               child: Container(
  27.                 color: Colors.green,
  28.                 alignment: Alignment.bottomRight,
  29.                 padding: EdgeInsets.only(right: 10),
  30.                 child: Text(
  31.                   '$_text',
  32.                   maxLines: 1,
  33.                   style: TextStyle(color: Colors.white, fontSize: 48, fontWeight: FontWeight.w700),
  34.                 ),
  35.               ),
  36.             ),
  37.             SizedBox(height: 20),
  38.             //底部的输入按钮组件
  39.             CalculatorKeyboard(
  40.               onValueChange: _onValueChange,
  41.             ),
  42.             SizedBox(height: 80),
  43.           ],
  44.         ),
  45.       ),
  46.     );
  47.   }
  48. }

calculator_item.dart 按钮封装

CalculatorKeyboard 是底部的输入按钮组件，也是此项目的重点，除了 0 这个按钮外，其余都是圆形按钮，不同之处是 高亮颜色（按住时颜色）、背景颜色、按钮文本、文本颜色不同，因此需要封装。

  1. import 'package:flutter/material.dart';
  3. typedef CalculatorValueChanged<T> = Function(T value);
  5. class CalculatorItem extends StatelessWidget {
  6.   CalculatorItem({
  7.     key,
  8.     this.text,
  9.     this.textColor = Colors.white,
  10.     this.color,
  11.     this.highlightColor,
  12.     this.width,
  13.     this.onValueChange,
  14.   }) : super(key: key);
  16.   final String text; //文字
  17.   final Color textColor; //前景色
  18.   final Color color; //背景色
  19.   final Color highlightColor; //高亮背景色
  20.   final double width; //宽度
  21.   final CalculatorValueChanged<String> onValueChange; //点击按钮的回调，参数是当前按钮的文本
  23.   @override
  24.   Widget build(BuildContext context) {
  25.     return Ink(
  26.       decoration: BoxDecoration(
  27.         color: color,
  28.         borderRadius: BorderRadius.circular(200),
  29.       ),
  30.       child: InkWell(
  31.         borderRadius: BorderRadius.circular(200),
  32.         radius: 200,
  33.         highlightColor: highlightColor ?? color,
  34.         onTap: () {
  35.           onValueChange('$text');
  36.         },
  37.         child: Container(
  38.           width: width ?? 70,
  39.           height: 70,
  40.           padding: EdgeInsets.only(left: width == null ? 0 : 25),
  41.           alignment: width == null ? Alignment.center : Alignment.centerLeft,
  42.           child: Text(
  43.             '$text',
  44.             style: TextStyle(color: textColor ?? Colors.white, fontSize: 24),
  45.           ),
  46.         ),
  47.       ),
  48.     );
  49.   }
  50. }

calculator_keyboard.dart 输入按钮布局

输入按钮的布局使用 Wrap 布局组件，如果没有 0 这个组件也可以使用 GridView组件。

  1. import 'package:flutter/material.dart';
  2. import 'calculator_item.dart';
  4. class CalculatorKeyboard extends StatelessWidget {
  5.   CalculatorKeyboard({key, this.onValueChange}) : super(key: key);
  6.   final CalculatorValueChanged<String> onValueChange;
  8.   static const colorNum = Color(0xFF363636);
  9.   static const colorTopSymbol = Color(0xFFA5A5A5);
  10.   static const colorRightSymbol = Color(0xFFE89E28);
  11.   static const colorRightHighlight = Color(0xFFE89E28);
  12.   static const colorRightSymbolHighlight = Color(0xFFEDC68F);
  14.   final List<Map> _keyboardList = [
  15.     {'text': 'AC', 'color': colorTopSymbol, 'highlightColor': colorRightHighlight, 'textColor': Colors.black},
  16.     {'text': '+/-', 'color': colorTopSymbol, 'highlightColor': colorRightHighlight, 'textColor': Colors.black},
  17.     {'text': '%', 'color': colorTopSymbol, 'highlightColor': colorRightHighlight, 'textColor': Colors.black},
  18.     {'text': '÷', 'color': colorRightSymbol, 'highlightColor': colorRightSymbolHighlight},
  19.     {'text': '7', 'color': colorNum},
  20.     {'text': '8', 'color': colorNum},
  21.     {'text': '9', 'color': colorNum},
  22.     {'text': 'x', 'color': colorRightSymbol, 'highlightColor': colorRightSymbolHighlight},
  23.     {'text': '4', 'color': colorNum},
  24.     {'text': '5', 'color': colorNum},
  25.     {'text': '6', 'color': colorNum},
  26.     {'text': '-', 'color': colorRightSymbol, 'highlightColor': colorRightSymbolHighlight},
  27.     {'text': '1', 'color': colorNum},
  28.     {'text': '2', 'color': colorNum},
  29.     {'text': '3', 'color': colorNum},
  30.     {'text': '+', 'color': colorRightSymbol, 'highlightColor': colorRightSymbolHighlight},
  31.     // 0 这个按钮的宽度是两个按钮的宽度 + 两个按钮的间隙
  32.     {'text': '0', 'color': colorNum, 'width': 170.0},
  33.     {'text': '.', 'color': colorNum},
  34.     {'text': '=', 'color': colorRightSymbol, 'highlightColor': colorRightSymbolHighlight},
  35.   ];
  37.   @override
  38.   Widget build(BuildContext context) {
  39.     return Wrap(
  40.       runSpacing: 18, //垂直间距
  41.       spacing: 30, //水平间距
  42.       children: _keyboardList.map((item) {
  43.         return CalculatorItem(
  44.           text: item['text'],
  45.           textColor: item['textColor'],
  46.           color: item['color'],
  47.           highlightColor: item['highlightColor'],
  48.           width: item['width'],
  49.           onValueChange: onValueChange,
  50.         );
  51.       }).toList(),
  52.     );
  53.   }
  54. }

计算

这里有4个变量：

  • _text：显示当前输入的数字和计算结果。
  • _beforeText：用于保存被加数，比如输入 5+1，保存 5 ，用于后面的计算。
  • _isResult：表示当前值是否为计算的结果，true：新输入数字直接显示，false：新输入数字和当前字符串相加，比如当前显示 5，如果是计算的结果，点击 1 时，直接显示1，否则显示 51。
  • _operateText：保存加减乘除。
  1. import 'package:flutter/material.dart';
  2. import 'calculator_keyboard.dart';
  4. class CalCulatorDemo extends StatefulWidget {
  5.   @override
  6.   _CalCulatorDemoState createState() => _CalCulatorDemoState();
  7. }
  9. class _CalCulatorDemoState extends State<CalCulatorDemo> {
  10.   String _text = '0'; //显示当前输入的数字和计算结果。
  11.   String _beforeText = '0'; //用于保存被加数，比如输入 5+1，保存 5 ，用于后面的计算。
  12.   bool _isResult = false; //表示当前值是否为计算的结果，true：新输入数字直接显示，false：新输入数字和当前字符串相加，
  13.   // 比如当前显示 5，如果是计算的结果，点击 1 时，直接显示1，否则显示 51。
  14.   String _operateText = ''; //保存加减乘除。
  16.   double _valueToDouble(String value) {
  17.     if (_text.startsWith('-')) {
  18.       String s = value.substring(1);
  19.       return double.parse(s) * -1;
  20.     } else {
  21.       return double.parse(value);
  22.     }
  23.   }
  25.   _onValueChange(String value) {
  26.     print('_onValueChange => $value');
  28.     setState(() {
  29.       switch (value) {
  30.         // AC 按钮表示清空当前输入，显示 0，同时初始化其他变量：
  31.         case 'AC':
  32.           _text = '0';
  33.           _beforeText = '0';
  34.           _isResult = false;
  35.           break;
  37.         // +/- 按钮表示对当前数字取反，比如 5->-5:
  38.         case '+/-':
  39.           if (_text.startsWith('-')) {
  40.             _text = _text.substring(1);
  41.           } else {
  42.             _text = '-$_text';
  43.           }
  44.           break;
  46.         // % 按钮表示当前数除以100:
  47.         case '%':
  48.           double d = _valueToDouble(_text);
  49.           _isResult = true;
  50.           _text = '${d / 100.0}';
  51.           break;
  53.         // +、-、x、÷ 按钮，保存当前 操作符号：
  54.         case '+':
  55.         case '-':
  56.         case 'x':
  57.         case '÷':
  58.           _isResult = false;
  59.           _operateText = value;
  60.           break;
  62.         // 0-9 和 . 按钮根据是否是计算结果和是否有操作符号进行显示：
  63.         case '0':
  64.         case '1':
  65.         case '2':
  66.         case '3':
  67.         case '4':
  68.         case '5':
  69.         case '6':
  70.         case '7':
  71.         case '8':
  72.         case '9':
  73.         case '.':
  74.           // 重新开始计算
  75.           if (_isResult) {
  76.             _text = value;
  77.           }
  78.           // 
  79.           if (_operateText.isNotEmpty && _beforeText.isEmpty) {
  80.             _beforeText = _text;
  81.             _text = '';
  82.           }
  83.           _text += value;
  84.           if (_text.startsWith('0')) {
  85.             _text = _text.substring(1);
  86.           }
  87.           break;
  89.         // = 按钮计算结果：
  90.         case '=':
  91.           double d = _valueToDouble(_beforeText);
  92.           double d1 = _valueToDouble(_text);
  93.           switch (_operateText) {
  94.             case '+':
  95.               _text = '${d + d1}';
  96.               break;
  97.             case '-':
  98.               _text = '${d - d1}';
  99.               break;
  100.             case 'x':
  101.               _text = '${d * d1}';
  102.               break;
  103.             case '÷':
  104.               _text = '${d / d1}';
  105.               break;
  106.           }
  107.           _beforeText = '';
  108.           _isResult = true;
  109.           _operateText = '';
  110.           break;
  112.         default:
  113.       }
  114.     });
  115.   }
  117.   @override
  118.   Widget build(BuildContext context) {
  119.     return Material(
  120.       color: Colors.black,
  121.       child: Container(
  122.         padding: EdgeInsets.symmetric(horizontal: 20),
  123.         width: double.infinity,
  124.         child: Column(
  125.           children: [
  126.             Expanded(
  127.               child: Container(
  128.                 color: Colors.green,
  129.                 alignment: Alignment.bottomRight,
  130.                 padding: EdgeInsets.only(right: 10),
  131.                 child: Text(
  132.                   '$_text',
  133.                   maxLines: 1,
  134.                   style: TextStyle(color: Colors.white, fontSize: 48, fontWeight: FontWeight.w700),
  135.                 ),
  136.               ),
  137.             ),
  138.             SizedBox(height: 20),
  139.             CalculatorKeyboard(
  140.               onValueChange: _onValueChange,
  141.             ),
  142.             SizedBox(height: 80),
  143.           ],
  144.         ),
  145.       ),
  146.     );
  147.   }
  148. }
  1. 不足之一：计算结果逻辑，上面计算结果的逻辑是不完美的，当增加一个操作符（比如 取余），计算逻辑复杂度将会以指数级方式增加，那为什么还要用此方式？最重要的原因是计算结果逻辑不是此项目的重点，作为一个Flutter的入门项目重点是熟悉组件的使用，计算器的计算逻辑有一个比较著名的方式：后缀表达式的计算过程，然而此方式偏向于算法，对初学者非常不友好，因此，我采用了一种不完美但适合初学者的逻辑。
  2. 不足之二：此App没有考虑横屏的情况，为什么？因为横屏很可能导致整体布局发生变化，横屏时按钮是变大还是拉伸，或者拉伸间隙？不同的方式使用的布局会发生变化，因此，目前只考虑了竖屏的布局，实际项目中要考虑横屏情况吗？其实这是一个用户体验的问题，首先问问自己，为什么要横屏？横屏可以显著的提升用户体验吗？如果不能，为什么要花费大力气适配横屏呢？