【flutter】架构之商城main入口
架构之商城main入口
- 前言
- 一、项目模块的划分
- 二、入口main的配置
- 三、配置文件怎么做
- 总结
前言
本栏目我们将完成一个商城项目的架构搭建,并完善中间的所有功能,总页面大概200个,如果你能看完整个栏目,你肯定能独立完成flutter 项目的整体研发工作。
首先新建一个叫blog_mall 的项目,能看到这里的,我想都知道该怎么创建项目了,这里就不再赘述。
一、项目模块的划分
在开始前,我们先介绍一下项目的整体架构
由上图我们可以看到,我把整个项目的文件夹分为了5个模块:
- app: 整个项目的主题文件夹
- config: 项目的基础配置文件
- http:网络模块
- utils:工具模块
- widget:通用的child 模块
二、入口main的配置
在配置main 入口文件之前,我们先导入本项目主要的框架插件:
# 设备适配 flutter_screenutil: ^5.8.4 # 状态管理 get: ^4.6.5 # 收起键盘 keyboard_dismisser: ^3.0.0 # 加载器 flutter_easyloading: ^3.0.5
- flutter_screenutil:做前端的,最重要的是,没错,就是适配,这个组件会完美的解决你的问题。
- get:大家可以看到,我将使用getx 作为整个项目的状态管理器,如果有对getx 这个组件不太了解的,可以翻看我之前写的相关文章。
- keyboard_dismisser:当你使用文本输入框的,键盘怎么回收?单个设置?麻烦不你,这里教你一键解决。
- flutter_easyloading:网络请求?吐司?菊花?这个全都有。
上面我们介绍导入的四个组件,下面我们来看看主要针对main 文件做了什么改造:
class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return ScreenUtilInit(// 一般情况下,你的设计师的UI比例初始值都是它designSize: const Size(375, 812),minTextAdapt: true,splitScreenMode: true,builder: (context, child) {return KeyboardDismisser(gestures: const [GestureType.onTap],child: GetMaterialApp(// 项目的主题走起来theme: FhTheme.getTheme(),debugShowCheckedModeBanner: false,title: '即时零售',// 配置的路由文件,什么?routes??? 不需要,完全不需要getPages: GetPages.getPages,initialBinding: BaseBindings(),builder: (context, child) {// 初始化你的loading EasyLoading.init();// 看不懂这个是什么???你想你的APP 字体会跟随系统字体大小去改变的话,你尽管干掉它return MediaQuery(data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),child: FlutterEasyLoading(child: child ?? Container(),),);},),);},);}
}
看完上面的代码,如果你还有什么疑问的话,那么我只想说,你没救了,还是尽快换个行业比较好。
三、配置文件怎么做
上面的代码中,你看到了"GetPages.getPages" 路由的配置,“FhTheme.getTheme()” 主题色的配置,“BaseBindings()” bindings 的配置,那么这些文件夹里面都是什么呢?带着疑问我们继续看。
import 'package:get/get.dart';/// 1 * FileName: get_pages
/// 2 * Author: tiger -- 范虎
/// 3 * Date: 2023/9/20 11:52
/// 4 * Description:
/// 5 * 作者博客:半身风雪class GetPages{// static String home = '/home';static List<GetPage> getPages = [// GetPage(name: home, page: () => const HomePage()),];}
GetPages 啥也不是,他就只是一个GetPage 的数组,后期我们所有的路由都将在这里进行配置,具体可参考示例。
import 'package:get/get.dart';/// 1 * FileName: base_bindings
/// 2 * Author: tiger -- 范虎
/// 3 * Date: 2023/9/20 11:54
/// 4 * Description:
/// 5 * 作者博客:半身风雪class BaseBindings extends Bindings{@overridevoid dependencies() {// TODO: implement dependencies// Get.lazyPut<HomeController>(() => HomeController, fenix: true);}}
Bindings 的配置文件也一样,这里我们初始化的整个项目的所有controller,怎么用?看示例啊,加载方式有几种,我就不一一介绍,普遍使用lazyPut 就可以了,fenix 的初始值是false ,这里我为什么要用true?因为他可以让你的controller 复活,想想你跳了N个界面之后,突然想调第一个controller 的数据,但是这个controller 已经被销毁了,会发生什么呢?
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';import 'fh_colors.dart';/// 1 * FileName: fh_theme
/// 2 * Author: tiger -- 范虎
/// 3 * Date: 2023/9/20 11:39
/// 4 * Description: 项目主题
/// 5 * 作者博客:半身风雪class FhTheme{static ThemeData getTheme(){return ThemeData(// 取消按钮的溅射效果splashColor: Colors.transparent,highlightColor: Colors.transparent,hoverColor: Colors.transparent,// 页面背景色scaffoldBackgroundColor: FhColors.themeColor,// 分割线颜色dividerColor: FhColors.dividerColor,// 全局appbar样式控制appBarTheme: const AppBarTheme(//分割线elevation: 0.0,//背景色color: Colors.white,// 状态栏systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.transparent,statusBarIconBrightness: Brightness.dark,statusBarBrightness: Brightness.dark,),),// 底部 bottom 主题bottomNavigationBarTheme: const BottomNavigationBarThemeData(backgroundColor: Colors.white,),// floatingActionButtonTheme: const FloatingActionButtonThemeData(// //浮动按钮样式 after v1.13.2. 后不建议使用// backgroundColor: Colors.white,// ),);}
}
theme 主题色,这个就没有什么好说的了,你只有明白一点,整个项目中,你所有widget 的初始色值、属性等,都可以在这里进行赋值,不懂的请移步看我之前的文章。
在上面的class 中,你还疑惑FhColors 是什么?别急,这个是我们自己封装的色值文件。
class FhColors{static Color themeColor = FhColorUtils.hexStringColor('#F4F5F9');static Color dividerColor = FhColorUtils.hexStringColor('#E6E6E6');static Color textBlack = FhColorUtils.hexStringColor('#000000');}
作用就一个,后期项目中所有的设置我们都将放在这里,进行统一的管理。
纳尼?FhColorUtils 又是啥???
拜托,FhColorUtils 就是一个色值转换的封装操作,里面就放你flutter 目前不支持的色值格式转换就行,你就理解成色值转换器呗。
贴代码?i no 你去看一下我前面的文章行不行啊,都有的。
总结
本篇文章很短,内容也很少,但是有一点,当你去新建项目的时候,main 文件就这么写,觉得没错,说不定你的管理还给你加个鸡腿呢。
【flutter】架构之商城main入口相关推荐
- 混合开发框架|Flutter多引擎dart多入口设计实现
Flutter多引擎&dart多入口设计 Flutter项目混合架构 FlutterFragment普通实现设计 解释截图中代码片逻辑含义 系统FlutterFragment自带普通设计实现 ...
- 第一章 常见跨平台解决方案及Flutter架构
近些年来,不断的有前端跨平台方案涌现出来,比如基于WebView的Cordova,还有渲染成原生控件的Reactive.Weex等,那么,这些跨平台方案有什么通用的实现思路呢,而Flutter的设计思 ...
- 今日头条 字节跳动 Flutter架构实践
今日头条 字节跳动 Flutter架构实践 1 移动跨平台技术探究 ◆ 为什么需要跨平台? 今日头条 字节跳动 Flutter架构实践 ◆ 跨平台技术是如何发展起来的? 今日头条 字节跳动 Flutt ...
- Flutter 沙龙回顾 | 跨平台技术趋势及字节跳动 Flutter 架构实践
11 月 23 日,字节跳动技术沙龙 | Flutter 技术专场 在北京后山艺术空间圆满结束.我们邀请到字节跳动移动平台部 Flutter 架构师袁辉辉,Google Flutter 团队工程师 J ...
- 摸鱼kik的Flutter架构搭建
摸鱼kik的Flutter架构搭建 摸鱼kik官方主页:https://moyukik.sohu.com/
- (十)RHEL系统之基于LAMP架构部署商城系统
基于LAMP架构部署商城系统 接上篇:(九)RHEL系统之linux自有服务 任务背景 小王经过一段时间学习,慢慢的了解到公司的一些业务架构,发现好几个项目不是LAMP架构就是Nginx+Tomcat ...
- 从新手到Flutter架构师,一篇就够!这原因我服了
咸鱼翻身不断上演 2018年5月份,北京,在所谓的互联网寒冬里,一个普通二本的学生,在小公司工作一年后,跳槽拿到了百度的offer,月薪从9k变为17k,涨薪幅度接近100%. 2018年底,上海,一 ...
- mongodb 查多个不等于_高可用架构之商城的mongodb设计分析
一. mongodb商品数据异构和聚合设计 问题起因 对于商品详情页的数据来源于如下主要服务: 1.商品基本信息 2.商品图片服务 3.促销服务 4.库存状态/配送至服务 5.广告词服务 6.预售服务 ...
- C语言程序main入口函数
一.main()函数是什么样的 我们先要搞清楚main()函数有哪几种? 查阅C89/C99/C11标准文档,里面明确固定了两种写法: int main(void) { /* ... */ } int ...
- 从新手到Flutter架构师,一篇就够!学习路线+知识点梳理
前言 IT行业薪水高,这是众所周知的,所以很多人大学都选择IT相关专业,即使非该专业的人,毕业了也想去一个培训机构镀镀金,进入这一行业. 但是有关这个行业35岁就退休的说法,也一直盛传. 加上这几年不 ...
最新文章
- log4日志内容换行_springboot支付项目之日志配置
- php 剪贴板,之Windows中的剪贴板
- Product change时关于change_log的讨论
- ajax的data传参的两种方式
- java获取10位随机数_Java基础:JAVA中BitSet使用详解
- 你的导师是哪种类型?
- 苏宁启动30周年庆:联合近300个品牌启动“超级品牌季”
- loadrunner可用许可证
- java中文转Unicode
- JavaWeb——web.xml配置详细解读
- 类和对象编程(三):构造函数析构函数
- 一段时间即可做一些事情,如二十分钟
- 平台打包整合成exe安装部署(java+mysql+tomcat+war)
- 相邻素数的差最大是多少c语言,怎么证明?相邻两个素数之差的最大值
- Java项目实战:实现淡旺季飞机票打折
- js跟php增加删除信息,JavaScript动态增加节点和删除节点
- 拼多多涉嫌远程删除用户照片:如何防止应用软件过度收集用户数据
- 用Java开发50个棋类游戏
- 心知天气API如何调用与json数据如何显示
- zeppelin高可用部署