【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});Widget 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{void 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 文件就这么写,觉得没错,说不定你的管理还给你加个鸡腿呢。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/83117.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于自编译的onlyoffice镜像,关于修改字体的问题

基于自编译的onlyoffice镜像&#xff0c;关于修改字体的问题 自编译onlyoffice镜像来自于 https://blog.csdn.net/Gemini1995/article/details/132427908 该镜像里面没有documentserver-generate-allfonts.sh文件&#xff0c;所以需要自己创建一个&#xff08;建议放在/usr/b…

接入网络技术

接入网络&#xff1a;是实现网络边缘的端系统与网络核心连接与接入的网络。 常见有以下几类&#xff1a; 1、电话拨号接入&#xff1a;这类接入方式在早期接入网络中主要用于家庭接入&#xff0c;利用了电话网络覆盖广泛的优点&#xff0c;能够方便地实现分散的家庭用户接入网…

八、实时时钟

八、实时时钟 简介时钟芯片模块代码可调时钟 简介 引脚定义和应用电路 我们的开发板没有备用电池 寄存器定义 时序定义 在时钟的上升沿&#xff0c;IO口的数据被写入到芯片中&#xff0c;在下降沿&#xff0c;芯片就会将数据输出。如果是写入&#xff0c;那么在整个过程中&…

Python之装饰器的使用

目录 闭包装饰器函数实现原理类实现(带参数)装饰类应用权限控制计时和添加日志系统识别redis_require 小结 闭包 对于函数内声明的变量一般都为临时变量&#xff0c;其生命周期随函数结束而结束。 但闭包是个例外 闭包满足的条件&#xff1a; 1、必须要有内嵌函数 2、内函数…

学习笔记|外部中断|INT0|中断列表|STC32G单片机视频开发教程(冲哥)|第十五集:中断系统和外部中断

文章目录 1.中断和中断系统1.1什么是中断?1.2什么是中断系统1.3中断系统的优点1.4 中断系统包含哪些中断源1.5.中断次序 2.什么是外部中断3.外部中断的用法4.外部中断的用法新的测试场景完整代码 总结课后练习: 上节课我们学完了GPIO的矩阵按键&#xff0c;已经把这个GPIO的一…

视频讲解|1033含sop的配电网重构(含风光可多时段拓展)

目录 1 主要内容 程序特点 讲解重点 2 视频链接 1 主要内容 该视频为含sop的配电网重构matlab代码讲解&#xff0c;对应资源下载链接为含sop的配电网重构&#xff08;含风光|可多时段拓展&#xff09;&#xff0c;程序主要内容是&#xff1a;针对含sop的配电网重构模型&…

基于Java的公务员考试资料共享平台的设计与实现

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…

LuatOS-SOC接口文档(air780E)--dac - 数模转换

dac.open(ch, freq, mode) 打开DAC通道,并配置参数 参数 传入值类型 解释 int 通道编号,例如0 int 输出频率,单位hz int 模式,默认为0,预留 返回值 返回值类型 解释 true 成功返回true,否则返回false int 底层返回值,调试用 例子 if dac.open(0, 44000) the…

【Linux基础】第28讲 Linux Vi编辑器

在Linux下一班使用Vi编辑器来编辑文件vi既可以查看文件也可以编辑文件而vim是vi的升级版本&#xff0c;具备更多的功能。vi如果目标文件不存在&#xff0c;会创建新的文件。但如果新文件没做编辑&#xff0c;退出后还会消失。 VI的三种模式介绍 三种模式&#xff08;状态&…

emacs从缓冲中获取信息,并执行shell 命令

/* author: hjjdebug * date : 2023年 09月 20日 星期三 11:39:11 CST * description: emacs从缓冲中获取信息,并执行shell 命令 */ 我有一个udp频道的列表,如下: 239.3.1.105:8092 | IP 61.135.101.121.8046 > 239.3.1.124:8128 | IP 61.135.101.118.8050 >…

[golang 流媒体在线直播系统] 2.搭建基于golang的流媒体服务器实现拉流推流,以及Html客户端拉取hls类型的流

一.使用 Go 语言的开源框架Livego搭建流媒体服务器 1.Livego 框架的介绍 Go 语言拥有强大的 服务器性能 ,golang 在语言级别解决了 多进程并发 的问题,支持 多核 CPU均衡使用 ,支持 海量轻量级线程 ,所以非常适合做 流媒体服务器 .而 livego 是基于golang 开发的简单高效的…

UML基础与应用之面向对象

UML&#xff08;Unified Modeling Language&#xff09;是一种用于软件系统建模的标准化语言&#xff0c;它使用图形符号和文本来描述软件系统的结构、行为和交互。在面向对象编程中&#xff0c;UML被广泛应用于软件系统的设计和分析阶段。本文将总结UML基础与应用之面向对象的…

uniapp 拉起微信支付方法封装

本文示例基于 uniapp 的 uni.requestPayment() 微信支付拉起方法封装及调用示例&#xff1a; 方法封装 注&#xff1a;方法为 vue3 hooks 写法 可直接复制使用&#xff0c;但要注意传入的 data 参数中的各字段名&#xff0c;结合各自拉起支付时后端返回的参数字段做相应修改。…

程序员的文案

目录 这个社会的规则或者真相&#xff0c;跟人情一毛钱关系都没有 心平能愈三千疾&#xff08;无欲无求是完人&#xff09; 永远不要做羞耻心太重的人&#xff08;丢人是成长最快的方式&#xff09; 好脾气留给最亲的人 这个社会的规则或者真相&#xff0c;跟人情一毛钱关系…

网络爬虫-----爬虫的分类及原理

目录 爬虫的分类 1.通用网络爬虫&#xff1a;搜索引擎的爬虫 2.聚焦网络爬虫&#xff1a;针对特定网页的爬虫 3.增量式网络爬虫 4.深层网络爬虫 通用爬虫与聚焦爬虫的原理 通用爬虫&#xff1a; 聚焦爬虫&#xff1a; 爬虫的分类 网络爬虫按照系统结构和实现技术&#…

Linux——IO

✅<1>主页&#xff1a;&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;Linux——文件系统 ☂️<3>开发环境&#xff1a;Centos7 &#x1f4ac;<4>前言&#xff1a;是不是只有C/C有文件操作呢&#xff1f;python&#xff0c;java&…

长尾关键词挖掘软件-免费的百度搜索关键词挖掘

嗨&#xff0c;大家好&#xff01;今天&#xff0c;我想和大家聊一聊长尾关键词挖掘工具。作为一个在网络世界里摸爬滚打多年的人&#xff0c;我对这个话题有着一些个人的感悟和见解&#xff0c;希望能与大家分享。 首先&#xff0c;让我坦白一点&#xff0c;长尾关键词挖掘工具…

《计算机视觉中的多视图几何》笔记(3)

3 Projective Geometry and Transformations of 3D 这章主要讲的是3D的射影几何&#xff0c;与2D的射影几何差不多。主要区别是&#xff1a; 3D射影几何对偶的是点和平面&#xff0c;直线是自对偶的。3D空间中直线有4个自由度&#xff0c;这一现象并不是那么容易直接得出。一…

SBCS、DBCS、ASCII、MBCS(ANSI)、Unicode

1.三种编码方式和三种字符类型。 第一种编码方式是单字节字符集&#xff0c;称之为 SBCS&#xff0c;它的所有字符可用一个字节存储。ASCII 码就是SBCS。SBCS字符串由一个零字节结尾。第二种编码方式是多字节字符集&#xff0c;称之为 MBCS&#xff0c;它包含的字符中有单字节…

实现注册手机号用户

1、使用Post异步发送请求&#xff08;发送短信&#xff09;&#xff0c;离焦事件触发时判断 <script src"layer/layer.js"></script><!--离焦事件--><script type"text/javascript" th:inline"javascript">$("#use…