Flutter作为Google大厂出品,肯定信得过。相比于RN用JSBridge 调用原生控件渲染,Flutter直接跳过这一层,而是选择用自己的UI框架渲染,更加高效,dart作为20多种语言里被选用的肯定也有它的道理。今天就来学习一下这个跨平台的框架。
工欲善其事必先利其器,首先是安装环境,然后是编译器。
1.你需要去Flutter下载SDK包,然后解压,记住路径。Mac和Windows路径稍有不同,不懂的同学自行搜索,然后根据步骤一步步安装,具体的情况网上有很多,安装也很简单,我就不多叙述了。这里主要针对安装好环境的同学。
2.安装好环境后,你可以选择使用VS Code或者Android Studio作为你的编译器,看个人喜好。
3.所有环境都配置好后,就可以开始你的Flutter之旅了。打开你的编译器,VS Code使用快捷命令直接就可以创建一个新的工程,打开工程后点击F5或者在终端/命令行 输入Flutter run就可运行。里面会自动生成一个demo的代码,大概如下:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
运行效果如下:
其实这些都然并卵,只是给你一个错觉,创建=完成。请关掉模拟器,然后将main.dart里面的东西全删掉。
4.打开你的浏览器,输入dart语法基础,将基础的语法学习之后,好了可以继续接下去的事。
5.学习过dart之后,先要改变一个观点,在flutter中没有view,所有的东西叫Widget,Widget不是view,你可以创建它,但是它没有像view的功能,与原生开发相比,这里没有父视图,子视图,而是通过这个Widget的东西来连接。想要写出一个flutter的程序,首先要知道Widget,其实Widget就像一个配方,你把配方中需要的东西填进去就可以了,它要什么你给什么,你想要什么就填什么。
6.flutter与原生开发相比,布局方面大有不同,在原生中通过父视图的坐标来确定子视图的位置和大小,而在flutter中,Widget是不可以更改的,记住Widget不能像view一样修改frame,bounds等属性来调整大小。Widget有两种模式,一种是不可变的叫StatelessWidget,一种叫StatefulWidget,意思是可变的和不可变的,数据不变的一般用StatelessWidget,数据可变的就要用到StatefulWidget了。
7.flutter布局对于常年驻扎原生开发的我来说,一上手就蒙的不行,根本不知道怎么办,怎么写都不对,后来通过对其他Widget的了解,慢慢可以操作复杂一点的视图了。下面看看主要的布局Widget。
MaterialApp |
提供app的UI框架,APP入口的home:Widget |
Scaffold |
提供导航栏的设置,提供显示内容的body:Widget等 |
Container |
里面只能包含一个child子Widget,可以设置外边距(等同于距离父节点Widget的上下左右长度)和内边距(等同于距离子节点Widget的上下左右长度,限制子节点里面的活动范围),宽度,高度,背景色等 |
Center |
默认在父节点居中,只能包含一个child子Widget |
Expanded |
默认充满父节点,默认均等分配占用内容的多少,只能包含一个child子Widget,可以用flex均等的调整分配的占用内容的多少 |
Row | 默认充满父节点,可以包含多个child子Widget,使用时用children,在children里面填充多个Widget,呈左右分布排列 |
Column |
默认充满父节点,可以包含多个child子Widget,使用时用children,在children里面填充多个Widget,呈上下分布排列 |
了解完这几个Widget之后就可以动手写UI了,这些Widget都是可一个包含一个的(MaterialApp和Scaffold不布局之内,只是特殊的Widget),也就是说可以用这几个Widget一个包含一个或者一个包含多个来叠加形成一个视图,所以我们要养成封装,分步的好习惯,不然你的代码就是很长的括号,到时候自己也懵圈了。
8.一个简单的滚动视图。
滑动视图在APP中是不可缺少的一环,所以在flutter中也有对应的Widget供你选用。主要是ListView,GridView,以及ScrollView还有他们的自定义View。
Listview就是上下滑动的表格一般的视图,GridView就是左右滑动或者上下滑动,分成一个个格子的视图,Scrollview中的CustomScrollView可以将两者结合,完成复杂的视图。
效果如下:
9.总结,现在的flutter生态链不是很完善,但是对于它的前景还是比较有期待的,现在的大厂如阿里,美团等也在flutter上加大投入,相信flutter在以后会有一个比较好的未来。