Demo构建说明
直接上Demo源码,然后详细拆分说明
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
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'),
);
}
}
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) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
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.
);
}
}
- 入口main说明
//类似Lamda表达式的简化写法
void main() => runApp(MyApp());
//实际的完整写法
void main(){
runApp(new MyApp());//这里的new关键字也是可以省略的,runApp是渲染各种界面的,方法参数是一个实现flutter的Widget组件(实际翻译是部件,我改成"组件")
}
//MyApp是一个自定义组件,源码实现了StatelessWidget一个无状态的组件,StatelessWidget后面再说,先不管
- MyApp说明
//继承StatelessWidget组件
class MyApp extends StatelessWidget {
@override
//因为runApp渲染界面时传递的是MyApp实例,MyApp继承StatelessWidget,
//StatelessWidget实际界面创建者是build方法,所以本页面的所有的组件创建工作需要在MyApp完成
//StatelessWidget实际不产生任何界面组件,它只表示本页面的根是一个无状态的,具体界面组件需要在build方法种创建出来
Widget build(BuildContext context) {
//MaterialApp一般作为根页面,它提供了一个类似布局的功能,比如标题栏文字,主题颜色,主内容,路由(主要是用界面跳转使用)等
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),//主页面内容,标题栏以下的所有界面,可以是任意Widget,
// MyHomePage是一个自定义组件,实现StatefulWidget有状态的组件
);
}
}
- MyHomePage说明
class MyHomePage extends StatefulWidget {
//MyHomePage构建方法
MyHomePage({Key key, this.title}) : super(key: key);
//类的一个变量,在标题栏文字
final String title;
@override
//重写createState,意思就是返回一个Widget
_MyHomePageState createState() => _MyHomePageState();
//完整写法
_MyHomePageState createState(){
return new _MyHomePageState();
}
}
- _MyHomePageState说明
继承StatefulWidget在createState方法中必须要返回一个State的抽象类,与MyApp类似
class _MyHomePageState extends State<MyHomePage> {
//记录状态的变量,即"You have pushed the button this many times:"下面的0
int _counter = 0;
//加号按钮调用的方法,即floatingActionButton这个组件每次被按下时调用的方法
void _incrementCounter() {
//保存状态变量变化,setState是State的方法,setState参数是一个函数,这里为了代码简洁且方便开发写了一个匿名函数
setState(() {
_counter++;
});
}
//上面代码也可以修改为 === start
void _incrementCounter() {
setState(record);
}
void record(){
_counter++;
}
//=== end
@override
Widget build(BuildContext context) {
//返回一个Scaffold,这个组件也是一个类似于布局的组件
return Scaffold(
appBar: AppBar(
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.
);
}
}
- StatelessWidget,MaterialApp,StatefulWidget,Scaffold简单说明
StatelessWidget无状态的组件,意思是一旦组件相关记录都是不可改变的
MaterialApp一个布局组件,一般用于最顶层,根部分
StatefulWidget有状态组件,该组件下子组件是可以根据操作改变相关状态
Scaffold类似一个布局组件,该组件实现了,appBar,body,floatingActionButton,drawer,bottomNavigationBar等等
下一篇将讲述大部分组件