flutter覆盖,flutter widget复用

vscode flutter 环境搭建

环境准备阶段：

创新互联是一家专注于成都网站设计、成都网站建设与策划设计,镇江网站建设哪家好?创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:镇江等地区。镇江做网站价格咨询:18982081108

android-studio 版本：android-studio-ide-191.5977832-windows.exe 3.5.2

flutter版本：stable 版本 （完成系统环境变量 path配置）

dart版本：2.12.0 （完成系统环境变量 path配置）

完成相关软件安装。

配置flutter相关SDK及andriod studio路径：

flutter config --android-sdk="C:\Users\Administrator\AppData\Local\Android\Sdk"

flutter config --android-studio-dir="D:\Program Files\Android\Android Studio"

执行flutter doctor运行成功。

夜神模拟器地址：D:\Program Files\Nox\bin （完成系统环境变量 path配置）

andriod SDK tools：C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools （完成系统环境变量 path配置）

nox_adb.exe connect 127.0.0.1:62001

dart SDK:D:\software\dartsdk-windows-x64-release\dart-sdk\bin

将C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools 下面adb.exe 复制至D:\Program Files\Nox\bin覆盖

adb.exe，此外重新复制adb.exe命名为nox_adb.exe，替换原有的nox_adb.exe。

cdm 输入nox_adb version 及adb version发现版本一致。

启动野神模拟器，输入adb devices发现虚拟设备，执行flutter devices发现 127.0.0.1:62001 设备。

修改C:\learn_flutter\first_flutter\android\gradle\wrapper\gradle-wrapper.properties

distributionUrl=

修改C:\learn_flutter\first_flutter\android\build.gradle

buildscript {

ext.kotlin_version = '1.3.50'

repositories {

// google()

// jcenter()

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

}

allprojects {

repositories {

// google()

// jcenter()

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

}

修改：C:\win-flutter\flutter\packages\flutter_tools\gradle\flutter.gradle

buildscript {

repositories {

// google()

// jcenter()

maven { url ' ' }

maven { url ' ' }

maven { url ' ' }

}

dependencies {

classpath 'com.android.tools.build:gradle:4.1.0'

}

}

//private static final String DEFAULT_MAVEN_HOST = " ";

private static final String DEFAULT_MAVEN_HOST = " ";

修改：C:\win-flutter\flutter\packages\flutter_tools\gradle\resolve_dependencies.gradle

repositories {

google()

jcenter()

maven {

//url "$storageUrl/download.flutter.io"

url " "

}

}

执行 flutter run启动成功。

环境搭建坑点在于JDK兼容问题以及网络问题。

Flutter 之 文件操作（二十九）

Dart的 IO 库包含了文件读写的相关类，它属于 Dart 语法标准的一部分，所以通过 Dart IO 库，无论是 Dart VM 下的脚本还是 Flutter，都是通过 Dart IO 库来操作文件的，不过和 Dart VM 相比，Flutter 有一个重要差异是文件系统路径不同，这是因为Dart VM 是运行在 PC 或服务器操作系统下，而 Flutter 是运行在移动操作系统中，他们的文件系统会有一些差异。

Android 和 iOS 的应用存储目录不同， PathProvider 插件提供了一种平台透明的方式来访问设备文件系统上的常用位置。该类当前支持访问两个文件系统位置：

File代表一个整体的文件,他有三个构造函数，分别是：

文件读取本身有两种形式，一种是文本，一种是二进制。

2.2.1 读取文本内容

如果是文本文件，File提供了readAsString、readAsLines、readAsStringSync、readAsLinesSync方法，读取文本内容

readAsString 一次性读取所有文本

readAsLines 一行行的读取文本

结果返回的是一个List，list中表示文件每行的内容

readAsStringSync、readAsLinesSync同步读取文本

2.2.2 读取二进制内容

如果文件是二进制，那么可以使用readAsBytes或者同步的方法readAsBytesSync:

dart中表示二进制有一个专门的类型叫做Uint8List,他实际上表示的是一个int的List。

上面提到的读取方式，都是一次性读取整个文件，缺点就是如果文件太大的话，可能造成内存空间的压力。

所以File为我们提供了另外一种读取文件的方法，流的形式来读取文件.

示例

dart提供了open和openSync两个方法来进行随机文件读写：

写入和文件读取一样，可以一次性写入或者获得一个写入句柄，然后再写入。

一次性写入的方法有四种，分别对应字符串和二进制

句柄形式可以调用openWrite方法，返回一个IOSink对象，然后通过这个对象进行写入：

默认情况下写入是会覆盖整个文件的，但是可以通过下面的方式来更改写入模式：

虽然dart中所有的异常都是运行时异常，但是和java一样，要想手动处理文件读写中的异常，则可以使用try,catch:

我们还是以计数器为例，实现在应用退出重启后可以恢复点击次数。 这里，我们使用文件来保存数据：

1.引入PathProvider插件；在pubspec.yaml文件中添加如下声明：

执行 flutter pub get

2.实现如下

参考：

Flutter 开发笔记

下面这种情况下，为 InkWell 设置的 splashColor 不会生效：

需要用 Material 去除背景色，然后将颜色设置在 InkWell 外部：

在 Dialog builder 中使用 WillPopScope 禁用返回键返回：

注意：使用此方法同时也会禁用 iOS 上的手势滑动返回功能，推荐判断平台后再使用。

修改对话框中的复选框状态，最简便的方法是通过 Element 中的 markNeedsBuild 方法：

当然，更推荐的做法是通过 StatefulBuilder ，然后就可以在 Dialog 中调用 setState 方法了，不过在调用 setState 时需要判断 Dialog 是否已经关闭，否则会造成 setState() called after dispose() 的错误，可以通过添加一个标志位来解决，如下：

在 Web 中加载网络图片有时会失败，遇到这样的报错： Exception caught by image resource service... ，造成该错误的原因通常是，图片跨域了（见 跨域资源共享 ）。最简单的解决办法是， 使用 HTML 渲染加载 ，而不是默认的 CanvasKit。

Flutter 中所有的 list 默认都是没有 ScrollBar 的，必须使用 ScrollBar 组件。ScrollBar 组件通过监听 ScrollView 的 ScrollNotification 来刷新位置，所以 List 的长度必须是固定的。

当使用 WebView 等高度不定的组件时会出现内容被截断的情况，通常可以使用 NestedScrollView 来解决该问题，需要在 WebView 外部嵌套 SingleChildScrollView。

虽然使用了缓存，而且也是用 builder 加载图片的，但是发现一个现象：滑动屏幕后图片短暂消失并重新加载了。图片高度很高时这种现象更加明显，其原因是超出屏幕范围一定距离的组件被重新渲染了。解决方法是在 ListView 上设置 cacheExtent 参数:

该参数的作用是改变超出屏幕高度后继续渲染的范围（以像素为单位），比如设置成 9999 后意味着超出屏幕 10000 像素以内的内容都会被保留下来。

借助 IntrinsicHeight 组件：

另外，IntrinsicHeight 还可以用于 Dialog 或者 BottomSheet 中，使得其中的元素 显示内在元素的高度 ，从而避免元素因为约束的存在而不显示或者高度太高（比如在使用了 Column 或者 Row 的时候）。

在通过 Uri 的 queryParameters 获取 query 参数时，发现有些链接会抛出下面异常：

造成该异常的原因是 Uri 默认使用 utf-8 解码超链接字符串，如果链接中包含非 utf-8 字符，就会造成上面的错误，相关 issue 见： issue #31621 。目前该 issue 处于 open 的状态，暂时的解决办法是，在所有使用到 queryParameter 的地方用 try..catch 捕捉可能抛出的异常。

Flutter 开发非常依赖各种官方或第三方的插件，而在使用这些插件时多少都会遇到一些问题，大部分问题都可以通过搜索和查找 issue 来解决。这里记录下一些我在使用部分插件时遇到的问题及其解决方法。

目前该库没有图片加载完成的回调（见 issue #545 ），不过我们可以通过在 imageBuilder 中来添加回调：

这是一个应用内更新插件，安卓 10 以上安装时需要在 manifest 中添加以下内容：

目前功能最强大的 WebView 插件，基本能满足绝大部分移动端网页加载的需求，而且可定制化程度高。

一般通过 CookieManager 修改 Cookie，拦截请求并修改请求对象的 Header 不会生效。

InAppWebViewOptions 的 userAgent 只在 iOS 上生效，而 applicationNameForUserAgent 只在 Android 上生效，所以最好的做法是分平台设置 InAppWebViewOptions ，而且需要注意，由于设置 userAgent 后会覆盖默认的 UserAgent，所以如果需要在默认的 UserAgent 上添加其它参数，iOS 上需要通过 InAppWebViewController.getDefaultUserAgent() 获取默认 UserAgent 参数，而 Android 不需要添加。

如果图片源或者请求是 http 的，为了在 Android 上正常加载请求，必须在 AndroidInAppWebViewOptions 中将 mixedContentMode 设置为 AndroidMixedContentMode.MIXED_CONTENT_ALWAYS_ALLOW 。

当我们想要设置全屏图片的时候，由于默认的 Constraint 会将图片居中显示，所以图片四周会留有空隙。为了去除这个限制，我们需要 Xcode 中打开 LaunchScreen.storyboard，然后在 View Controller 的 View 和 LaunchImage 上的 Safe Area 去掉。

具体设置方法：右侧 Inspector 面板 Show the Size inspector 解选 Layout Margins 中的 Safe Area Relative Margins，拖动图片占满全屏，然后根据 View Controller Scene 的 Warning，更新 Constraint 就可以了。

在集成某些三方库之后，在使用命令行运行 iOS 模拟器的时候可能会遇到下面这个报错：

这是因为 iOS 模拟器未来将会兼容 arm64 架构，但是目前还不支持，所以我们需要修改 Build Setting 使得能够在 x86_64 的模拟器上运行，操作步骤见 这里 。

Flutter 基础布局 Stack 使用

Stack 组件是一种层叠式布局，即组件覆盖另一个组件，覆盖的顺序取决于在children中放置的顺序，使用场景比如在图片上加上一些文字描述，即将文本Widget覆盖在图片组件，详见下面的小例。

Flutter自定义绘制组件

Flutter中自定义组件一般有两种方式：

CustomPaint继承自SingleChildRenderObjectWidget，即它可以在通过嵌套引入到widget树中，并且可以有一个child子widget。它的构造方法如下：

painter和foregroundPainter需要接收CustomPainter对象，是CustomPaint核心。CustomPainter是进行UI绘制的核心类，绘制时, CustomPaint 首先在画布上调用 painter绘制 , 然后再绘制它的 child Widget, child 绘制完成后再调用 foregroundPainter 进行绘制。

size属性标识绘制区域大小，但当CustomPaint有child，该属性将会忽略，而使用child的大小为绘制区域大小。

isComplex和willChange用于控制绘制层缓存处理的，这里暂不讨论。

可实现CustomPainter子类进行UI绘制

实现paint方法进行真正的绘制，canvas是画布对象，size是绘制区域，是从CustomPaint中size属性传递得到的。绘制过程与Android原生开发十分类似，连API都十分相像，这点对熟悉Android原生开发者真是太友好了。

Paint对象是画笔对象，就是绘图工具，我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格等，通过这些属性我们可以很方便的来定制自己的UI效果，在绘制的过程中可以定义多个画笔，以便实现多种风格图形的集合。

根据需求选择合适的画笔属性，完成你的绘制。

Canvas是绘制的画布，它包含了很多绘制方法，可以绘制出各种形状的图形。需要注意的是，画布是应用所有控件都在使用的, 所以通过这个画布其实是可以绘制充满屏幕的内容的，每次绘制都应该限制在本控件的区域(Size)内, 以免绘制覆盖到其他组件。

下面介绍下Canvas的绘制方法：

PointMode是个枚举

p1、p2为线段两个端点

Rect定义矩形的大小位置，有多种构造方式:

RRect描述圆角矩形，他通过Rect和Radius来构造

画圆比较简单，c表示圆心位置，radius是半径。

椭圆使用外接矩形确定大小位置，rect就是外接矩形。

绘制弧形，先确定弧形对应的椭圆，同样地用外接矩形rect确定椭圆，然后根据起始点和结束点角度来确定那一段弧度，startAngle，sweepAngle分别代表起始和结束点角度，角度用弧度表示法。

useCenter表示是否连接闭合形状，userCenter = false表示不闭合，即画一段弧线，userCenter = true表示闭合，即绘制一个扇形。

绘制路径，关键在于构建路径Path，可以直接new Path对象，然后通过path方法可以连接出图形，path关键方法如下：

还有其他方法，有兴趣可以查看API。

Flutter基础篇——常用Widget

对于初学flutter的朋友来说，要知道，flutter的UI万物皆Widget。

flutter所写的页面的结构可以被看成套娃，一层套一层，一层套一层，一层套一层。。。。。。

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。

Text ： 该 widget 可让创建一个带格式的文本。

Row 、 Column ： 这些具有弹性空间的布局类Widget可让您在水平（ Row ）和垂直（ Column ）方向上创建灵活的布局。

Stack ：取代线性布局 (和Android中的LinearLayout相似)，Stack允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于 Stack 的上下左右四条边的位置。

Container ： Container 可让您创建矩形视觉元素。 您可以为 Container 装饰一个 BoxDecoration , 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container 可以使用矩阵在三维空间中对其进行变换。

具体的演示见我另外的博客

有一部分Widget都有一个 child 属性，用于容纳唯一的子Widget。

例如：Container、Center、Padding、Align等Widget。

还有一部分Widget允许存在多个子Widget，用 children 作为属性。

例如：Row、Column、Stack等Widget。

在StatefulWidget调用createState之后，框架将新的状态插入树种，然后调用状态对象的initState。子类化State可以重写initState，以完成仅需要一次执行的工作。当然在initState的实现中需要调用super.initState

当一个状态对象不再需要时，框架调用状态对象的dispose。也可以通过覆盖dispose方法来执行清理工作。

OVER~