04-Flutter 基础组件

300 阅读2分钟

Flutter 介绍

Flutter 是什么?

  • Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。

Flutter 现在能做什么?

  • 能够开发Android,iOS,web,macOS应用,支持深色模式

web和macOS 目前属于beta阶段

Flutter 未来能做什么?

  • Flutter今年的目标是:能在 Android,iOS,web浏览器,macOS,Windows,Fuchsia运行应用程序

  • 2020年重点事项:Web和Desktop

  • 更新速度:计划每月一个beta版本,3个月一个稳定版

  • HOT UI github.com/flutter/flu…

Flutter 有什么优势?

  • 性能好,流畅

  • 一致体验,UI跨平台

  • 开发效率高

  • 采用Dart静态语言

Flutter是如何做到高性能的?

下图展示了Android和iOS的架构图,红色部分为上层应用程序需要开发的代码

原生开发架构.png
原生开发需要Android开发写java/kotlin代码,需要iOS开发写OC/Swift代码

RN开发架构.png
React Native利用JSBridge 动态创建原生UI

Flutter开发架构.png

Flutter为我们提供了对接各个平台的SDK,上层应用开发只需要使用Dart调用Flutter提供的Widget

Flutter开发初体验

和原生开发Android对比

开发工具

  • Android:AS, IDEA

  • Flutter:VSCode,AS,IDEA

UI开发区别:

Android画UI XML文件描述+代码动态创建,一般情况会使用XML,XML文件有代码模式+预览模式,支持代码编写,支持控件拖拽,编译运行前能够进行页面预览,对于后期接受项目的开发能够快速定位到UI元素。

Flutter目前阶段还没有类似Android原生开发这样能够在编译前进行页面预览,但是HOT UI 已经在路上。

编程模式上的区别

Flutter的思想主要借鉴了React的响应式编程思想,开发只需要对状态进行管理,框架负者渲染,而Android原生开发,大多数还是函数式编程,虽然说有一些响应式编程的写法,但是始终不够彻底。

介绍AS操作指南

  • 创建项目

  • 左边目录,顶部:选择运行平台,配置运行的入口文件,run,debug,

  • 右侧 outline概要 inspector-检查(widgets列表和renderTree列表)

  • debug,profile,release三种模式

同时部署4端看看效果