矿小助基础配置|利用代码补全|Flutter

如果将App比作一座建筑&＃xff0c;那么基础配置就是地基。自定义一些统一高效的配置在各处进行复用&＃xff0c;可以起到事半功倍的效果。

文章接上回 0 前言 | 从零开始写App | Flutter

基础配置 ConfigInfo

统一的设计离不开统一的基础配置

字体大小 fontSize

double fontSizeTitle50; //headline1
double fontSizeTitle45; //headline2
double fontSizeMain40; //body1
double fontSizeMini38; //body2
double fontSizeTip33; //subtitle1
double fontSizeTipMini25; //subtitle2


不难看出&＃xff0c;所有的字体变量都以fontSize开头。这样做是为了更高效的使用IDE自带的代码补全功能&＃xff0c;只需要键入fontSize&＃xff0c;IDE就会将这些变量展示到面前。

边距 spaceCard

double spaceCardMarginTB;//上下外边距
double spaceCardPaddingTB;//上下内边距
double spaceCardMarginRL;//左右外边距
double spaceCardPaddingRL;//左右内边距


色彩 color

//单色
Color colorMain; //主题色
Color colorSecond; //主题副色
Color colorMainText; //字体主色
Color colorMainTextWhite; //白字
Color colorScaffoldBackground;//脚手架背景色
Color colorPageBackground;//页面背景色
Color colorLoginPageMain; //登录页主题色
//多色
List colorCourseCard; //课表卡片色彩列表
List colorFuncButton; //多种功能按钮的背景色
List colorExamCard; //考试倒计时进度条色彩


圆角值 border

double borderRadiusValue; //卡片的圆角值


容器阴影 shadow

BoxShadow shadowBoxMain; //容器阴影


基础像素 device

double deviceWidth;
double deviceHeight;


设置这两个值是为了适配各种分辨率的设备

初始化

void initConfigInfo(){//以1080*1920为基准适配屏幕deviceWidth &＃61; 1080;deviceHeight &＃61; 1920;//色彩初始化colorMain &＃61; Color(0xff00c5a8);colorSecond &＃61; Color(0xFF33CC99).withAlpha(255);colorMainText &＃61; Color.fromARGB(255, 0, 0, 0);colorMainTextWhite &＃61; Colors.white;colorScaffoldBackground &＃61; Color.fromARGB(255, 255,255,255);colorPageBackground &＃61; Color.fromARGB(255, 247,247,247);colorLoginPageMain &＃61; Color.fromARGB(255, 40,216,161);colorCourseCard &＃61; [Color.fromARGB(255, 102,204,153),Color(0xFF6699FF),Color.fromARGB(255, 255,153,153),Color.fromARGB(255, 166,145,248),Color.fromARGB(255, 62,188,202),Color.fromARGB(255, 255,153,102),Color(0xFF4ecccc),Color(0xFFff9bcb)];colorFuncButton &＃61; [Color.fromARGB(255, 88,188,216),Color.fromARGB(255, 238,121,192),Color.fromARGB(255, 125,123,227),Color.fromARGB(255, 93,169,248),Color.fromARGB(255, 90,138,234),Color.fromARGB(255, 82,172,98),Color.fromARGB(255, 229,105,72),];colorExamCard &＃61; [Colors.red,//红色Colors.deepOrangeAccent,//橙黄色Colors.blue,//蓝色Colors.green,//绿色Color.fromARGB(255, 191,188,183),//灰色];//圆角值borderRadiusValue &＃61; 10;//阴影shadowBoxMain &＃61; BoxShadow(blurRadius: 10,spreadRadius: 0.05,color: Colors.black12.withAlpha(10));//字体大小,使用ScreenUtil进行字体适配fontSizeTitle50 &＃61; ScreenUtil().setSp(50); //headline1fontSizeTitle45 &＃61; ScreenUtil().setSp(45); //headline2fontSizeMain40 &＃61; ScreenUtil().setSp(40); //body1fontSizeMini38 &＃61; ScreenUtil().setSp(37); //body2fontSizeTip33 &＃61; ScreenUtil().setSp(33); //subtitle1fontSizeTipMini25 &＃61; ScreenUtil().setSp(25); //subtitle2//边距等配置,使用ScreenUtil进行适配spaceCardMarginTB &＃61; ScreenUtil().setSp(25);//上下外边距spaceCardPaddingTB &＃61; ScreenUtil().setSp(25);//上下内边距spaceCardMarginRL &＃61; ScreenUtil().setWidth(30);//左右外边距spaceCardPaddingRL &＃61; ScreenUtil().setWidth(50);//左右内边距
}


持久化存储 Prefs

我们当然不愿意用户在每次重启之后一些配置丢失&＃xff0c;因此将数据持久化存储以备下次使用是必须的。

考虑到矿小助的数据量不会很大&＃xff0c;因此使用了适合单进程、小批量的数据存储与访问的SharePreference组件。

基础使用

SharePreference的使用非常简单&＃xff0c;首先创建实例&＃xff1a;

//创建实例
SharedPreferences prefs &＃61; await SharedPreferences.getInstance();


创建实例之后就可以直接使用了&＃xff0c;支持的类型有String、int、double、bool等。

由于绝大多数数据类型(Object)都能通过jsonEncode()方法来转换为JSON String &＃xff0c;因此矿小助存储最多的类型也是String。

//存储&＃39;ccatom&＃39;&＃xff0c;其key为&＃39;name&＃39;
prefs.setString(&＃39;name&＃39;, &＃39;ccatom&＃39;);
//使用getString获取存储的值
var username &＃61; prefs.getString(&＃39;name&＃39;);


但是每次还需要创建一个实例&＃xff0c;显得特别麻烦&＃xff0c;因此我们封装一下。

封装为Prefs

class Prefs{//实例static SharedPreferences prefs;//keystatic String _username &＃61; &＃39;username&＃39;;//用户名//get方法,用于获取valuestatic String get username &＃61;> prefs.getString(_username);//set方法,用于设置valuestatic set username(String value) &＃61;>prefs.setString(_username, value);//初始化实例&＃xff0c;App启动时需要执行一次static Future init()async{prefs &＃61; await SharedPreferences.getInstance();}}


这里简化了很多数据&＃xff0c;实际项目中这个类很长

封装后&＃xff0c;我们在获取信息时就会变得非常容易

Prefs.username &＃61; &＃39;ccatom&＃39;; //存储&＃xff0c;自动调用set方法
var a &＃61; Prefs.username; //获取&＃xff0c;自动调用get方法


在这里我们同样充分利用了IDE的补全功能&＃xff0c;输入Prefs.即可看到所有的key变量。

路由管理 toXxxPage

为了在开发中充分利用代码补全&＃xff0c;我使用了一种很笨但是十分高效的方式进行路由管理。

就是在每个页面类的前面加一个独立的函数toXxxPage()

//用于路由跳转的函数
void toXxxPage(BuildContext context) {Navigator.push(context, CupertinoPageRoute(builder: (context) &＃61;> XxxPage()));
}
//页面类
class XxxPage extends StatefulWidget {&＃64;override_XxxPageState createState() &＃61;> _XxxPageState();
}class _XxxPageState extends State {&＃64;overrideWidget build(BuildContext context) {return Container();}
}

页面跳转时&＃xff0c;只需要在IDE中输入to&＃xff0c;IDE就会很聪明的把所有页面的路由跳转函数展示出来&＃xff0c;以供选择。

这只是我个人耍的一点“小聪明”&＃xff0c;如果有更好的方法&＃xff0c;欢迎在评论区中提出&＃xff01;

推荐关注矿小助项目总结专栏