美文网首页
flutter代码开发规范

flutter代码开发规范

作者: 无赖_V | 来源:发表于2022-05-12 01:31 被阅读0次

    一、命名规范

    文件命名

    查看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代码开发规范

          本文链接:https://www.haomeiwen.com/subject/jjxsurtx.html