Flutter笔记三之Dart库文件的使用

一个 dart 文件就是一个库文件

每个 dart 文件默认导入了系统核心库 dart:core 其他库需手动导入：

import 'dart:系统库库名';

import 文件后可直接使用，默认导入一个库的所有变量和方法。

文件名后+ as +自定义名称,导入的库起的别名，同python

文件名后+ show +导入的变量或方法：只导入 show 后面的变量或方法

文件名后+ hide +隐藏的变量或方法：出 hide 后面的变量或方法，其他的变量和方法全部导入

export 公共的库文件的抽取

可以在pubdev网站中查找第三方库。

然后即可引用使用

如上图，最右边有**斑马线类似的线。

在这里查找源码

可以看到，Flutter在这里做的处理

_calculateOverflowRegions这个方法，计算界面是否超出边界，如果超出了

就添加一个斑马线的布局，可以通过修改源码的方式，暂时让他隐藏

直接return就可以了。

当然，Flutter这样是为了更好的提示开发者，方便开发的。平时调试的时候还是要打开的。除非上线，如果不放心的话，可以这么写。

1、界面搭建过程中各种大小单位

Android：通常采用dp设置View宽高（和px像素的换算关系是dp值 × density逻辑密度），sp设置字体大小（会随着系统字体设置的大小而改变）。

Flutter：没有具体的大小单位描述， 和尺寸相关的MediaQueryData类中较为重要的几个值如下：

（一）devicePixelRatio（设备像素比），对应Android中的density

（二）sizewidth和height，设备的逻辑像素宽高，并非绝对物理像素（例如iphone6的设备像素比是2，通过size获取到的逻辑像素宽高为375  ×  667，实际物理像素则为750 × 1334，即分辨率）

（三）textScaleFactor：单位逻辑像素字体像素数，默认为1，设置成15则字体变大50%，如果想让Text组件的字体大小不随系统设置的变化而变化，需将这个值设定成固定值1

UI适配解决方案：

1、采用ScreenUtil插件，初始化时候传入设计稿大小，当发现一屏显示的大小有差异时候采用插件提供的setWidth和setHeight来设置具体的宽高（会根据设计稿大小和实际设备逻辑像素宽高比进行缩放）。

2、TextButton、Text等按钮和文本组件，通过设置字体大小和内边距来控制整体的宽高，而非固定其宽高。

2、本地资源文件的引用方式

Android：通常存放在res/mipmap或res/drawable下，不同分辨率对应不同后缀名，如mipmap-hdpi、mipmap-xhdpi

Flutter：需在pubspecyaml中配置，如下图所示

如果只配置父级目录例如（assets/images/common_status）则无法再存放不同尺寸的。不同尺寸的需建立对应的20x、30x目录后存放，设备在读取时候会自行根据分辨率去找对应的，弊端是每有一张就需在pubspecyaml文件中声明这些

有时候我们不希望某个页面每次打开时都重新加载，比如就我们之前的Tabbar结构的页面，每当我们在切换Tab的时候都会执行 void initState() ，这就意味着页面每次都会重新渲染，之所以这样就是因为我们的 State 状态没有保存，如下图所示：

[没有状态保存效果图]

给当前 State 类添加一个扩展(这里就用扩展这个词吧，其实类似于iOS下的 Category )，一个系统的扩展类 AutomaticKeepAliveClientMixin ，并重写 wantKeepAlive 方法，让一个普通的 State 类，具有保存状态的能力。

在Dart语法中通过使用 with 关键字来添加扩展：

bool get wantKeepAlive => true; 之后，当前 State 就具备保存能力了，也就意味着重复切换Tab后， void initState() 就不会重复执行了（由原来的 viewWillAppear() 变成了 viewDidLoad() ）。

按照上面方式修改后，发现切换Tab后 void initState() 依然重复执行了，这是为什么呐？这里我们看下我们之前 root_pagedart 里面是如何配置我们的tabbar结构的：

这里我们是通过一个 _viewControllers 的List，把4个子页面放在了里面，全局有一个 _currentIndex ，当 onTap 回调后后，更新 _currentIndex 的值，执行 setState () 后， body 对应的 widget 页面发生改变。而问题也就出在这里，当 body 部分发生改变时，根据Flutter的底层渲染逻辑，这里会移除掉之前的 Widget ，并重新创建新的 Widget ，我们之前在 _viewControllers 放的子页面，并不像iOS下是一个实例对象，存在就直接拿来使用。在Flutter 中 setState () 后界面会被重新绘制，而 body 部分只知道我要渲染一个什么样的 widget ，而该类型的 widget 每次都是会重新创建，这也就意味着我们在Tab切换时，每次都是重新创建，所以每次都执行了 initState() 。

显然我们现在的方式是不合理的，那在Flutter中如何管理这样的子页面，而避免重复渲染呐？

这就要用到一个新的部件了： PageView() ,内部的2个关键属性：

子页面切换通过 _controllerjumpToPage(index); 来实现。

这样子页面也就不会重新创建渲染了，我们的状态保存也就能正常实现了。

学习是一个循序渐进的过程，我们总是在踩坑中不断的前行，把坑填平了也就意味着我们在这个新的东西面前立了足，就可能进行更多为什么的探索了。

以上就是关于Flutter笔记三之Dart库文件的使用全部的内容，包括:Flutter笔记三之Dart库文件的使用、Flutter解决界面超出bug、Android原生和Flutter使用过程的差异对比（一）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！