flutter后台开发,flutter开发web前端

Flutter开发--如何布局？

相对于iOS开发，Flutter的布局更具有灵活性，每个页面设计都不一样，相同页面可选择的布局方式也不一样，如果单纯的说应该如何去布局，我觉得不现实，大家可以参考下 Flutter官方的布局教程 。接下来，笔者，通过项目中的一个页面，来一步一步的拆解布局的流程。整个过程，基本上按照拆解、组件封装、具体布局这三步来的。

根据设计图，可以看出整体可以分成两部分，上面一部分是系统介绍模块，下面一部分是真正的登录内容，因为涉及到叠加，因此考虑用Stack；

系统介绍模块部分：整体也是涉及到叠加，考虑用Stack，分为四部分。最底部渐变色背景用一个contanier，无须指定位置，全视图扩展；载放logo图标在上一层，用Image。最后两个Text同级放在最上层。Image，Text各用Positioned包裹去指定位置。

登录内容模块是最外层是一个Contanier容器，去控制背景色和圆角。然后是一个Column元素，逐行排列。

第一行为Image，

第二行为Text，

第三行可以看成一个小Column，分两块进行布局

第四行可以看成一个小Column，分两块进行布局

第五行可以看作一个TextButton，

第六行可以看作一个Row，分三块进行布局

通过上面这样一步一步的分析后，基本上对大致的布局有了一个了解，最外层的控件大致选对（只要能实现的话，就是复杂度以及效率的问题），然后一步一步的拆解每一行的元素，如果有重复的或者觉得可以封装出来的部分，则进行下一步。

每一行的拆解，大致也是按照这个思路来进行，因此笔者在这里就不做讲解了。

在做到第三第四行的时候，发现这两个很相似，而且设计到一些交互逻辑，笔者就想对第三第四行的这种展示进行封装，觉得今后的布局可能会用到，因此在这一步，可以先把这一块儿抽离出一个控件。利用TextField来实现这种输入操作，具体的实现笔者不再详细的描述了。

经过这一步，整体的规划设计图已经有了，各个组件也都有了，接下来的工作就是组装了。

具体布局设计到一些细节的地方，例如整体Column的居中对齐（crossAxisAlignment）、间隔（Padding或Container包裹，笔者更喜欢用SizedBox占位）、居左居右居中（Align）、点击事件（GestureDetector）以及圆角（BorderRadius）等一些特殊情况。

像第六行row是放在底部的，就可以在第六行前面增加一个Spacer()去填充空白区域。

对文字颜色大小等，可以用TextStyle直接设置。

对于输入框的删除按钮，可以用Offstage这种Flutter特有的控制显示隐藏的控件。

相关问答

Q1: 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 的模拟器上运行，操作步骤见 这里 。

Q2: Flutter开发--Pub包管理

在原生开发中， Android 使用 Gradle 来管理依赖， iOS 用 Cocoapods 来管理依赖，Node 中通过 npm来管理依赖。 Flutter 使用配置文件 pubspec.yaml （位于项目根目录）来管理第三方依赖包。

Pub 是Google官方的Dart Packages仓库，类似于node中的npm仓库，android中的jcenter，我们可以在上面查找我们需要的包和插件，也可以向pub发布我们的包和插件。

Pub工具 包含管理Package、部署Package和部署命令行应用的命令。

如果使用的是Flutter SDK，不要直接使用pub命令。而是使用flutter pub命令，如下：

命令pub get/upgrade/outdated 属于管理Package的依赖关系

用于检索当前 Package 所依赖的其它 Package。如果 pubspec.lock 文件已经存在，则根据该文件中保存的依赖项版本获取对应的依赖项。如有必要，将会创建或更新该文件。

更新 package 依赖

当你添加一个 package 后首次运行 flutter pub get， Flutter 将会保存在 pubspec.lock lockfile 中找到的具体 package 版本。这将确保当你或者团队中其他开发者运行 flutter pub get 后能得到相同版本的 package。

如果你想升级到 package 的最新版本，比如使用 package 的最新特性，请运行 flutter pub upgrade 。这将检索你在 pubspec.yaml 文件中指定的版本约束所允许的最高可用版本。

案例

在flutter项目中导入hive包，在pubspec.yaml文件中添加配置：

执行flutter pub get，可以在 pubspec.lock 中看到 hive 版本是2.1.0，这是因为目前hive的最新版本是2.1.0,配置“^”表示向最新版本兼容，具体可查看Package版本管理（ ），所以再执行flutter pub upgrade 可以看到版本还是2.1.0，这个时候会发现pub get和 pub upgrade 效果一样。

但是未来如果 hive 发布了2.2.0版本，这个时候使用flutter pub get在pubspec.lock中看到hive版本依旧是2.1.0，而执行flutter pub upgrade 后在pubspec.lock中看到hive版本就是2.2.0。

现在先在flutter 项目的pubspec.yaml文件添加配置，指定hive版本是2.0.5，如下：

这个时候执行flutter pub get后，可以在pubspec.lock的文件中看到hive版本是2.0.5，如果这个时候更改配置为 hive: ^2.0.5，再执行flutter pub get就会发现在pubspec.lock的文件中看到hive版本还是2.0.5，这个时候可以执行flutter pub outdated查看依赖的每个 package，如下图，

可以看到，Upgrable项hive版本号为2.1.0，执行flutter pub upgrade 后可以看到在pubspec.lock的文件中看到hive版本是2.1.0

在pubspec.yaml文件添加配置：

lxx_package_demo信息如下图：

执行flutter pub get后在pubspec.lock中看到flutter_log版本是0.0.1

现在修改lxx_package_demo版本号为0.0.2，再执行flutter pub get

会发现版本会及时更新为0.0.2，这个时候执行flutter pub get/upgrade效果一样

参考文档：