妥善处理Flutter的404 Not Found 未找到错误

栏目: IT技术 · 发布时间: 4年前

内容简介:Flutter已经支持了Web端, 我们可以使用其创建动态网站了. Flutter能够处理来自Web的错误, 比如404未找到. 但是如何为Flutter应用创建自定义的404页面呢?本文将介绍如何创建自定义页面, 用于用户在试图搜索不存在的页面时给用户友好提示.每个人在上网冲浪时都遇到过”404 Not Found”、”页面不存在”等等. Flutter通过自动将你重定向至初始路由来解决此问题(通常是APP首页). 观赏下一些大厂好看的404页面:

Flutter已经支持了Web端, 我们可以使用其创建动态网站了. Flutter能够处理来自Web的错误, 比如404未找到. 但是如何为Flutter应用创建自定义的404页面呢?

本文将介绍如何创建自定义页面, 用于用户在试图搜索不存在的页面时给用户友好提示.

在Flutter中将客户端重定向至自定义404页面

每个人在上网冲浪时都遇到过”404 Not Found”、”页面不存在”等等. Flutter通过自动将你重定向至初始路由来解决此问题(通常是APP首页). 观赏下一些大厂好看的404页面:

妥善处理Flutter的404 Not Found 未找到错误
AirBnb(爱彼迎) 的404页面
妥善处理Flutter的404 Not Found 未找到错误
Github 的 404页面
妥善处理Flutter的404 Not Found 未找到错误
Flutter 的 404页面

如果你想拥有一个类似上方精美的404页面该怎么办? Flutter可以轻松做到这一点.

想创建自定义404错误页面, 你的APP需要使用 MaterialApp , CupertinoAppWidgetsApp 小部件. 大多数APP也是使用它们三个之一. 它是创建Flutter APP时调用的第一个小部件.

MaterialApp通过以下顺序搜索路径来配置顶级导航器:

  1. 对于 / 路由, 使用 home 属性(如果不是null).
  2. 否则, 若 routes 包含该路由, 则通过其处理.
  3. 否则将会调用 onGenerateRoute (如果提供). 对于任何未被 homeroutes 处理的有效路由, 它应返回非null值.
  4. 最后, 若上述均未处理路由, 则会调用 onUnknownRoute .

如果上述的方法均未处理路由, 将使用 onUnknownRoute 来处理. 此函数通常用于异常处理. 比如此函数总是生成一个”404″页面, 该页面描述了未找到的路由. 不存在的404路由可能是APP的bug生成, 也有可能来自外部请求.

下面将演示如何为 onUnknownRoute 属性定义匿名函数, 该函数使用了一个 RouteFactory 函数. 它是一个工厂函数, 该函数传入一个 RouteSettings 函数类型并返回一个 Route . 以下代码块将会展示定义 onUnknownRoute 属性有多简单:

onUnknownRoute: (settings) {
  return MaterialPageRoute(builder: (_) => PageNotFound());
},

PageNotFound() 是一个窗口Widget, 也就是404页面. 用于解释发生了什么, 并提供重定向至首页的入口. 你可以自由发挥自己的创造力来创建该小部件!

结语

开发Flutter APP时, 异常处理相当重要. 使用 MaterialApp , CupertinoAppWidgetApponUnknownRoute 属性可以轻松处理网站中无法避免的404错误.

感谢

本篇文章翻译自 Jose AlbaHandling 404: Page not found error in Flutter


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JavaScript经典实例

JavaScript经典实例

Shelley Powers / 李强 / 中国电力出版社 / 2012-3 / 78.00元

《JavaScript经典实例》各节中的完整代码解决了常见的编程问题,并且给出了在任何浏览器中构建Web应用程序的技术。只需要将这些代码示例复制并粘贴到你自己的项目中就行了,可以快速完成工作,并且在此过程中学习JavaScript的很多知识。你还将学习如何利用ECMAScript5和HTML5中的最新功能,包括新的跨域挂件通信技术、HTML5的video和audio元素,以及绘制画布。《JavaS......一起来看看 《JavaScript经典实例》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换