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

原创

已于 2024-03-13 11:12:17 修改 · 857 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

于 2024-03-13 11:10:33 首次发布

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: MainAxisAlignm