Flutter - Design beautiful apps

1,381 阅读9分钟

Flutter是什么?

image.png

Flutter 是 Google 的 UI 工具包,用于从单个代码库为移动Web桌面嵌入式设备构建漂亮的、本机编译的应用程序。

Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序。
Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序。我们兼容滚动行为、排版、图标等方面的差异。

来自另一个平台?文档: iOS、 Android、 Web、 React Native、 Xamarin

快速发展

使用 Stateful Hot Reload 在几毫秒内让您的应用程序栩栩如生。使用一组丰富的完全可定制的小部件在几分钟内构建本机界面。

未命名.gif

Flutter 的热重载可帮助您快速轻松地进行实验、构建 UI、添加功能并更快地修复错误。体验亚秒级的重新加载时间,而不会丢失模拟器、模拟器和硬件的状态。 了解更多

富有表现力和灵活的用户界面

以本地最终用户体验为重点,快速发布功能。分层架构允许完全自定义,从而实现令人难以置信的快速渲染和富有表现力和灵活的设计。

使用 Flutter 内置的漂亮的 Material Design 和 Cupertino(iOS 风格)小部件、丰富的运动 API、平滑的自然滚动和平台意识来取悦您的用户。 浏览小部件目录

未命名.gif

反思

使用 Flutter 构建的屡获殊荣的正念应用程序。
下载:iOS , Android
了解更多

原生性能

Flutter 的小部件包含所有关键的平台差异,例如滚动、导航、图标和字体,并且您的 Flutter 代码使用Dart 的本机编译器编译为本机 ARM 机器代码。

未命名.gif 使用 Flutter 构建的应用程序示例

Aurélien Salomon的 Google 报亭导航模式启发的演示设计

现代的,响应式框架

使用Flutter的现代、响应式框架,和一系列基础widget,轻松构建您的用户界面。使用功能强大且灵活的API(针对2D、动画、手势、效果等)解决艰难的UI挑战。

class CounterState extends State<Counter> {
  int counter = 0;

  void increment() {
    // 告诉Flutter state已经改变, Flutter会调用build(),更新显示
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // 当 setState 被调用时,这个方法都会重新执行.
    // Flutter 对此方法做了优化,使重新执行变的很快
    // 所以你可以重新构建任何需要更新的东西,而无需分别去修改各个widget
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }
}

浏览 widget 目录 ,了解更多关于 响应式框架.

访问本地功能和SDK

通过平台相关的API、第三方SDK和原生代码让您的应用变得强大易用。 Flutter允许您复用现有的Java、Swift或ObjC代码,访问iOS和Android上的原生系统功能和系统SDK。

访问平台功能非常简单。以下是interop example(互操作示例)中的一个片段:

Future<Null> getBatteryLevel() async {
  var batteryLevel = 'unknown';
  try {
    int result = await methodChannel.invokeMethod('getBatteryLevel');
    batteryLevel = 'Battery level: $result%';
  } on PlatformException {
    batteryLevel = 'Failed to get battery level.';
  }
  setState(() {
    _batteryLevel = batteryLevel;
  });
}

了解如何使用 packages, 或编写 平台通道, 来访问原生代码、API、SDK。

统一的应用开发体验

Flutter拥有丰富的工具和库,可以帮助您轻松地同时在iOS和Android系统中实现您的想法和创意。 如果您没有任何移动端开发体验,Flutter是一种轻松快捷的方式来构建漂亮的移动应用程序。 如果您是一位经验丰富的iOS或Android开发人员,则可以使用Flutter作为视图(View)层, 并可以使用已经用Java / ObjC / Swift完成的部分(Flutter支持混合开发)。

image.png
了解详细的Flutter技术总览

为什么要使用Flutter?

Flutter有什么优势?它可以帮助你:

  • 提高开发效率

    • 同一份代码开发iOS和Android
    • 用更少的代码做更多的事情
    • 轻松迭代
      • 在应用程序运行时更改代码并重新加载(通过热重载)
      • 修复崩溃并继续从应用程序停止的地方进行调试
  • 创建美观,高度定制的用户体验

    • 受益于使用Flutter框架提供的丰富的Material Design和Cupertino(iOS风格)的widget
    • 实现定制、美观、品牌驱动的设计,而不受原生控件的限制
  • 跨平台自绘引擎
    FlutterHybrid AppReact Native这些跨平台技术不同,Flutter既没用使用WebView,也没有使用各个平台的原生控件,而是本身实现一个统一接口的渲染引擎来绘制UI,这样做可以保证不同平台UI的一致性。另外采用自绘引擎后,Flutter在布局过程中不需要像RN那样要在JavaScriptNative之间通信,可以节省性能开销。Flutter使用Skia作为其2D渲染引擎,SkiaGoogle的一个2D图形处理函数库,包含字型、坐标转换,以及点阵图都有高效能且简洁的表现,Skia是跨平台的,并提供了非常友好的API

  • 采用Dart开发
    Flutter App采用Dart语言来开发。与JavaScript相比,DartJIT(即时编译)模式下,速度与JavaScript基本持平。但是当DartAOT(运行前编译)模式运行时,Dart性能要高于JavaScript

核心原则

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

一切皆为widget

Widget是Flutter应用程序用户界面的基本构建块。每个Widget都是用户界面一部分的不可变声明。 与其他将视图、控制器、布局和其他属性分离的框架不同,Flutter具有一致的统一对象模型:widget。

Widget可以被定义为:

  • 一个结构元素(如按钮或菜单)
  • 一个文本样式元素(如字体或颜色方案)
  • 布局的一个方面(如填充)
  • 等等…

Widget根据布局形成一个层次结构。每个widget嵌入其中,并继承其父项的属性。没有单独的“应用程序”对象,相反,根widget扮演着这个角色。

您可以通过告诉框架使用另一个widget替换层次结构中的widget来响应事件,例如用户交互,替换后框架会比较新的和旧的widget,并高效地更新用户界面。

组合 > 集成

Widget本身通常由许多更小的、单一用途widget组成,这些widget结合起来产生强大的效果。例如,Container是一个常用的widget, 由多个widget组成,这些widget负责布局、绘制、定位和调整大小。具体来说,Container由 LimitedBox、 ConstrainedBox、 Align、 Padding、 DecoratedBox、 和Transform组成。 您可以用各种方式组合这些以及其他简单的widget,而不是继承容器。

类层次结构很浅且很宽,可以最大限度地增加可能的组合数量。

image.png

您还可以通过与其他widget组合来控制widget的布局。例如,要将widget居中,可以将其封装在Center widget中。有填充、对齐、行、列和网格的widget。 这些布局widget没有自己的可视化表示。相反,他们唯一的目的是控制另一个widget布局的某些方面。要理解widget以某种方式呈现的原因,检查相邻widget通常很有帮助。

分层的框架

Flutter框架是一个分层的结构,每个层都建立在前一层之上。 image.png 该图显示了框架的上层,它比下层的使用频率更高。有关构成Flutter分层框架的完整库,请参阅我们的API文档

这个设计的目标是帮助你用更少的代码做更多的事情。例如,Material层是通过组合来自Widget层的基本Widget来构建的, 并且Widgets层本身是通过较低级对象渲染层构建的。

层为构建应用程序提供了许多选项。选择一种自定义的方法来释放框架的全部表现力,或者使用构件层中的构建块,或混合搭配。 您可以实现Flutter提供的所有现成的widget,或者使用Flutter团队用于构建框架的相同工具和技术创建您自己的定制widget。

没有什么是隐藏的。您可以从高层次,统一的widget概念中获得开发效率优势,而不会牺牲您希望深入到下层的能力。

构建widget

您可以通过实现widget的build返回widget树(或层次结构)来定义widget的独特特征 。 这棵树更具体地表示了用户界面的widget层次。例如,工具栏widget的build函数可能返回一个包含一些文本和各种按钮的水平布局。 然后,框架递归地构建widget,直到该所有widget构建完成,然后framework将他们一起添加到树中。

widget的构建函数一般没有副作用。每当它被要求构建时,widget应该返回一个新的widget树,无论widget以前返回的是什么。 Framework会将之前的构建与当前构建进行比较并确定需要对用户界面进行哪些修改。

这种自动比较非常有效,可以实现高性能的交互式应用程序。而构建函数的设计则着重于声明widget是由什么构成的,而不是将用户界面从一个状态更新到另一个状态的(这很复杂性),从而简化了代码。

处理用户交互

如果widget需要根据用户交互或其他因素进行更改,则该widget是有状态的。例如,如果一个widget的计数器在用户点击一个按钮时递增,那么该计数器的值就是该widget的状态。 当该值发生变化时,需要重新构建widget以更新UI。

这些widget将继承StatefulWidget(而不是State)并将它们的可变状态存储在State的子类中。

image.png

每当你改变一个State对象时(例如增加计数器),你必须调用setState()来通知框架,框架会再次调用State的构建方法来更新用户界面。 有关管理状态的示例,请参阅创建新Flutter项目时的MyApp 模板 。

有了独立的状态和widget对象,其他widget可以以同样的方式处理无状态和有状态的widget,而不必担心丢失状态。 父widget可以自由地创造子widget的新实例且不会失去子widget的状态,而不是通过持有子widget来维持其状态。 框架在适当的时候完成查找和重用现有状态对象的所有工作。

立即安装 Flutter

它是免费和开源的。

开始吧

学习资料

Flutter 中文网