Flutter从入门到实战-02-Flutter框架核心

Flutter 从入门到实战（二）：Flutter 框架核心

本文根据讲义目标是把"会搭环境、会写页面、会管理状态与路由、会做基础网络请求"串成一条完整上手路径。

一、先把开发环境一次搭对

这部分讲义强调的核心思想是：环境问题越早解决，后面越省时间。

1. Flutter SDK 与环境变量

无论是 Windows 还是 macOS，最关键的都是两件事：

正确下载并解压 Flutter SDK（建议放英文路径）
把 SDK 的 bin 目录加入环境变量

常用检查命令：

bash 复制代码

flutter --version
flutter doctor -v

flutter doctor -v 是整个 Flutter 学习阶段最重要的"体检命令"，插件、平台工具链、许可证问题基本都能在这里暴露。

2. 创建项目（先从 Web 跑通）

讲义建议先创建 web 平台项目，再逐步补全多端，这个策略对新手很友好。

bash 复制代码

flutter create --platforms web my_app
cd my_app
flutter run -d chrome

先跑通一个页面，后续再扩展 Android、iOS、HarmonyOS，会比一开始全平台并行配置更稳。

二、理解项目结构与启动入口

Flutter 工程目录里，最关键的是以下几个位置：

lib/：业务代码主目录
pubspec.yaml：依赖与资源配置
web/、android/、ios/：各平台壳工程
build/：构建产物

启动入口是 lib/main.dart。讲义重点强调了两个概念：

runApp()：应用启动函数
Widget：Flutter 的基本构建单元（万物皆 Widget）

示例：

dart 复制代码

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

三、先搭"应用骨架"：MaterialApp + Scaffold

Flutter 页面开发中，最常见的一层结构是：

MaterialApp：应用级配置（主题、路由、首页）
Scaffold：页面骨架（头部、主体、底部导航等）

典型代码：

dart 复制代码

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('首页')),
        body: const Center(child: Text('Hello Flutter')),
      ),
    );
  }
}

可以把它理解成：

MaterialApp 负责"全局规则"
Scaffold 负责"单页布局"

四、核心认知：无状态组件 vs 有状态组件

讲义把组件分成两类，这个分类会贯穿整个 Flutter 开发。

1. StatelessWidget（无状态）

适合纯展示内容，不维护内部可变数据。

dart 复制代码

class Welcome extends StatelessWidget {
  const Welcome({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Welcome');
  }
}

2. StatefulWidget（有状态）

适合有交互、有数据变化的场景，核心是 setState 触发重建。

dart 复制代码

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('count: $count'),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: const Text('+1'),
        ),
      ],
    );
  }
}

五、生命周期：什么时候做初始化、更新、销毁

讲义对生命周期给了清晰主线：

创建阶段：createState -> initState -> didChangeDependencies -> build
更新阶段：didUpdateWidget -> build
销毁阶段：deactivate -> dispose

实战建议：

一次性初始化放 initState
依赖 InheritedWidget 的数据变化放 didChangeDependencies
控制器、监听器释放放 dispose

六、事件与状态更新：交互的基本闭环

点击类交互常用：

GestureDetector
InkWell
按钮组件（ElevatedButton、TextButton 等）

核心原则只有一句：数据变化后要通过 setState 触发 UI 更新。

七、布局组件：90% 页面都离不开这几类

1. 基础容器

Container：尺寸、边距、背景、边框、变换的组合容器
Center：居中布局
Align：精确对齐
Padding：内边距

2. 线性布局

Column：垂直排列
Row：水平排列
Flex + Expanded/Flexible：按比例分配空间

3. 流式与层叠

Wrap：空间不足自动换行
Stack + Positioned：Z 轴叠放与绝对定位

实战里常见搭配：

表单页：Column + Padding
图文列表项：Row + Expanded
Banner 搜索条：Stack + Positioned

八、常用基础组件：Text、Image、TextField

1. 文本 Text

除了基础展示，还要注意：

maxLines
overflow
TextStyle
Text.rich + TextSpan（混合样式）

2. 图片 Image

常用来源：

Image.asset（本地资源）
Image.network（网络图片）

本地图片务必在 pubspec.yaml 中声明资源路径。

3. 输入框 TextField

高频组合：

TextEditingController 管理输入内容
onChanged 监听变化
InputDecoration 配置占位、边框、前后缀

九、滚动体系：从简单到复杂

1. SingleChildScrollView

适合内容量不大、单子树滚动场景。

2. ListView

核心结论：

短列表可用默认构造
长列表优先 ListView.builder
需要分割线用 ListView.separated

3. GridView

常用模式：

GridView.count：按列数布局
GridView.extent：按最大子项宽度布局
GridView.builder：动态长网格

4. CustomScrollView + Sliver

当页面结构包含"轮播 + 吸顶 + 列表 + 网格"等复杂组合时，Sliver 是最稳定方案。

常见映射关系：

SliverList 对应列表
SliverGrid 对应网格
SliverPersistentHeader 对应吸顶头部
SliverToBoxAdapter 用于接普通 Widget

5. PageView

用于整页切换场景，配合 PageController 完成：

jumpToPage
animateToPage

十、组件通信：先掌握这两条主链路

讲义给出的通信方式很实用，建议按这条顺序掌握：

父传子：构造函数参数
子传父：回调函数

示例（子传父思想）：

dart 复制代码

class Child extends StatelessWidget {
  final void Function(String value) onSelect;

  const Child({super.key, required this.onSelect});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => onSelect('done'),
      child: const Text('回传'),
    );
  }
}

十一、网络请求：Dio 的工程化用法

讲义不是只讲 Dio().get()，而是讲了"怎么封装"：

统一 baseUrl 与超时
请求/响应/错误拦截器
统一请求方法（含业务状态码处理）
API 分层（按业务模块封装）
页面初始化拉取并渲染

推荐结构：

utils/dio_request.dart
api/home_api.dart
models/*.dart

Web 端还会遇到跨域，讲义也强调了这类问题要提前在开发环境处理。

十二、路由管理：从基础到命名再到动态

1. 基础路由

适合页面少、跳转简单：

dart 复制代码

Navigator.push(
  context,
  MaterialPageRoute(builder: (_) => const DetailPage()),
);

2. 命名路由

适合页面增多后的可维护方案：

在 MaterialApp 配置 routes
通过 pushNamed / pop 跳转

3. 路由方法语义

pushNamed：压栈进入新页
pushReplacementNamed：替换当前页
pushNamedAndRemoveUntil：清理历史栈并跳转

4. 参数传递

命名路由：arguments
基础路由：构造函数传参

5. 动态路由控制

onGenerateRoute：动态生成页面与拦截跳转
onUnknownRoute：兜底 404 场景

十三、这份框架讲义学完后的能力清单

如果这部分内容掌握扎实，你应该可以独立完成：

Flutter 环境搭建与常见问题排查
页面骨架搭建与组件拆分
交互事件处理与 setState 更新
常规布局、滚动、分页和层叠效果
父子通信与基础状态协作
Dio 网络请求封装与页面数据渲染
路由配置、参数传递、动态路由控制

结语

很多人卡在 Flutter，不是因为"写不出页面"，而是因为"写得出来但很难维护"。

这份框架讲义真正的价值在于：从一开始就用工程化方式写 Flutter，而不是零散堆代码。

建议你把这几块反复练熟：

状态组件 + 生命周期
滚动体系（尤其 ListView.builder 和 CustomScrollView）
Dio 封装 + 路由规范

把它们练成肌肉记忆，后面的综合实战会轻松很多。