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.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {// This widget is the home page of your application
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(() {
_counter++;
});
}
@override
Widget build(BuildContext context) { // This method is rerun every time setState is called
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center( // a layout widget
child: Column( // a layout widget
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),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
谨记：Flutter 中所能看到的一切都是 Widget
1、导入依赖包
import 'package:flutter/material.dart';
即：将 package 目录下的 flutter 环境下的 material.dart 导入到当前文件.
2、入口函数
void main() => runApp(MyApp());
main() 是 Flutter 的顶级入口函数，=>是方法调用的操作符，表示前面方法调用后面方法。即 main() 函数内部调用的是 runApp(widget) 方法。
3、页面结构
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
MaterialApp（也是 Widget）其功能是帮助构建 Flutter 应用的框架，该 widget 可以设置 APP 的名称、主题、首页、路由列表等。
4、MyHomePage 首页
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(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {by
title: Text(widget.title),
),
body: Center(
child: Column(
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),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
类的构造方法是一个与类同名的函数。MyHomePage 的构造方法里面有两个参数 key 和 title，内部定义了一个 final 修饰的不可变属性 title，其值通过类初始化传递。
该首页由两部分组成：一个是继承自 StatefulWidget 的 MyHomePage 类，一个是继承自 State 类的 _MyHomePageState 类。
1、在 MyHomePage 中重写了 StatefulWidget 类中的 createState() 方法，这个方法内部调用的是 _MyHomePageState() （即 _MyHomePageState 的构造函数），createState() 返回的也是 _MyHomePageState 即 State。
2、在 _MyHomePageState 类中重写了 build() 方法，这个方法调用 Scaffold 实例化方法并返回 Scaffold 实例。Scaffold 可以理解为 APP 的容器，它包括 appBar，body，floatingActionButton 等 Widget，由它构建了 Widget 树(也可以称为视图树)。
3、floatingActionButton 即右下角的按钮，它接受了一个点击后的回调方法 _incrementCounter，这个回调方法内部调用的是 setState((){}) 方法。按钮点击后：调用回调方法 --> 计数器递增 --> 调用 setState 方法 --> 调用 build 方法 --> 更新页面
补充：页面的刷新时机
1、创建 state 时，也就是 createState() 时，会调用 build() 刷新页面。
2、更新 state 时，也就是 setState() 时，也会调用 build() 刷新页面。
