Dart 代码片段速查手册

🚀 快速生成代码

flu-cli 为您预设了丰富的 dart 代码片段。在 .dart 文件中输入特定缩写（例如 glvc、stlv 等），然后按 Tab 或 Enter 键，即可快速生成对应的代码模板，大幅提升开发效率。

本文档将帮助您了解所有可用的代码片段及其使用方法，让您的开发工作事半功倍。

代码片段配置文件位置

dart.code-snippets 文件位于项目根目录下的 .vscode 文件夹中。您可以通过修改此文件来添加或自定义代码片段。

.
├── .vscode (VSCode 配置文件夹)   
│   ├── extensions.json (VSCode 插件推荐)
│   ├── launch.json (调试配置)
│   ├── settings.json (编辑器设置)
│   └── dart.code-snippets (代码片段配置) 

💡 提示：您可以右键点击 .vscode/dart.code-snippets 文件并选择"编辑"来查看或修改现有代码片段。

界面分层设计理念

📋 界面分层的优势

无论基于何种框架，良好的界面分层设计都能带来以下好处：

1. 提高可读性：新手开发者能快速定位UI和逻辑功能
2. 增强可维护性：清晰的结构使代码更易于维护和扩展
3. 促进团队协作：统一的代码组织方式大大提高沟通和开发效率
4. 便于测试：分离的逻辑层更容易进行单元测试

我们的代码片段遵循严格的分层原则，帮助您轻松实现这种最佳实践。

基于 GetX 的界面分层结构

视图层（View）

视图层负责界面的展示，不包含业务逻辑。

// --------- 公开属性  --------- // 定义视图需要的公开变量
// --------- 生命周期  --------- // 处理视图的生命周期方法
// --------- 构建界面  --------- // 实现界面布局和组件构建

控制器层（Controller）

控制器层负责业务逻辑和数据处理，与视图层分离。

// --------- 公开属性  --------- // 定义可被视图访问的变量
// --------- 私有属性  --------- // 定义控制器内部使用的变量
// --------- 生命周期  --------- // 处理控制器的生命周期方法
// --------- 数据处理  --------- // 实现数据获取、转换和存储逻辑
// --------- 触发事件  --------- // 处理用户交互和业务流程

基于 StatefulWidget 的界面分层结构

视图层（StatefulWidget）

在 Flutter 原生的 StatefulWidget 中，视图和逻辑通常在同一个类中，但我们仍然通过注释区块保持代码组织清晰。

// --------- 公开属性  --------- // 定义组件的公开变量和参数
// --------- 私有属性  --------- // 定义组件内部使用的变量
// --------- 生命周期  --------- // 处理组件的生命周期方法
// --------- 构建界面  --------- // 实现界面布局和组件构建
// --------- 数据处理  --------- // 实现数据获取和处理逻辑
// --------- 触发事件  --------- // 处理用户交互和状态更新

特殊界面类型说明

列表界面

📱 列表界面的简化实现

无论基于哪种状态管理框架，列表界面的实现都遵循相同的模式：

1. 只需关注内容：您只需在 createListView 方法中编写列表项的展示逻辑
2. 刷新逻辑已封装：上拉加载和下拉刷新的逻辑已在 flu-cli 中封装完成
3. 数据处理集中化：只需实现 getNetWorkData 方法处理数据获取和转换
4. 自动状态管理：数据刷新后会自动触发界面更新，无需手动管理

这种设计极大简化了列表界面的开发流程，让您专注于业务逻辑而非基础架构。

代码片段详解与示例

基于 GetX 的代码片段

1. 视图与控制器组合（VC 模式）

💡 VC 模式特点

在 VC 模式中，视图和控制器定义在同一个 .dart 文件中，适合功能相对独立的中小型界面。这种模式便于维护，因为相关代码集中在一起。

列表界面 - glvc 代码片段

输入 glvc 并按 Tab 键，生成 GetX 列表视图和控制器：

class DemoListV extends BaseGetXlistV<DemoListC> {
  DemoListV({super.key});
  
  @override
  DemoListC get controller => Get.put(DemoListC());
  
  @override
  Widget createListView(BuildContext context) {
    // 在这里构建您的列表项UI
    Widget body = Container();
    return body;
  }
}

class DemoListC extends BaseGetXListController {
  // --------- 公开属性  --------- //
  // 定义可被视图访问的变量，如列表数据、加载状态等

  // --------- 私有属性  --------- //
  // 定义控制器内部使用的变量，如API服务、缓存等

  // --------- 生命周期  --------- //
  // 控制器初始化、销毁等生命周期方法

  // --------- 数据处理  --------- //
  // 实现数据获取、转换和分页逻辑

  // --------- 触发事件  --------- //
  // 处理用户交互，如点击、刷新等事件
}

普通界面 - gvc 代码片段

输入 gvc 并按 Tab 键，生成 GetX 普通视图和控制器：

class DemoV extends BaseGetXV<DemoVC> {
  DemoV({Key? key}) : super(key: key);
  
  @override
  DemoVC get controller => Get.put(DemoVC());

  @override
  Widget createBody({
    required BuildContext context,
    BoxConstraints? constraints,
  }) {
    // 在这里构建您的界面UI
    Widget body = Container();
    return body;
  }
}

class DemoVC extends BaseGetXController {
  // --------- 公开属性  --------- //
  // 定义可被视图访问的变量，如表单数据、状态标志等

  // --------- 私有属性  --------- //
  // 定义控制器内部使用的变量，如API服务、工具类等

  // --------- 生命周期  --------- //
  // 控制器初始化、销毁等生命周期方法

  // --------- 数据处理  --------- //
  // 实现数据获取、验证和转换逻辑

  // --------- 触发事件  --------- //
  // 处理用户交互，如按钮点击、表单提交等事件
}

2. 单独视图（V 模式）

💡 V 模式特点

在 V 模式中，只定义视图部分，控制器需要在单独的文件中定义。这种模式适合大型项目，便于团队协作和代码管理。

列表视图 - glv 代码片段

输入 glv 并按 Tab 键，生成 GetX 列表视图：

class DemoListV extends BaseGetXlistV<DemoListC> {
  DemoListV({super.key});
  
  @override
  DemoListC get controller => Get.put(DemoListC());
  
  @override
  Widget createListView(BuildContext context) {
    // 在这里构建您的列表项UI
    Widget body = Container();
    return body;
  }
}

普通视图 - gv 代码片段

输入 gv 并按 Tab 键，生成 GetX 普通视图：

class DemoV extends BaseGetXV<DemoVC> {
  DemoV({super.key});
  
  @override
  DemoVC get controller => Get.put(DemoVC());

  @override
  Widget createBody({
    required BuildContext context,
    BoxConstraints? constraints,
  }) {
    // 在这里构建您的界面UI
    Widget body = Container();
    return body;
  }
}

⚠️ 注意：使用 gv 代码片段时，您需要在单独的文件中定义对应的控制器类。

3. 单独控制器（C 模式）

💡 C 模式特点

在 C 模式中，只定义控制器部分，视图需要在单独的文件中定义。这种模式适合大型项目，便于业务逻辑的复用和测试。

列表控制器 - glc 代码片段

输入 glc 并按 Tab 键，生成 GetX 列表控制器：

class DemoListC extends BaseGetXListController {
  // --------- 公开属性  --------- //
  // 定义可被视图访问的变量，如列表数据、加载状态等

  // --------- 私有属性  --------- //
  // 定义控制器内部使用的变量，如API服务、缓存等

  // --------- 生命周期  --------- //
  // 控制器初始化、销毁等生命周期方法

  // --------- 数据处理  --------- //
  // 实现数据获取、转换和分页逻辑

  // --------- 触发事件  --------- //
  // 处理用户交互，如点击、刷新等事件
}

普通控制器 - gc 代码片段

输入 gc 并按 Tab 键，生成 GetX 普通控制器：

class DemoC extends BaseGetXController {
  // --------- 公开属性  --------- //
  // 定义可被视图访问的变量，如表单数据、状态标志等

  // --------- 私有属性  --------- //
  // 定义控制器内部使用的变量，如API服务、工具类等

  // --------- 生命周期  --------- //
  // 控制器初始化、销毁等生命周期方法

  // --------- 数据处理  --------- //
  // 实现数据获取、验证和转换逻辑

  // --------- 触发事件  --------- //
  // 处理用户交互，如按钮点击、表单提交等事件
}

基于 StatefulWidget 的代码片段

💡 原生 Flutter 支持

除了 GetX，我们也提供了基于 Flutter 原生 StatefulWidget 的代码片段，适合不使用第三方状态管理的项目。

1. 列表界面代码片段

代码片段	描述	使用场景
stLV	自带上拉加载和下拉刷新功能的列表界面	需要分页加载数据的完整页面
stLW	自带上拉加载和下拉刷新功能的列表组件	作为页面一部分的可复用列表组件

2. 普通界面代码片段

代码片段	描述	使用场景
stV	自带生命周期管理的有状态界面	需要管理状态的完整页面
stW	自带生命周期管理的有状态组件	需要管理状态的可复用组件

基于 StatelessWidget 的代码片段

💡 无状态组件

对于不需要管理状态的简单界面，我们提供了基于 StatelessWidget 的代码片段。

代码片段	描述	使用场景
leV	无状态界面	纯展示、不需要状态管理的完整页面
leW	无状态组件	纯展示、不需要状态管理的可复用组件

🧩 基础类的设计理念

您可能已经注意到，所有界面和控制器都继承自 Base 开头的基础类。这正是 base_ui 的核心设计理念：

1. 关注点分离：将界面和控制器明确分离，各司其职
2. 代码复用：将共同功能抽象到基类中，避免重复编写
3. 统一接口：提供一致的接口和生命周期管理方式
4. 降低学习成本：遵循相同的模式，降低团队成员的学习曲线

这种设计使得代码更加清晰、易于维护、易于扩展、易于复用，同时也便于团队协作和知识传递。

深入学习

如果您想进一步了解我们的UI架构设计：

• 基础架构：查看 基础UI架构详解 了解 base_ui 的实现原理和设计思路
• 基础组件：查看 基础组件详解 了解基础组件的使用方法
• GetX UI 基础组件：查看 GetX UI 组件详解 了解 GetX 提供的基础 UI 组件

这些文档将帮助您更深入地理解框架设计，从而能够更灵活地应用和扩展现有功能。