Flutter入门篇
Flutter概览
Flutter是谷歌发布的跨平台开发框架(通过极少的改动即可运行在桌面端,web端,Android与IOS且UI具有高度一致性)并将作为谷歌新操作系统Fuchsia的UI框架。在移动端Flutter通过skia2D绘图引擎保证了各平台UI一致性的同时具有媲美原生应用的流畅度。因Dart语言同时支持JIT编译(Just in Time)和AOT编译(Ahead of Time)使得Flutter支持hot reload。在开发阶段可以帮助您在无需重新启动应用的情况下快速、轻松地进行测试、构建用户界面、添加功能以及修复错误。而在发布时又能获得极高的性能表现。想要了解更多Flutter相关内容请前往Flutter官网(需翻墙):https://flutter.dev/ 中文镜像站 : https://flutter-io.cn/
环境配置
Flutter安装建议参考中文镜像站里的安装教程,包含了配置国内镜像的内容。系统可以是Windows,Linus,macOS。集成开发环境可以选择Android Studio,IDEA, VS Code。
在安装完Flutter插件后新建项目时便会有Flutter项目的选项。
Flutter基础项目如上图所示,android和ios文件夹为对应平台的配置文件和基础架构,lib目录存放编写的dart的文件,pubspec.yaml用来添加依赖库和图片等资源文件。lib目录下自动生成的main.dart文件包含了Flutter应用的入口,通过对该文件的解析可以大致了解Flutter应用结构。
dart语言概览
Flutter框架唯一支持的编程语言为dart。dart语言可以简单的看作Java和JavaScript的结合体,有过面向对象编程语言的小伙伴们都能快速上手。详细的教程参考 官方文档
这里只介绍一些与其他编程语言的相差较大的部分:
- MyHomePage(title: ‘Flutter Demo Home Page’)
在定义方法时用大括号包裹住的参数为带名称的可选参数,参数前用 @required 注释表明该参数不可省。如:MyHomePage({Key key, this.title}) , this.title表示将传入的值直接赋给属性title。 - 在dart中,new关键字永远是可省的,如 return MaterialApp(…)。 变量定义可以是
final和const的区别在于final是只能被赋值一次的常量,可以用另一个变量初始化,而const不能被变量初始化,const的值必须在编译前就能被确定。String str; final str = "" const str = "" var str = "" dynamic str = ""
- 传递方法
() => _counter++; //方法体为单行, 约定下划线开头的属性为私有 (p1, ...) => ... ; () {} //方法体为多行 (p1, ...) { ... }
main.dart文件解析
import 'package:flutter/material.dart';
void main() => runApp(MyApp()); //dart中的入口函数,runApp方法启动Flutter应用程序
class MyApp extends StatelessWidget { //在Flutter中一切皆为控件,无论Activity还是布局等。
@override
Widget build(BuildContext context) {
return MaterialApp( //便捷创建app的控件,可以配置全局颜色主题,路由,国际化等。
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
//最常用的两大Widget之一。StatefulWidget,可以通过setState方法动态的改变界面
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() { //通过改变State中的属性动态的改变界面
_counter++;
});
}
@override
Widget build(BuildContext context) {
//Scaffold控件提供了一个路由的基础结构,如appBar,body等。
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center( //使子控件居中
child: Column( //使children中的多个控件垂直排列
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton( //悬浮按钮
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/c977803acc934578e35ff527caae7a29.png)