Flutter学习第一课-flutter 特点与核心概念

flutter 特点与核心概念

• 跨平台:现支持5种平台运行(macos、windows、linux、Android、ios),甚至能种谷歌最新操作系统(fuchsia)上运行;
• 丝滑般的体验:使用Flutter内置的Material Design和Cupertino风格组件、丰富的api、平滑的滑动效果,带来全新的体验;
• 响应式框架:使用Flutter的响应式框架和一系列基础组件,可以轻松构建用户界面,使用功能强大且灵活的API(针对2d、动画、手势、效果等)能解决艰难的ui挑验;
• 支持插件:通过Flutter的插件可以访问平台本地API,比如相机、蓝牙、Wi-Fi等.借助现有的java、Swift、Objective C、C++代码实现对原生系统的调用;
• 60fps超高性能:Flutter采用GPU渲染技术,性能极高,Flutter编写的应用程序可以达到60fps(每秒传输帧数),官方宣称用flutter开发的应用甚至会超过原生应用的性能;

Flutter 包括一个现代的响应式框架、一个2D渲染引擎、现成的组件和开发工具.这些组件可以帮组你快速的设计、构建、测试和调试应用程序

Flutter核心概念:组件、构建、状态、框架等

下面分别介绍:
1、一切皆为组件
组件(widget)是Flutter应用程序用户界面等基本构建快,不仅按钮、输入框、卡片、列表这些内容可以作为widget,甚至将布局方式、动画处理都是视为widget,所以Flutter具有一致的统一对象模型-widget.
widget可以定义为:

• 一个界面组件(如输入框或按钮)
• 一个文本样式(如字体或颜色)
• 一种布局(如填充或滚动)
• 一种动画处理(如缓动)
• 一种手势处理(GestureDetector)

widget具有丰富的属性及方法,属性通常用来改变组件的状态(颜色、大小等)及回调方法的处理(如点击事件回调,手势事件回调).方法主要提供一些组件的功能扩展.比如TextBox是一个矩形的文本组件,属性方法如下:

• bottom:底部间距属性
• top:顶部间距属性
• left:左侧间距属性
• right:右侧间距属性
• direction:文本排列方向属性
• toRect:导出矩形方法
• toString: 转换成字串方法

2、组件嵌套
复杂的功能界面通常都是由一个又一个简单功能组装完成的,有的组件复杂布局,有的负责定位,有的负责调整大小,有的负责渐变处理,等等,这种嵌套组合的方式最大的好处就是解耦.
例如.界面中添加了一个居中组件Center,居中组件里嵌套了一个容器组件Container,容器组件里嵌套了一个文本组件(Text)和一个BoxDecoration,代码如下:

      body: new Center(
          child: new Container(
            //添加容器装饰
            decoration: new BoxDecoration(

            ),
            child: new Text(
              //添加文本组件
              ''
            ),
          ),
        ),

最基础的组件是widget,其他所有的组件都是继承于widget,widget下有两大类组件,有状态、无状态组件,有状态组件是界面会发生变化的组件,如Scrollable、Animatable等,无状态组件就是界面不会发生变化的组件,如Text、AssetImage等
3、构建widget
可以重写widget的builde方法来构建一个组件,build即为创建一个widget的意思,返回的也是widget对象,不管返回的是单个组件还是返回通过嵌套方式组合的组件都是widget的实例;
4、处理用户交互
如果widget需要根据用户交互或其他因素进行更改,则该widget是有状态的,例如,一个Widget计数器在用户点击一个按钮时递增,那么该计数器的值就是该widget的状态,当该值发生变化时需要重新构建widget以更新ui.
这些widget继承于StatefulWidget(而不是State)并将它们的可变状态存储在State的子类中,有状态widget继承:
Statefulwidget-----PopupMenuButton----State
每当改变一个State对象时,必须调用setState()来通知框架,框架会再调用State的构建方法来更新用户界面.
有了独立的状态和widget对象,其他的widget可以以同样的方式处理有状态和无状态的widget,而不必担心失去状态,父widget可以自由的创建子widget的新实例且不会失去子widget的状态,而不是通过持有子widget来维持其状态,框架会在适当的时候完成查找和重用现有状态对象的所有工作
5、什么是状态
Flutter中的状态和react中的状态概念是一致的,React的核心思想是组件化,应用由组件搭建而成的,而组件中最重要的就是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据.flutter程序的运行可以认为是一个巨大的状态机,用户的操作,请求API和系统事件的触发都是推动状态机运行的触发点,触发点通过调用setState()方法推动状态机进行响应.

生命周期(借用网图)

6、分层框架
Flutter框架是一个分层的结构,每层都建立在前一层之上,上层比下层使用频率更高.(有关构成Flutter分层框架的完整库,可以参阅官方api地址 https://docs.flutter.io/)
分层设计的目标是帮助开发者用更少的代码做更多的事,比如Material层通常组合来自widget层的widget,而widget层通过较低级对象渲染层来构建.
分层结构为构建应用程序提供了许多选项,选择一种自定义的方法来释放框架的全部表现力,或者使用构建层中的构建块,或混合搭配.可以使用flutter所有现成的widget,也可以使用flutter团队用于构建框架的工具和技术创建定制的widget.可以从高层次、统一的widget概念中获得开发效率的优势,也可以深入到下层施展才能.