Flutter 模块化开发以及数据循环渲染

1.为什么要使用模块化开发

在flutter的开发中，从布局开始所有的元素都是堆叠起来的 ，如果我们按照以往的开发思维去做页面的时候就会发现代码极其冗长并且难以维护，当我们采用模块化开发的时候就会发现这样的思维下我们写出来的代码是很优美且复用率是很高的，并且当我们形成模块化开发的习惯之后无论开发什么我们都会得心应手。

2.flutter如何进行模块化开发

flutter与我们前端熟知的开发模式不同很多习惯使用的语句在flutter中无法使用，当某些模块字段为空不展示的时候就需要我们去处理该模块的展示与否，当我们数据更新时页面对应模块刷新，我们需要使用setState重新去build我们的页面了

自然我们的一整个页面可以分为很多个小的build，每一个模块下的数据都又父级build去传递给我们的子级当父级传递来的数据为空或者null时我就就可以使用常用的if语句去判断是否将这个build添加进我们父级

以下为代码展示

Map<String,dynamic> data = {
"name":'张三',
"age":18,
"image":null,
}

Widget build(BuildContext context){

    List<Widget> listBuild = []; /// 当前信息展示数组
    /// 判断是否有用户姓名
    if(name.isNotEmpty){
        listBuild.add(nameBuild(context,data['name']));
    }
    if(name.isNotEmpty){
        listBuild.add(ageBuild(context,data['age']));
    }
    if(image.isNotEmpty){
        listBuild.add(imageBuild(context,data['image']));
    }
    return Row(
        mainAxisAlignment: MainAxisAlignment.start, /// 当前元素排列方式
        children:listBuild /// 将我们的数组赋给children用来渲染
    )
}

/// 构建用户姓名

widget nameBuild(BuildContext context, String name){
    return Text(name,style:TextStyle(fontSize:12)); /// 其他样式属性可自行百度
}

/// 构建用户年龄

widget ageBuild(BuildContext context, int age){

    /// 这里使用toString是因为Text组件仅支持String类型展示 所以我们需要将int或者其他类型参数转为String类型
    return Text(age.toString,style:TextStyle(fontSize:12)); /// 其他样式属性可自行百度
}

/// 处理头像模块

Widget imageBuild(BuildContext context, String image){

/// 这里我们需要处理头像模块  如果有默认的就将默认的图片进行展示没有则该模块不做渲染

/// Keys.goodsMainImageAssetsPath  为我们默认展示头像的地址

/// 我们展示默认图片
Widget imagesBuild = Image.asset(Keys.goodsMainImageAssetsPath,
        width: 60, height: 60, fit: BoxFit.cover);
    if (image.isNotEmpty) {
    /// 父级传递过来的图片
      imageBuild = Image.network(image,
          width: 60, height: 60, fit: BoxFit.cover);
    }
    return Container(
        //超出部分，可裁剪
        clipBehavior: Clip.hardEdge,
        decoration: const BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(12)), // 设置圆角半径为12
        ),
        height: 60,
        width: 60,
        child: imagseBuild);

}

当页面数据改变时如何操作

依旧是上面的代码片段我们截取部分作为操作

/// 我们需要注意在开发的过程中只有StatefulWidget可以重新build

/// 构建用户姓名

widget nameBuild(BuildContext context, String name){
    return TextButton(
        child:Text(name,style:TextStyle(fontSize:12)),
        onPressed:(){
            setState((){
                data['age'] = 20;
            });
        }
    ); 
}

我们通过文本 按钮将我们的值进行更改然后setState重新build我们模块代码使数据更新

这样写的好处是我们更加方便开发以及维护不会导致我们因为一个模块代码篇幅过于长增加我们维护修改的难度

3.数据的循环渲染

在开发过程中我们总会离不开数据的循环渲染模块，我们可以采用ListView组件去渲染也可以使用其他的方式 下面是我自己采用模块化循环渲染 当然为减少代码篇幅我们依旧采用上面的代码模块 只不过我们需要修改一下我们的数据结构

代码展示模块

List dataList = [
    {
        "name":'张三',
        "age":18,
        "image":null,
    },
    {
        "name":'李四',
        "age":22,
        "image":null,
    },
    {
        "name":'王五',
        "age":58,
        "image":null, /// 头像模块依旧为null
    },
]

Widget build(BuildContext context){
    /// SingleChildScrollView  当页面高度超出后进行滚动
    return SingleChildScrollView(
        child:Colum(
            /// 排列对齐方式
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
                /// 在这里我通过使用map循环将数组中的每一项进行渲染，然后itemBuild会将每一项return回来用作渲染
                ...dataList.map((e) => itembuild(context, e)),
            ],
        ),    
    );
}


/// 用户信息展示模块
Widget itembuild(BuildContext context,Map<String,dynamic> data){

    List<Widget> listBuild = []; /// 当前信息展示数组
    /// 判断是否有用户姓名
    if(name.isNotEmpty){
        listBuild.add(nameBuild(context,data['name']));
    }
    if(name.isNotEmpty){
        listBuild.add(ageBuild(context,data['age']));
    }
    if(image.isNotEmpty){
        listBuild.add(imageBuild(context,data['image']));
    }
    return Row(
        mainAxisAlignment: MainAxisAlignment.start, /// 当前元素排列方式
        children:listBuild /// 将我们的数组赋给children用来渲染
    );
}

4.总结

这样的方式不仅在开发的过程中大大节省了开发时间还提高了我们页面的可维护性，下一期我可能会出组件的封装、维护、扩展、继承吧。

最后本人也是小白  flutter还没有入门 哪里写的有问题希望大佬们不吝赐教  不喜勿怪  勿喷