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

2019-10-2510:45:22APP与小程序开发Comments2,055 views字数 1855阅读模式
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。同时可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者使用，而且Flutter是完全免费、开源的。Flutter已经发布很长一段时间了，阿新认为大前端方向是趋势，值得好好学习一下。

我们将介绍Flutter的一些基本概念，及开发Flutter的准备工作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

的特点与核心概念。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

2.开发环境搭建。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

  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。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

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

复杂的功能界面通常是由一个一个简单功能的组件组装完成的。这种嵌套组合的方式带来的最大好处就是解耦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

最基础的组件类是Widget，其他所有的组件都是继承Widget的，如图1-1所示。主要有两大类组件：有状态组件和无状态组件。有状态组件是界面会发生变化的组件。无状态的组件即界面不发生变化的组件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

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

Flutter框架是一个分层的结构，每一层都建立在前一层之上。图1-2显示了Flutter框架，上层比下层的使用频率更高。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

分层设计的目标是帮助开发者用更少的代码做更多的事情。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

1-2 Flutter框架文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

开发环境搭建

开发环境搭建，Flutter支持三种环境：windows、MacOS和Linux。我们主要说windows环境搭建。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

.1 Windows环境搭建

1.使用镜像文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

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

（系统变量 或者用户变量都行）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

 文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

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

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

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

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

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

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

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

   打开Android Studio -> File -> Settings -> Plugins文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

分别下载Dart插件和Flutter插件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

安装完成后重启 android studio文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

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

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

1-3 Flutter安装完成

然后设置flutter和dart的sdk路径：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

再次运行dos命令  flutter doctor文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

最后后就可以新建flutter 项目 如图1-4 代表成功文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

Flutter的特点与核心概念VS开发环境搭建文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

1-4 运行成功文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/17081.html

  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/xcx/17081.html

Comment

匿名网友 填写信息

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

确定