0.1 代码规范

0.1 代码规范

代码检查

pubspec.yaml 开启 flutter_lints

1
2
3
4
5
6
7
8
9
10
11
dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^1.0.0
  ...

目录

image-20220705110524465

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
├── lib
│   ├── common // 通用功能
│   │   ├── api // 拉取数据
│   │   │   └── index.dart
│   │   ├── components // 业务组件
│   │   │   └── index.dart
│   │   ├── extension // 扩展
│   │   │   └── index.dart
│   │   ├── i18n // 多语言
│   │   │   └── index.dart
│   │   ├── index.dart
│   │   ├── models // 数据模型
│   │   │   └── index.dart
│   │   ├── routers // 路由
│   │   │   └── index.dart
│   │   ├── services // 全局服务
│   │   │   └── index.dart
│   │   ├── style // 样式
│   │   │   └── index.dart
│   │   ├── utils // 工具函数
│   │   │   └── index.dart
│   │   ├── values // 配置值
│   │   │   └── index.dart
│   │   └── widgets // 基础组件
│   │       └── index.dart
│   ├── main.dart
│   └── pages // 业务
│       ├── goods // 商品
│       ├── index.dart
│       ├── msg // 消息
│       ├── my // 我的
│       ├── order // 订单
│       ├── search // 搜索
│       ├── styles // 样式调试
│       └── system // 系统
│           └── splash // 欢迎屏
│               ├── controller.dart // 逻辑
│               ├── index.dart
│               ├── view.dart // 视图
│               └── widgets // 组件

导包

common 内采用相对路径，这样方便代码复用

1
import '../index.dart';

common/index.dart 导出所有，这样业务 pages 只要一个 import 就行了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
library common;

export 'api/index.dart';
export 'components/index.dart';
export 'extension/index.dart';
export 'i18n/index.dart';
export 'models/index.dart';
export 'routers/index.dart';
export 'services/index.dart';
export 'style/index.dart';
export 'utils/index.dart';
export 'values/index.dart';
export 'widgets/index.dart';
import 'package:flutter/material.dart';
import 'package:flutter_woo_commerce_getx_learn/common/index.dart';
import 'package:get/get.dart';

import 'index.dart';

class WidgetsPage extends GetView<WidgetsController> {
  const WidgetsPage({Key? key}) : super(key: key);

package:flutter_woo_commerce_getx_learn 是你的项目包名

业务代码

逻辑、视图、组件 分离，业务拆分到 2 层目录，不要再往下了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
│   └── pages // 业务
│       ├── goods // 商品
│       ├── index.dart
│       ├── msg // 消息
│       ├── my // 我的
│       ├── order // 订单
│       ├── search // 搜索
│       ├── styles // 样式调试
│       └── system // 系统
│           └── splash // 欢迎屏
│               ├── controller.dart // 逻辑
│               ├── index.dart
│               ├── view.dart // 视图
│               └── widgets // 组件

组件内不要包含屏幕适配代码

ScreenUtil 适配可以放在视图层，否则到处都是 .w .h .sp 比较乱

1
2
3
4
5
6
7
8
9
10
11
CardWidget(
    padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 51.w),
    child: Column(
      children: [
        _buildForm(),
        SizedBox(height: 50.h),
        _buildSigInBtn(),
      ],
    ),
    // width: double.infinity,
  )

这种代码放在 lib/pages/ 这层

组件抽取

通用基础组件放在 common/widgets 可复用性最强

1
2
3
4
5
6
7
8
9
10
11
12
├── common
│   └── widgets
│       ├── button.dart // 按钮
│       ├── checkbox.dart // checkbox
│       ├── group_list.dart // 分组列表
│       ├── icon.dart // 图标
│       ├── image.dart // 图片
│       ├── index.dart
│       ├── input.dart // 输入框
│       ├── list_tile.dart // listTile
│       ├── text.dart // 文字
│       └── text_form.dart // 表单输入

业务组件放在 common/components 满足本 app 业务需求

Api 输入输出不要用 Map , 类型需明确

1
2
3
4
5
/// 注册
static Future<bool> register(UserRegisterReq? req) async {
  ...
  return false;
}

UserRegisterReq 就是入参类型明确，定义文件放在 lib/common/models/request

类名约定

用途 前缀 后缀 举例
数据模型 Model AttributeModel
API 请求 Req OrdersReq
Service 服务 Service CartService
UI 组件 Widget PinPutWidget
样式 App AppColors
资源 Assets AssetsImages
extension 扩展 Ex ExColor
page 控制器 Controller BuyNowController
page 视图 Page BuyNowPage
page widget 组件 Build BuildPriceLine

变量、函数名约定

用途 前缀 后缀 举例
私有 _ _findIndex
视图拆分函数 _build _buildButtons
主视图函数（保留） _buildView