Flutter 组件化

最新推荐文章于 2025-08-13 17:54:00 发布

原创最新推荐文章于 2025-08-13 17:54:00 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

文章标签：

本文探讨了Flutter的组件化实现，通过创建Module模块实现业务隔离，模块间资源依赖和共享，以及如何处理不同运行环境的资源配置。使用Flutter的插件系统与原生交互，并介绍了解耦组件间的通信方式，如路由机制。此外，提到了Flutter组件化的灵活性，相较于原生开发具有明显优势。

最近搞flutter组件化感觉比原生香多了，记录一下。

1、flutter组件化通过创建module模块来形成业务模块，module模块天生可以直接孤立运行，并且可以被主工程依赖；

2、flutter的插件也可以形成插件功能和独立运行和module功能类似（方便和原生交流）；

3、模块间的资源可以被依赖共享，但是访问方式需要注意（其他json等文件类似）

用login_module登录模块举例：

login_module模块图片资源: images/test.png

当模块独立运行时候是：

Image.asset('images/test.png'fit: BoxFit.fitWidth)

当集成到主工程运行时候需要改变路径：

Image.asset('packages/login_module/images/test.png',fit: BoxFit.fitWidth,)

注意packages：是固定打头

为了切换方便，可以在studio增加运行变量控制：

运行添加参数软件上直接：--dart-define=IS_RUN_ALONE=true

模块代码中接收变量：

static const isRunAlone = bool.fromEnvironment('IS_RUN_ALONE', defaultValue: false);

于是模块中资源访问代码变成：
Image.asset(isRunAlone
      ? 'images/test.png'
      : 'packages/login_module/images/test.png',
  fit: BoxFit.fitWidth,
),

注意：isRunAlone：true则是模块独立运行直接访问资源；false则是集成主工程访问图片；

4、依赖的第三方依赖可以传递a->b->c ,a模块的yaml文件中的插件依赖，可以被c中访问；所以当一些公用的第三方插件依赖可以放到common模块里面去统一管理；

5、对于公共的图片比如返回箭头图片等icon（每个很多模块会用到）,也可以放到公共模块image里面，对于访问方式参考3中方式；

6、最后就是组件之间通信，flutter通过路由方式访问，彻底解耦flutter组件间、主工程和组件模块间的页面访问，fluro或者flutter自带的都可以；解耦尽量做到主工程不要有模块业务的引用；

总结：flutter组件化比原生组件化干净利落，天生支持组件化。