配置好环境变量,接下来进行第一个Flutter的App项目的学习
第一步新建Flutter App项目 ,打开Android Studio —》New Flutter Project…
新建后会看到lib下有一个main.dart文件,没错这就是我们的Flutter App项目,这里我们新建一个main2.dart文件来编写新的项目
在Flutter中,几乎所有的对象都是一个Widget
,与原生开发中的控件不同的是,Flutter中的widget
的概念更广泛,它不仅可以表示UI元素,也可以表示一些功能性的组件如:用于手势检测的 GestureDetector
widget、用于应用主题数据传递的Theme
等等。由于Flutter主要就是用于构建用户界面的,所以,在大多数时候,可以认为widget就是一个控件
- Widget
StatelessWidget
和StatefulWidget
是flutter
的基础组件,日常开发中自定义Widget
都是选择继承这两者之一。也是在往后的开放中,我们最多接触的Widget:在实际使用中,Stateless与Stateful的选择需要取决于这个 Widget 是有状态还是无状态,简单来说看界面是否需要更新。 - Stateless Widget
StatelessWidget用于不需要维护状态的场景,它通常在build
方法中通过嵌套其它Widget来构建UI,在构建过程中会递归的构建其嵌套的Widget。
BuildContext
表示构建widget的上下文,它是操作widget在树中位置的一个句柄,它包含了一些查找、遍历当前Widget树的一些方法。每一个widget都有一个自己的context对象。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("标题")),
body: Center(child: Text("hello world"),),
), //Scaffold
); //MaterialApp
}
- Stateful Widget
StatefulWidget是动态的,添加了一个新的接口createState()
用于创建和Stateful widget相关的状态State
,它在Stateful widget的生命周期中可能会被多次调用。
当State被改变时,可以手动调用其setState()
方法通知Flutter framework状态发生改变,Flutter framework在收到消息后,会重新调用其build
方法重新构建widget树,从而达到更新UI的目的。
class MyAppStateFul extends StatefulWidget {
@override
_MyAppStateFulState createState() => new _MyAppStateFulState();
}
class _MyAppStateFulState extends State<MyAppStateFul> {
var data = 1;
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("首页"), centerTitle: true,),
body: RaisedButton(
onPressed: () {
setState(() { //点击刷新UI
data++;
});
}, child: Center(child: Text("Hello,Flutter! $data"),),),
),
);
}
}
在写Stateful 和Stateless AS提供了快捷键,直接打出steful和steless可快速生成模板代码;
- State生命周期
State类除了build
之外还提供了很多方法能够让我们重写,这些方法会在不同的状态下由Flutter调起执行,所以这些方法我们就称之为生命周期方法。
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
///绘制界面,当setState触发的时候会再次被调用
@override
Widget build(BuildContext context) {
debugPrint("build");
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("导航"),),
body: Text("Flutter 生命周期"),
),
);
}
///当Widget第一次插入到Widget树时会被调用,对于每一个State对象,Flutter framework只会调用一次该回调
@override
void initState() {
///初始化
super.initState();
debugPrint("initState");
}
///初始化时,在initState()之后立刻调用
///当依赖的InheritedWidget rebuild,会触发此接口被调用
@override
void didChangeDependencies() {
super.didChangeDependencies();
debugPrint("parent didChangeDependencies......");
}
@override
void setState(fn) {
///更新数据
super.setState(fn);
debugPrint("setState");
}
///当State对象从树中被移除时,会调用此回调
@override
void dispose() {
///挂起
super.dispose();
debugPrint("dispose");
}
///当State对象从树中被永久移除时调用;通常在此回调中释放资源
@override
void deactivate() {
///销毁
super.deactivate();
debugPrint("deactivate");
}