Flutter | 基础组件篇

Flutter项目结构由核心目录(lib/)、测试目录(test/)和Web支持目录(web/)组成。lib/存放主要源代码，包括入口文件main.dart；test/用于单元测试与集成测试；web/提供Web平台支持。pubspec.yaml是项目的核心配置文件，管理依赖与资源。基础组件包括MaterialApp(定义应用主题)、Scaffold(提供页面框架结构)以及状态组件(Stateles

jingling555

665人浏览 · 2025-11-05 08:15:00

jingling555 · 2025-11-05 08:15:00 发布

一、核心目录

`lib/` —— 主要源代码目录

这是你90% 的开发工作所在的地方。所有 Dart 业务逻辑、UI 组件、状态管理等代码都放在这里。

main.dart
这是整个 Flutter 应用的入口文件。Dart 程序从 main() 函数开始执行。
默认生成的 main.dart 实现了一个简单的计数器应用，包含：
- MaterialApp：定义应用主题、路由等
- Scaffold：提供基础页面结构（AppBar、Body、FloatingActionButton）
- StatefulWidget：管理点击次数的状态
最佳实践：随着项目变大，建议将 main.dart 拆分为 main.dart（仅保留入口） + app.dart（主应用组件） + 多个功能模块。

`test/` —— 自动化测试目录

Flutter 强调测试驱动开发（TDD），提供了完善的测试支持。

widget_test.dart
包含一个Widget 测试示例，用于验证计数器按钮点击后数字是否正确递增。
使用 flutter_test 包提供的 testWidgets 和 tester 工具模拟用户交互。
```
testWidgets('Counter increments', (WidgetTester tester) async {
  await tester.pumpWidget(MyApp());
  await tester.tap(find.byIcon(Icons.add));
  expect(find.text('1'), findsOneWidget);
});
```
除了 widget 测试，你还可以添加：
- unit_test/：单元测试（纯逻辑函数）
- integration_test/：集成测试（端到端）

`web/` —— Web 平台支持（仅当启用 Web 时存在）

如果你运行过 flutter create . --platforms=web 或已启用 Web 支持，会看到此目录。

index.html：Web 应用的 HTML 入口文件，Flutter 会将 UI 渲染到 <body> 中。
icons/：包含不同尺寸的 favicon（如 Icon-192.png），用于 PWA（渐进式 Web 应用）。
manifest.json：定义 Web 应用名称、图标、启动方式等，使应用可“安装”到桌面。

提示：你可以自定义 index.html 来添加 Google Analytics、Meta 标签等。

二、配置与构建：项目的“骨架”

`pubspec.yaml` —— 项目灵魂配置文件

这是 Flutter 项目的核心配置文件，采用 YAML 格式，定义了：

name: my_app
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.0        # 第三方包依赖

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
  assets:
    - images/logo.png  # 资源文件声明
  fonts:
    - family: CustomFont
      fonts:
        - asset: fonts/CustomFont.ttf

关键作用：

声明项目名称、版本

管理 Dart/Flutter 依赖包

注册 静态资源（图片、字体、JSON 等）

配置 Material Design 支持

每次修改 pubspec.yaml 后，需执行 flutter pub get 下载依赖。

`build/` —— 构建产物目录

包含编译后的原生代码（Android 的 APK/AAB、iOS 的 IPA）、Web 资源、Flutter 引擎缓存等。
不要手动修改此目录内容，它由构建工具自动生成。
通常会被 .gitignore 忽略，不应提交到 Git。

`.dart_tool/` —— Dart 工具链缓存

由 Dart SDK 和 pub 工具生成，包含：
- 依赖包的本地缓存（package_config.json）
- 构建中间文件
同样无需提交到版本控制。

`analysis_options.yaml` —— 代码质量守门员

定义 Dart 静态分析规则（如 lint 规则）。
可启用官方推荐规则（如 include: package:flutter_lints/flutter.yaml）。
帮助你在编码时发现潜在 bug、风格问题（如未使用变量、命名不规范等）。

三、基础组件

1.MaterialApp

title:用来展示窗口的标题内容（可以不设置）

theme：用来设置整个应用的主题

home:用来展示窗口的主体内容

效果：

2.Scaffold

1. `appBar` —— 顶部应用栏

作用：显示标题、返回按钮、操作菜单等

appBar: AppBar(
  title: Text('首页'),
  leading: IconButton(icon: Icon(Icons.menu), onPressed: () {}),
  actions: [IconButton(icon: Icon(Icons.search), onPressed: () {})],
)

2. `body` —— 页面主体内容

类型：Widget
作用：页面主要内容区域，占据 AppBar 与 BottomNavigationBar 之间的空间
注意：body 不会自动滚动，如需滚动请包裹 SingleChildScrollView 或 ListView

body: ListView(
  children: [Text('Item 1'), Text('Item 2')],
)

3. `floatingActionButton` —— 悬浮操作按钮（FAB）

类型：Widget?
通常使用 FloatingActionButton
默认位于右下角（可通过 floatingActionButtonLocation 调整）

floatingActionButton: FloatingActionButton(
  onPressed: () => print('点击了FAB'),
  child: Icon(Icons.add),
)

自定义位置：

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
// 其他选项：endFloat, centerDocked, endDocked 等

4. `bottomNavigationBar` —— 底部导航栏

类型：Widget?
常配合 BottomNavigationBar 使用

bottomNavigationBar: BottomNavigationBar(
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
    BottomNavigationBarItem(icon: Icon(Icons.settings), label: '设置'),
  ],
  currentIndex: _currentIndex,
  onTap: (index) => setState(() => _currentIndex = index),
)

效果：

3.无状态组件-StatelessWidget

不可变（Immutable）：所有属性（字段）应为 final
无状态（Stateless）：不持有可变数据，不响应用户输入改变自身
高效：Flutter 在重建时会尽量复用，性能开销小
不能调用 setState()（因为没有状态）

效果：

何时使用 StatelessWidget？

适合以下场景：

显示静态文本、图标、图片

布局容器（如 Row、Column 的封装）

按钮（如果点击只触发外部回调，不改变自身样式）

页面中的“展示型”组件（如头像、标签、卡片标题）

不适合：

需要响应用户操作改变 UI（如计数器、开关）

需要动画、网络请求后更新内容

需要生命周期管理（如初始化、销毁）

4.有状态组件-StatefulWidget

import 'package:flutter/material.dart';

void main() {
  runApp(MainPage());
}
//第一个类 负责对外
class MainPage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }
}
//第二个类 内部类 负责管理数据 处理业务逻辑 并且渲染视图
class _MainPageState extends State<MainPage>{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 有状态组件',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 头部区域组件'),
        ),
        body: Container(
          child: Center(
            child: Text('Flutter 中部区域组件'),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => print('点击了FAB'),
          child: Icon(Icons.add),
        ),  
        bottomNavigationBar:Container(
          height: 80,
          child:Center(
            child:Text('Flutter 底部区域组件'),
          )
        )
      ),
    );
  }
}

效果：