在 Android Studio 中创建简单的应用

创建一个简单的 Flutter 应用

本章将指导你使用 Android Studio 创建一个基本的 Flutter 应用（尽管在安装了 Flutter 插件的 VS Code 中流程类似）。

先决条件：

• 已安装并配置 Flutter SDK。
• 已安装 Android Studio（或 VS Code）。
• 已在你的 IDE 中安装 Flutter 和 Dart 插件。
• 正在运行模拟器或已连接物理设备。

步骤：

1. 打开 Android Studio： 启动你的 IDE。
2. 创建新的 Flutter 项目：
3. • 转到 File > New > New Flutter Project...。
4. • 确保 Flutter SDK path 指向你的 Flutter 安装目录。
5. • 选择 Flutter Application 作为项目类型。
6. • 点击 Next。

(IDE 提示：确切的菜单名称或对话框外观在不同 IDE 版本之间可能略有差异，但核心流程保持不变。)

1. 配置项目详情：
2. • Project name: 输入有效的 Dart 包名称（例如，hello_flutter_app）。使用小写字母和下划线。
3. • Project location: 选择保存项目的目录。
4. • Description: （可选）添加简短描述。
5. • Organization: 输入反向域名标识符（例如，com.example，dev.yourname）。这用于 Android/iOS 上的包 ID。
6. • Platforms: 选择目标平台（Android、iOS、Web 等）。
7. • 点击 Create（或 Finish）。

Android Studio（或 VS Code）将生成一个包含示例代码的 Flutter 启动项目。

项目结构概览

生成的项目包含几个关键目录和文件：

• android/： 包含原生的 Android 项目包装器。你将在此编辑 Android 特定的配置（例如，权限、构建设置）所需的文件。
• ios/： 包含原生的 iOS 项目包装器 (Xcode project)。在此编辑 iOS 特定的配置所需的文件。
• lib/： 你的 Flutter 应用的核心。所有 Dart 代码都在这里。
• • lib/main.dart： Flutter 应用的入口点。执行从这里开始。
• test/： 包含应用的单元测试和 widget 测试。
• pubspec.yaml： 项目的元数据文件。管理依赖包（packages）、资源（图片、字体）、应用版本和其他配置。这是一个至关重要的文件。
• pubspec.lock： 由 Flutter 的包管理器 (pub) 自动生成。跟踪正在使用的依赖包的确切版本。
• .gitignore： 标准的 Git 文件，指定故意不跟踪的文件。
• README.md： 描述项目的 Markdown 文件。
• (其他文件，如 .metadata、.packages、.dart_tool/、IDE 特定文件（.idea/、.iml、.vscode/）通常由工具自动生成和管理。)

理解启动代码 (lib/main.dart)

让我们用一个更简单的“Hello World”示例替换默认的计数器应用代码，并理解它：

// Import the Flutter Material library, which provides Material Design widgets.
// 导入 Flutter Material 库，它提供了 Material Design 组件。
import 'package:flutter/material.dart';

// The main function is the entry point for all Flutter apps.
// main 函数是所有 Flutter 应用的入口点。
void main() {
  // runApp inflates the given widget and attaches it to the screen.
  // runApp 渲染给定的 widget 并将其附加到屏幕上。
  runApp(const MyApp()); // Use 'const' for performance if the widget is immutable.
  // 如果 widget 是不可变的，使用 'const' 以提高性能。
}

// MyApp is the root widget of the application.
// MyApp 是应用的根 widget。
// It extends StatelessWidget because its state doesn't change over time.
// 它继承自 StatelessWidget，因为其状态不会随时间改变。
class MyApp extends StatelessWidget {
  // Constructor with an optional Key parameter.
  // 带有可选 Key 参数的构造函数。
  const MyApp({Key? key}) : super(key: key);

  // The build method describes how to display the widget.
  // build 方法描述了如何显示 widget。
  // It's called by the framework when the widget needs to be rendered.
  // 当 widget 需要渲染时，框架会调用它。
  @override
  Widget build(BuildContext context) {
    // MaterialApp wraps several widgets commonly required for Material Design apps.
    // MaterialApp 包装了 Material Design 应用常用的几个 widget。
    return MaterialApp(
      title: 'Hello Flutter App', // Used by the OS task switcher
      // 由操作系统任务切换器使用
      theme: ThemeData(
        // Defines the visual theme of the application.
        // 定义应用的视觉主题。
        primarySwatch: Colors.teal, // Sets the primary color swatch
        // 设置主色板
        visualDensity: VisualDensity.adaptivePlatformDensity, // Adapts density
        // 适应平台密度
      ),
      // The widget displayed for the default route ('/')
      // 默认路由 ('/') 显示的 widget
      home: const MyHomePage(title: 'Hello Flutter'),
    );
  }
}

// MyHomePage represents the home screen of the app.
// MyHomePage 表示应用的主屏幕。
// Also a StatelessWidget in this simple example.
// 在这个简单示例中也是一个 StatelessWidget。
class MyHomePage extends StatelessWidget {
  // Constructor requiring a title.
  // 需要 title 的构造函数。
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // 'final' means this variable won't change after the object is created.
  // 'final' 意味着此变量在对象创建后不会改变。
  final String title;

  @override
  Widget build(BuildContext context) {
    // Scaffold implements the basic Material Design visual layout structure.
    // Scaffold 实现了基本的 Material Design 视觉布局结构。
    return Scaffold(
      // AppBar displays the bar at the top of the screen.
      // AppBar 显示屏幕顶部的栏。
      appBar: AppBar(
        // Text widget displays the title passed to MyHomePage.
        // Text widget 显示传递给 MyHomePage 的 title。
        title: Text(title),
      ),
      // The main content of the Scaffold.
      // Scaffold 的主要内容。
      body: const Center(
        // Center widget centers its child widget.
        // Center widget 将其子 widget 居中。
        child: Text(
          'Hello, World!',
          style: TextStyle(fontSize: 24), // Basic text styling
          // 基本文本样式
        ),
      ),
    );
  }
}

// --- Usage Example ---
// --- 使用示例 ---
// void main() => runApp(MaterialApp(home: TodoListScreen()));

解释：

• import 'package:flutter/material.dart';：导入 Material Design 所需的 Flutter widget。
• void main() => runApp(const MyApp());：应用的入口点。runApp 接受根 widget (MyApp) 并使其成为 widget 树的根。
• MyApp extends StatelessWidget：定义主应用 widget。它是 Stateless 的，因为它本身不包含任何可变状态。
• build(BuildContext context)：所有 widget 都必须实现此方法。它返回定义应用这部分 UI 的 widget 树。BuildContext 提供关于 widget 在树中位置的信息。
• MaterialApp：一个方便的 widget，用于为 Material Design 设置应用，提供导航、主题等功能。
• • title：设备使用的单行描述。
• • theme：定义应用配色方案和排版 (ThemeData)。
• • home：默认屏幕 (MyHomePage) 的 widget。
• MyHomePage extends StatelessWidget：定义主屏幕 widget。
• • final String title;：存储从 MyApp 传递过来的 title。
• Scaffold：提供标准的应用程序布局结构，包括 AppBar、body、FloatingActionButton 等。
• • appBar：顶部显示的 AppBar widget。
• • body：Scaffold 的主要内容区域。
• Center：一个布局 widget，用于将其 child 居中。
• Text：一个显示字符串文本的 widget。

运行应用

1. 选择设备： 确保模拟器正在运行或已连接物理设备，并在 IDE 工具栏的设备下拉菜单中选中。
2. 运行： 点击 IDE 中的“运行”按钮（绿色播放图标），或在项目根目录使用终端命令 flutter run。
3. 热重载/热重启： 应用运行时，可以使用热重载（Ctrl+\ 或 Cmd+\）快速注入代码更改而不会丢失应用状态，或使用热重启（Ctrl+Shift+\ 或 Cmd+Shift+\）重建应用并重置状态。

你将在选定的设备/模拟器上看到应用启动，显示一个带有标题“Hello Flutter”的 AppBar 和屏幕中央居中的文本“Hello, World!”。