什么是Flutter

Flutter是一个移动应用程序的软件开发工具包（SDK），用一个代码库构建高性能、高保真的iOS和Android应用程序。目标是使开发人员能够为Android和iOS提供自然的高质量的应用，在滚动行为、排版、图标等方面实现零差异。

学习Flutter不需要Android或iOS的开发经验，因为Flutter程序使用Dart语言编写，如果您使用过Java或JavaScript等语言，轻易就能上手，只要有面向对象语言的经验，即使不是程序员也能开发Flutter应用程序！

这是一个画廊的演示应用程序，里面有高质量的滚动图像、互动卡、按钮、下拉列表和购物车页面，可以看到Flutter应用程序在Android和iOS的显示几乎一样。

Flutter的优势

高效率
- 用一套代码库就能开发iOS和Android应用
- 使用新型的、表现力强的语言和声明式的方法，用更少的代码来做更多的事情
- 开发调试更容易方便
  - 可以在应用程序运行时更改代码并重新加载查看效果，也就是热重新加载
  - 修复崩溃时可以从应用程序停止的位置继续调试
创建美观、高度定制的用户体验
- Flutter框架内置了一组丰富的质感设计控件
- 实现定制、美观、品牌驱动的设计，而不受OEM控件集的限制

Flutter的核心内容

Flutter包括功能反应框架、2D渲染引擎、现成的控件和开发工具，这些组件协同工作，帮助您设计、构建、测试和调试应用程序。

一切都是控件

控件是每个Flutter应用程序的基本构建块，与分离视图、控制器、布局和其他属性的框架不同，Flutter具有一致的统一对象模型：控件。

一个控件可以定义：

结构元素（比如按钮或菜单）
风格元素（比如字体或颜色方案）
布局的方面（比如填充）
一些业务逻辑
等等…

控件是基于构图形成层次结构，每个控件嵌套在其中，并从其父代继承属性，没有单独的“应用程序”对象，只有根控件。

您可以通过告知框架用另一个控件替换层次结构中的控件来响应事件，比如用户交互，然后框架会对比新的控件和旧的控件，并有效的更新用户界面，即更新有变化的控件。

组合大于继承

控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，例如，Container是一种常用的控件，由负责布局、绘画、定位和大小调整的几个控件组成，具体来说，Container是由LimitedBox、ConstrainedBox、 Align、Padding、DecoratedBox和Transform控件组成，而不是将Container子类化来产生自定义效果，您可以用这种新颖的方式组合这些以及其他简单的控件。

类的层次结构是扁平的，以最大化可能的组合数量。

您还可以通过与其他控件组合来控制控件的布局，例如，要居中一个控件，您可以将其包装到Center控件中，有一些填充、对齐、行、列和网格的控件，这些布局控件没有自己的视觉表示，相反，它们的唯一目的是控制另一个控件布局的某些方面，当你想了解为什么一个控件以某种方式呈现，检查邻近的控件通常就可以知道原因。

层次结构

Flutter框架被组织成一系列的层次，每一层都建立在底层之上。

上图显示的框架上层，比下层使用的更频繁，这个设计的目标是帮助你用更少的代码来做更多的事情。例如，通过从Widgets层（控件层）组成基本控件来构建Material层（质感设计层），并且Widgets层（控件层）本身是通过从Rendering层（渲染层）编排下层对象来构建的。

这些层级提供了许多构建应用程序的选项，选择一种自定义的方法来发挥框架的完整表现力，或者从Widgets层（控件层）使用构建块，或混合搭配。您可以使用Flutter提供的现成控件，或使用Flutter团队用于构建框架的相同工具和技术来创建自己的自定义控件。

这就是Flutter，您可以获得高层次、统一的控件概念的生产力优势，同时还能深入到较低层次自由探索。

构建控件

您可以通过实现返回控件的树（或层次结构）的构建函数来定义控件的独特特征，这个树更具体地表示控件的用户界面的一部分。例如，工具栏控件可能具有返回一些文本和各种按钮的水平布局的构建函数，框架会递归地询问每个这些控件的构建，直到该过程在完全具体的控件中出现，然后框架再将其拼接成树。

控件的构建功能应该没有副本的，无论何时被要求构建，控件应该返回一个新控件，而不管控件先前返回的是什么。但是框架会将先前版本与当前版本进行比较，并确定需要对用户界面进行哪些修改。

这种自动比较是非常有效的，可以实现高性能、互动的应用程序。构建函数的设计通过专注于声明控件是什么来简化代码，而不是将用户界面从一个状态更新到另一个状态的复杂化。

处理用户交互

如果控件的独特特征需要根据用户交互或其他因素进行更改，则该控件是有状态的。例如，如果控件具有每当用户点击按钮时递增的计数器，则计数器的值是该控件的状态，当该值更改时，需要重新构建控件以更新UI。

这些控件子类StatefulWidget（而不是StatelessWidget），并将其可变状态存储在State的子类中。

每当你突然变化一个状态对象（例如增加计数器）时，你必须调用setState()来通知调用状态再次创建框架来更新用户界面。

具有单独的状态和控件对象可以让其他控件以相同的方式处理无状态和有状态控件，而不用担心丢失状态。父类可以自由地创建一个新的子类实例，也不会失去子类的持续状态，更不需要坚持一个子类来保持自己的状态。该框架在适当时执行查找和重用现有状态对象的所有工作。

不想试试吗？

Flutter基础—开发环境与入门

Flutter基础—你好，Flutter！相关推荐

[译] MDC-101 Flutter：Material Components（MDC）基础（Flutter）
原文地址:MDC-101 Flutter: Material Components (MDC) Basics (Flutter) 原文作者:codelabs.developers.google.com ...
Flutter基础（四）开发Flutter应用前需要掌握的Basic Widget
本文首发于公众号「刘望舒」关联系列 ReactNative入门系列 React Native组件 Flutter基础系列前言学完了Dart语言,接下来就可以学习Widget了,Flutter的U ...
Flutter基础之部分控件学习
主要看几个常用的使用控件: main.dart 代码,下面常用 Widget 示例的代码. import 'package:flutter/material.dart';void main() =&g ...
Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用
提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见学习Dart 基础知识移步这里安装flutter环境相关移步这里 flutter基础组件使用相关移步这里文章目录一 ...
[- Flutter基础篇 -] 网络访问
首先将依赖加上 1.巧妇难为无米之炊首先我们需要找写测试的url链接,有一个好地方,那就是Github提供了很多api 但在此之前我们需要先行处理一些事,比如注册Github账号,获取一个token ...
Flutter基础（九）资源和图片
本文首发于公众号「刘望舒」 ReactNative入门系列 React Native组件 Flutter基础系列和Android开发一样,Flutter也有asset这一概念,asset是打包到程序 ...
Flutter基础篇（2）-- 老司机用一篇博客带你快速熟悉Dart语法
版权声明:本文为博主原创文章,未经博主允许不得转载.https://www.jianshu.com/p/3d927a7bf020 转载请标明出处: https://www.jianshu.com/p/ ...
一份超级详细的Flutter基础组件练习示例，请查收！
学习B站技术胖的flutter基础课程整理的示例,为了平时方便查阅,同时希望能和大家一同进步~ Flutter基础组件 Hello world import 'package:flutter/mate ...
Flutter基础知识
const 常量构造函数,如果控件是,则前面加:如果常量构造函数包含有非常量构造函数,则不加,内部是的控件单独加 1.Flutter学习网址 Flutter 中文官网 https://flutter. ...

Flutter基础—你好，Flutter！