山东省建设安全监督站的网站,适合做浏览器主页的网站,wordpress图片替换不掉,网站建设saas架构之商城main入口 前言一、项目模块的划分二、入口main的配置三、配置文件怎么做总结 前言
本栏目我们将完成一个商城项目的架构搭建#xff0c;并完善中间的所有功能#xff0c;总页面大概200个#xff0c;如果你能看完整个栏目#xff0c;你肯定能独立完成flutter 项目… 架构之商城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.5flutter_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 ListGetPage 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.lazyPutHomeController(() 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 文件就这么写觉得没错说不定你的管理还给你加个鸡腿呢。
