『Flutter』项目实战(苹果计算器)搭建基本结构

/// Flutter 程序的入口文件
import 'package:flutter/material.dart';

/// Flutter 程序的入口函数
void main() {
  // 1.Flutter 主函数，程序一运行起来就会执行
  // 2.运行 App 并且创建组件
  runApp(const MyApp());
}

/// MyApp 是一个组件，继承自 StatelessWidget，是一个无状态的组件
/// 并且是符合 Material Design 规范的组件
class MyApp extends StatelessWidget {
  /// const 关键字表示 MyApp 是一个常量，一旦创建就不会被修改
  /// super.key 表示调用父类的构造函数
  const MyApp({super.key});

  /// 自定义无状态组件必须重写父类的 build 方法，返回我们构建好的组件
  @override
  Widget build(BuildContext context) {
    // MaterialApp 是一个符合 Material Design 规范的组件
    return MaterialApp(
      // Scaffold 是一个组件，用于实现页面的基本结构
      home: Scaffold(
        // appBar 是 Scaffold 的一个属性，表示页面的头部
        appBar: AppBar(
          // title 是 AppBar 的一个属性，表示头部的标题
          title: const Text('计算器'),
          // centerTitle 表示标题是否居中
          centerTitle: true,
        ),
        // body 是 Scaffold 的一个属性，表示页面的主体部分
        body: const CalculatorWidget(),
      ),
    );
  }
}

/// CalculatorWidget 是一个组件，继承自 StatefulWidget，是一个有状态的组件
class CalculatorWidget extends StatefulWidget {
  /// const 关键字表示 CalculatorWidget 是一个常量，一旦创建就不会被修改
  /// super.key 表示调用父类的构造函数
  const CalculatorWidget({super.key});

  /// createState 方法返回一个 State 对象
  @override
  State<StatefulWidget> createState() {
    // 返回一个 CalculatorState 对象
    return CalculatorState();
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 计算器上半部分内容
        Container(
          // color 表示容器的背景颜色
          color: Colors.black,
          // 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(
          // color 表示容器的背景颜色
          color: Colors.black,
          // child 表示容器的子组件
          child: const Column(
            children: [
              Row(),
              Row(),
              Row(),
              Row(),
              Row(),
            ],
          ),
        )
      ],
    );
  }
}