首页 Flutter正文

Flutter widgets 库解析

yuange Flutter 2019-07-18 804 0 Flutter

Flutter 框架是分层设计的 Material Design blog.chengyunfeng.com/design 设计规范开发的 Widget 库。这里的代码都位于 lib/src/material 目录下,里面包含了几乎所有 纸墨设计 规范里面定义的控件。比如 FloatingActionButton、BottomSheet 等。

而 Material 层控件是建立在下面的 Widgets 层, Widgets 层定义了 Flutter 框架的基础 UI 控件,比如 Text、Padding、ListView 、ImageView 以及事件处理 等。

Material 和 Widgets 都称之为 UI 控件层。 Flutter 中的 控件(Widgets) 只是用来描述 UI 的,并不直接负责在画布上绘制 UI。比如,Android 的 View 有个 onDraw 函数负责在画布上绘制 UI 内容。而 Flutter 中的 Widgets 只是定义 UI 的数据(比如背景颜色、字体大小等),而绘制是有下面的 Rendering 层来实现的。

在 Flutter 中,上面的每一层都是可以替代的,比如,默认情况下,Flutter 控件是按照 纸墨设计 风格样式实现的,如果你们团队非要做一个 iOS 风格样式的跨平台应用(Android 应用和 iOS 应用都使用 iOS 风格 UI),则你可以不用 Material 层控件,自己在 Widgets 层之上,可以从新构建一个符合 iOS 风格的控件库,然后应用开发的时候使用自定义的控件库即可。

对于大部分使用 Flutter 的开发者来说,都是需要使用 Material 库的,而 大部分的 UI 控件也都是定义的 Material 库中的,所以我们在开发应用的时候,主要还是使用 Material 库中的 Widget 实现各种 UI,毕竟自己开发一个控件库工作量还是很大的。

所以在学习 Flutter 的时候,很大一部分都是在学习如何使用每个 Widget 来定义 UI。 在后面会逐步介绍一些常用的 Widgets, 下面先介绍下 Widget 的基本分类。

Widget 基类

所有的控件都是继承至 Widget 这个类,Widget 下面又有三个重要的直接基类:

在 Flutter 中,Widget 都是不可变的用来描述一部分 UI 的。对于那些没有状态的 Widget,比如 Text,文本内容以及显示文字的样式,在定义的时候写好就不再发生变化了,则被称之为无状态的 Widget (StatelessWidget), 对于内容会发生变化的 Widget 则被称之为有状态的 Widget (StatefulWidget),而由于 Widget 是不可变的,则可变的状态被保存在一个 State 对象中。 而 RenderObjectWidget 是直接渲染 UI 的对象,我们一般不直接使用这个类。所以在大部分 Flutter 开发中,主要使用各种 有状态的 Widgets 和 无状态的 Widgets。

Navigator 页面导航

对于多个页面导航的应用,需要使用 Navigator 来管理页面之前的导航。 而 Navigator 本身也是一个 StatefulWidget。 在后面会介绍 Navigator 的使用。

总体来说, Flutter 应用是以 Widgets 为中心的。每个应用都会使用 各种 Widgets 来描述 UI, 所以后续会分别介绍各种 UI 控件。




评论

在线客服-可直接交谈

您好!有什么需要可以为您服务吗?