flutter代码开发规范

一、命名规范

文件命名

查看dart源码发现,源文件名都是小写英文加上下划线组成,如app_bar.dart;一般情况下,类名是源文件名的大驼峰写法,如源文件app_bar.dart,类名AppBar;源文件bottom_app_bar,类名BottomAppBar;

变量命名

list:不使用前缀字母,如不推荐使用mList,可以用list,或者更加详细的命名,如bookList; List<String> bookList = [];
map:不使用前缀字母,如不推荐使用mMap,可以用map,或者更加详细的命名,如bookMap; Map<String,dynamic> = {}
bool : isShowDetail, 使用is开头+具体的业务场景命名,
string: 具体业务字段即可, 比如后端返回的title, desc可以直接使用

常量名称定义

const num pi = 3.14;
const int defaultTimeout = 1000;
final RegExp urlScheme = RegExp('^([a-z]+)

枚举命名

/* 枚举的用途 */
enum Direction {
top, //类型的用途 xxxx
left,//类型的用途 xxxx
}

避免生产上使用print的方法在生产中调用

print("value = ${value}");

避免对”dynamic”目标进行方法调用或属性访问

Function() callBack
Function(Map<String,dynamic>) callBack
Future<bool> get isGranted
Future get isGranted

一个函数只做一件事,代码行数不宜过长;

不建议这样写, 直接return了一个widget, 这里只有一个地方调用到, 是可以直接return在对应的位置的.
// 自定义导航栏样式

  getNavWidget(value) {
    return EcSearchNavWidget(
      getSuggestion,
      toSearchWithKey,
      toResetSearch,
      keyword: value.filterKeyword,
      defaultKeyword: widget.fromKeyword,
      tabController: _tabController,
      source: widget.source,
    );
  }

建议下面写法:

///某一个商品的Widget
  Widget _buildProductWidget(EcBaseProductModel productModel, int index) {
    return GestureDetector(
      onTap: () {
        ///打点
        EcCommonAnalysis.tapProductCard(widget.pageName,
            index: (index + 1).toString(),
            skuCode: productModel?.skuCode,
            skuName: productModel.skuName ?? "",
            price: productModel.priceList.first.price.toString(),
            isShowBrokerage: productModel.brokerages.length > 0,
            saleCnt: productModel.saleCnt.toString());

        //点击进入商品详情
        Navigator.of(context).push(CommodityDetailsPage.pageRoute(
            productCode: '${productModel.skuCode}_base',
            skuCode: productModel.skuCode));
      },
      child: Containe(
          child: Column(
            children: [
              ///图片
              _buildProductImageWidget(productModel, index),

              ///名字
              _buildProductNameWidget(productModel),

              ///价格
              _buildProductPriceWidget(productModel, index),
            ],
          )),
    );
  }

代码行数不宜过长;最好控制到80行左右

公有函数应有try catch捕获异常

   try {
          EcPayCenterAnalysis.initPaySuccessPage(
              "", widget.payDetailModel.groupOrderNo, false,
              isSop: widget.payDetailModel.isSopOrder,
              paymentType: _orderModel.paymentType);
        } catch (e) {
          debugPrint(e.toString());
        }

page页面中(StatelessWidget、StatefulWidget)尽量将每一层和每一个widget以单独函数形式调用,层次清晰分明(工具类封装的Widget可例外);

              ///图片
              _buildProductImageWidget(productModel, index),

              ///名字
              _buildProductNameWidget(productModel),

              ///价格
              _buildProductPriceWidget(productModel, index),

封装简单常用的widget,注意使用@required、assert

class ResumeImage extends StatefulWidget {
  ResumeImage({
    Key key,
    @required this.image,
    this.alignment = Alignment.center,
  })  : assert(image != null),
        assert(alignment != null);

实时处理报错(error)和警告(warning):Dart Analysis统计了所有报错和警告的具体信息;(好处:一则让代码程序更健壮,二则在dart sdk升级后,可避免报错);

点击问题,然后处理对应的报错,警告

vsCode控制台

if else使用大括号,尽可能不省略;

不要使用 EcEventBusUtil

必要的简要的代码注释(不止是.dart文件,还包括pubspec.yaml);

#网络库 https://github.com/flutterchina/dio
dio: ^4.0.4

页面之间传值,尽可能使用final字段, 以及该类的用途

/*
 * @author 小强
 *
 * @time 3/18/22  1:09 PM
 *
 * @desc 返回按钮视图
 *
 */
class EcBackWidget extends StatelessWidget {
  const EcBackWidget({
    Key key,
    this.backName = "",
    this.backImg = 'ic_back_black',
    this.onBackPressed,
    this.backgroundColor
  }) : super(key: key);

  //返回按钮名称
  final String backName;

  ///返回按钮图片地址
  final String backImg;

  ///返回键回调
  final VoidCallback onBackPressed;

  ///背景颜色
  final Color backgroundColor;

拒绝弱命名(如var a)

    var uuid = Uuid().v1();

删除页面不使用的头文件

图片的名字规则

应用内图片分类因每个人自己的分类风格。
按照功能进行分类:
功能名称 _ 控件类型 _ 自定义参数(标准或者大字版).png
例:
标准:share
btn _ weixin.png
大字版:share_ btn _ weixin_large.png

常用的颜色值 使用统一相同含义值来赋值;

颜色变量 :ColorsRes.color_f59356
FontWeight: FontWeightRes.regular

开发过程中,避免使用test,FT1,FT2. 这种调试字符

类似Text("test: + item.title");

在前端开发过程中,任何代码写死的地方, 都要产生疑问, 是否可以后端配置

二、目录规范

provider_demo
: Desktop/amway-superapp-ecommerce-flutter/lib/pages/ecom_provider_demo


provider_demo

bloc_demo:
/Users/lvzhao/Desktop/amway-superapp-ecommerce-flutter2.0/lib/pages/ecom_bloc_demo

bloc_demo
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • # Flutter Go代码开发规范 0.1.0版 ##代码风格###标识符三种类型####大驼峰 类、枚举、ty...
    哥哥是欧巴Vitory阅读 449评论 0 3
  • 代码风格 标识符三种类型 大驼峰 类、枚举、typedef和类型参数 包括用于元数据注释的类 使用小写加下划线来命...
    M_PI_4阅读 339评论 2 0
  • 代码风格 标识符三种类型 大驼峰 类、枚举、typedef和类型参数 包括用于元数据注释的类 使用小写加下划线来命...
    CQ_TYL阅读 2,100评论 1 13
  • 转自:flutter-go[https://github.com/alibaba/flutter-go] 代码风格...
    Shawpoo的阅读 479评论 0 1
  • 一、代码风格 1、标识符三种类型 大驼峰 类、枚举、typedef和类型参数 包括用于元数据注释的类 使用小写加下...
    GeniusWong阅读 494评论 0 1