20.3.30 一
initState里面不能使用ModalRoute.of()
- 官方说了不能使用
还没有准备好InheritedWidget
还没有放到映射里面
Timer.run()不会阻塞线程
加入到事件队列
代码的执行顺序问题
执行好了以后才能拿到
三四天的时间来做一个小项目练习
收藏状态管理
路由跳转
左侧弹出菜单
三个目标
- 对前面所学的东西进行练习, 屏幕适配
- 麻雀虽小五脏俱全, 对项目目录结构, 组件化思想划分, 可扩展性, 可维护性
- 其他相关的东西, 移动端, web测试版本, 图标设置, 启动图设置, 各种细节
先来讲解两个知识点
Flutter主题风格
一. Theme主题的使用
Theme氛围: 全局Theme, 局部Theme
MaterialApp中的
title: "Flutter Demo"
在哪里使用? => 查文档
安卓中使用的
On iOS this value cannot be used.
一旦设置了主题, 那么应用程序中的某些Widget, 就会直接使用主题的样式
1.1 亮度, 枚举类型 dark
brightness
根据系统是否是暗黑模式, 写出两套样式primarySwatch传入的不是Color, 而是MaterialColor
(包含了primaryColor和accentColor)
primarySwatch
可以设置很多东西的颜色. 官方没有总结
自己总结, StackOverFlow中, 官方人员Issue
靠经验
开关跟iOS的样式不一样
CupertinoSwitch
iOS中显示的就是绿色
activeColor
MaterialColor
父类的引用指向一个子类的对象
颜色划分为不同的等级
重写了一个操作符
Color operator [](T index) => _swatch[index];
primaryColor: 单独设置导航和TabBar的颜色
accentColor: 单独设置FloatingActionButton/Switch
某些Widget主题, Button的主题
buttonTheme: ButtonThemeData(
height: 25,
minWidth: 10,
buttonColor: Colors.yellow
)Card的主题
cardTheme: CardTheme(
color: Colors.green,
elevation: 10, //统一设置阴影
)Text的主题
默认字体大小
textTheme: TextTheme(
body1: TextStyle(fontSize: 16),
body2: TextStyle(fontSize: 20),
)
Display4
Display3
可以通过Theme.of(context).textTheme
实际开发中方便管理
文档
Cookbook
Widgets Catalog
API查类
页面跳转, 继承过来了主题设置
body1 设置了红色
好几个颜色都发生了变化
不管包裹了几层, 都生效
局部主题将全局主题覆盖
一般情况下不创建新的data, 所有的东西先拷贝过来, 设置了后会覆盖
data: Theme.of(context).copyWith(
primaryColor: Colors.purple
)
floatingActionButton单独包裹一个Theme
也是改不掉
= > 查资料 flutterchina.club
最早的时候官方文档是有错误的
为什么改不掉?
Don't know why this is but accept that it is :)
暗黑模式的适配
Flutter开发如何适配暗黑模式?
最简单的适配
theme: ThemeData(
primarySwatch: Colors.yellow,
textTheme: TextTheme(
boyd1: TextStyle(fontSize: 20, color: Colors.red)
)
)
darkTheme: ThemeData(
primarySwatch: Colors.grey,
textTheme: TextTheme(
boyd1: TextStyle(fontSize: 20, color: Colors.blue)
)
)
直接写两套
开发中封装, 抽取, 搞一个文件夹
JHAppTheme
字体大小抽成常量
static const double smallFontSize = 16;
static const double normalFontSize = 20;
static const double largeFontSize = 24;
屏幕适配
一个适配方案
封装一个工具类
Flutter中的单位
iphone6 dpr * 2
MyApp的build方法中拿到屏幕宽高
//1. 手机的无力分辨率
window.physicalSize.width;
//2. 手机屏幕的大小(逻辑分辨率)
final width = MediaQuery.of(context).size.width;
直接报错, 为什么?
context还没有初始化
JHHomePage中就可以拿到
MaterialApp还没有初始化完成
of方法里面是怎么拿的
怎么启动Debug? 点击小虫子
就是想在报错的地方拿到宽高
如何操作?
//2. 获取dpr, 直接通过window拿
final dpr = window.devicePixelRatio;
//3. 宽度和高度
final width = physicalWidth / dpr;
final height = physicalHeight / dpr;
//4. 状态栏高度
final statusHeight = window.padding.top / dpr;
抽取封装, shared文件夹
size_fit.dart
static静态好处是, 不需要创建实例
适配方案
前端里面的屏幕适配经验
rem:
给根标签(HTML标签)设置一个字体的大小
但是不同的屏幕要动态设置不同的字体大小
其他所有的单位都是用rem单位
html font-size: 20 div font-size: ->vw、wh
将屏幕分成100等份, 一个1vw相当于是1%的大小;
其他所有的单位都是用vw或wh单位rpx
rpx是小程序中的适配方案, 它将750px作为设计稿, 1rpx = 屏幕宽度/750
其它所有的单位都是用rpx单位
小程序以iphone6作为标准 750
原理?
不管是什么屏幕, 统一分成750份
在iPhone5上：1rpx = 320/750 = 0.4266 ≈ 0.42px
在iPhone6上：1rpx = 375/750 = 0.5px
在iPhone6plus上：1rpx = 414/750 = 0.552px
小程序中所有的单位都要写成2倍
封装的通用点
setRpx(400)、setPx(200)
想要封装的扩展性更高, 以6+为设计稿
传一个标准的尺寸
standardSize()
第三方库: flutter_screenutil