『Flutter』项目实战(苹果计算器)搭建页面布局

/// flutter 中的注释有哪些
/// 1.单行注释 //
/// 2.多行注释 /* */
/// 3.文档注释 ///

/// buildButton 方法用于构建按钮
/// btnText 表示按钮的文本
/// curColor 表示按钮的背景颜色
/// isDouble 表示按钮是否是双倍宽度
/// 返回一个按钮组件
Widget buildButton(String btnText, dynamic curColor, {bool isDouble = false}) {
  return Container(
    // margin 表示容器的外边距, const EdgeInsets.only 表示只设置某个方向的外边距
    margin: const EdgeInsets.only(top: 10),
    // child 表示容器的子组件, GestureDetector 表示手势检测组件
    child: GestureDetector(
      // onTap 表示手势检测组件的点击事件
      onTap: () {
        print("按钮被点击了 ${btnText}");
      },
      // child 表示手势检测组件的子组件
      child: Container(
        // width 表示容器的宽度
        width: isDouble ? 180 : 80,
        // height 表示容器的高度
        height: 80,
        // decoration 表示容器的装饰器，BoxDecoration 表示装饰器的样式
        decoration: BoxDecoration(
            // shape 表示装饰器的形状，BoxShape.rectangle 表示矩形
            shape: BoxShape.rectangle,
            // borderRadius 表示装饰器的圆角，const BorderRadius.all 表示所有的圆角
            borderRadius: const BorderRadius.all(Radius.circular(40)),
            // color 表示装饰器的背景颜色
            color: curColor),
        // child 表示容器的子组件
        child: Center(
          // child 表示子组件的子组件
          child: Text(btnText,
              // style 表示文本的样式
              style: const TextStyle(
                  // fontSize 表示文本的大小
                  fontSize: 30,
                  // fontWeight 表示文本的粗细
                  fontWeight: FontWeight.bold,
                  // color 表示文本的颜色
                  color: Colors.white)),
        ),
      ),
    ),
  );
}

/// CalculatorState 是一个 State 对象，继承自 State
/// 用于保存 CalculatorWidget 的状态
class CalculatorState extends State {
  /// 保存计算器的输出
  /// _ 表示私有变量
  String _output = '0';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 计算器上半部分内容
        Container(
          // alignment 表示容器的对齐方式, Alignment.centerRight 表示右对齐
          alignment: Alignment.centerRight,
          // padding 表示容器的内边距, EdgeInsets.fromLTRB 表示分别设置左、上、右、下的内边距
          padding: const EdgeInsets.fromLTRB(10, 50, 10, 0),
          child: Text(
            // _output 表示计算器的输出，因为是动态计算的需要用状态保存
            _output,
            style: const TextStyle(fontSize: 62, color: Colors.white),
          ),
        ),
        // 计算器下半部分内容
        Container(
          // child 表示容器的子组件
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  buildButton("AC", Colors.grey),
                  buildButton("+/-", Colors.grey),
                  buildButton("%", Colors.grey),
                  buildButton("÷", Colors.orange),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  buildButton("7", Colors.grey),
                  buildButton("8", Colors.grey),
                  buildButton("9", Colors.grey),
                  buildButton("x", Colors.orange),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  buildButton("4", Colors.grey),
                  buildButton("5", Colors.grey),
                  buildButton("6", Colors.grey),
                  buildButton("-", Colors.orange),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  buildButton("1", Colors.grey),
                  buildButton("2", Colors.grey),
                  buildButton("3", Colors.grey),
                  buildButton("+", Colors.orange),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  buildButton("0", Colors.grey, isDouble: true),
                  buildButton(".", Colors.grey),
                  buildButton("=", Colors.orange),
                ],
              ),
            ],
          ),
        )
      ],
    );
  }
}

theme: ThemeData.dark()