Flutter从零到入门：用构建计算器学习核心思想

2023-10-10 14:00:49

Flutter是一款强大的移动应用开发框架，它帮助开发人员跨平台构建iOS、安卓和网页应用。如果您想学习Flutter，那么从构建计算器入手再合适不过了！

为什么从计算器开始？

计算器是一个经典的应用程序，它不仅简单易懂，而且包含了Flutter开发中许多核心的概念和思想。通过构建计算器，您可以学习到如何使用Flutter创建基本UI组件、处理用户手势，以及进行状态管理。这些都是Flutter开发的基础，掌握了这些，您就可以为构建更复杂的应用打下坚实的基础。

开始构建计算器

在开始构建计算器之前，您需要先确保已经安装了Flutter开发环境。您可以访问Flutter的官方网站，按照步骤进行安装。

安装好Flutter开发环境后，就可以开始构建计算器了。首先，您需要创建一个新的Flutter项目。您可以使用以下命令来创建项目：

flutter create calculator

创建好项目后，就可以在项目目录中找到main.dart文件。main.dart文件是Flutter应用程序的入口文件，它定义了应用程序的结构和行为。

在main.dart文件中，您需要编写以下代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

这段代码定义了一个非常简单的Flutter应用程序。它包含一个Text组件，显示"Hello World!"文本。

要将计算器添加到应用程序中，您需要在main.dart文件中添加以下代码：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Calculator(),
      ),
    );
  }
}

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

class _CalculatorState extends State<Calculator> {
  String result = '0';

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(result),
        Row(
          children: [
            Button('7'),
            Button('8'),
            Button('9'),
            Button('+'),
          ],
        ),
        Row(
          children: [
            Button('4'),
            Button('5'),
            Button('6'),
            Button('-'),
          ],
        ),
        Row(
          children: [
            Button('1'),
            Button('2'),
            Button('3'),
            Button('x'),
          ],
        ),
        Row(
          children: [
            Button('0'),
            Button('.'),
            Button('='),
            Button('/'),
          ],
        ),
      ],
    );
  }
}

class Button extends StatelessWidget {
  final String label;

  const Button(this.label);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ElevatedButton(
          onPressed: () {},
          child: Text(label),
        ),
      ),
    );
  }
}