Flutter的特点与核心概念VS开发环境搭建

2019年10月25日10:45:22 发表评论 108 views
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。同时可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者使用,而且Flutter是完全免费、开源的。Flutter已经发布很长一段时间了,阿新认为大前端方向是趋势,值得好好学习一下。

我们将介绍Flutter的一些基本概念,及开发Flutter的准备工作。

的特点与核心概念。

2.开发环境搭建。

  Flutter的特点与核心概念
Flutter的特点如下所示:
跨平台:现在Flutter至 少可以跨5种平台,甚至支持嵌入式开发。我们常
用的有MacOS、Windows、 Linuxr、 Android、 iOS,甚至可以在谷歌最新的
操作系统Fuchsia上运行。到目前为止,Flutter算是支持平台最多的框架了,
良好的跨平台性,直接带来的好处就是减少开发成本。
丝滑般的体验:使用Flutter内置高大上的Material Design和Cupertino
风格组件、丰富的motion API、平滑而自然的滑动效果和平台感知,为用户
带来全新体验。
响应式框架:使用Flutter的、 响应式框架和一系列基础组件, 可以轻松
构建用户界面。使用功能强大且灵活的API (针对2D、动画、手势、效果等)
能解决艰难的UI挑战。
支持插件:通过Flutter的插件可以访问平台本地API,如相机、蓝牙、WiFi等。借助现有的Java、C++等代码实现对原生系统的调用。
Flutter包括一个现代的响应式框架、一个2D渲染引擎、现成的组件和开发工具。Flutter的核心概念有:组件、构建、状态、框架等。下面分别介绍。
.1 一切皆为组件

组件(Widget)是Flutter应用程序用户界面的基本构建块。不仅按钮、输入框、卡片、列表这些内容可作为Widget,甚至将布局方式、动画处理都视为Widget。所以Flutter具有一致的统一对象模型:Widget。

Widget可以定义为:
一个界面组件(如按钮或输入框)
一个文本样式(如字体或颜色)
一种布局(如填充或滚动)
一种动画处理(如缓动)
一种手势处理(GestureDetector)
通过这些来改变组件的状态及回调方法的处理。
.2  组件嵌套

复杂的功能界面通常是由一个一个简单功能的组件组装完成的。这种嵌套组合的方式带来的最大好处就是解耦。

最基础的组件类是Widget,其他所有的组件都是继承Widget的,如图1-1所示。主要有两大类组件:有状态组件无状态组件。有状态组件是界面会发生变化的组件。无状态的组件即界面不发生变化的组件。

Flutter的特点与核心概念VS开发环境搭建

1-1 类层次结构
.3 分层的框架

Flutter框架是一个分层的结构,每一层都建立在前一层之上。图1-2显示了Flutter框架,上层比下层的使用频率更高。

分层设计的目标是帮助开发者用更少的代码做更多的事情。

Flutter的特点与核心概念VS开发环境搭建

1-2 Flutter框架

开发环境搭建

开发环境搭建,Flutter支持三种环境:windows、MacOS和Linux。我们主要说windows环境搭建。

.1 Windows环境搭建

1.使用镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

(系统变量 或者用户变量都行)

 

Flutter的特点与核心概念VS开发环境搭建

Flutter的特点与核心概念VS开发环境搭建

 2.获取Flutter SDK
    链接地址:https://flutter.dev/docs/development/tools/sdk/releases#windows

Flutter的特点与核心概念VS开发环境搭建

3.下载解压 
 配置 flutter 环境变量  系统变量path 下配置 解压的路径 ; 结束    

Flutter的特点与核心概念VS开发环境搭建

重启电脑 打开dos 命令   输入flutter doctor  如图所示

Flutter的特点与核心概念VS开发环境搭建

打√的就是已经配置好的 。
4.配置android sdk

   打开Android Studio -> File -> Settings -> Plugins

分别下载Dart插件Flutter插件

安装完成后重启 android studio

           重启后如图1-3所示表示已完成

Flutter的特点与核心概念VS开发环境搭建

1-3 Flutter安装完成

然后设置flutter和dart的sdk路径:

Flutter的特点与核心概念VS开发环境搭建

Flutter的特点与核心概念VS开发环境搭建

再次运行dos命令  flutter doctor

Flutter的特点与核心概念VS开发环境搭建

最后后就可以新建flutter 项目 如图1-4 代表成功

Flutter的特点与核心概念VS开发环境搭建

1-4 运行成功

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: