上次我们按照官方教程创建了默认demo,本次我们分析这个demo,分析的哪里有不对的地方,请大家指出,共同进步。
首先我们要明确,dart 中所有的东西都是类,flutter 中所有的东西都是 widget。
import 'package:flutter/material.dart';
引入 google material 的 dart 包,打开源码就会发现这个包里面引入了更多的 material 样式的 dart 包,如下所示:
export 'src/material/about.dart';
export 'src/material/animated_icons.dart';
export 'src/material/app.dart';
export 'src/material/app_bar.dart';
export 'src/material/arc.dart';
export 'src/material/back_button.dart';
export 'src/material/bottom_app_bar.dart';
export 'src/material/bottom_navigation_bar.dart';
export 'src/material/bottom_sheet.dart';
export 'src/material/button.dart';
export 'src/material/button_bar.dart';
export 'src/material/button_theme.dart';
export 'src/material/card.dart';
export 'src/material/checkbox.dart';
export 'src/material/checkbox_list_tile.dart';
export 'src/material/chip.dart';
export 'src/material/chip_theme.dart';
export 'src/material/circle_avatar.dart';
export 'src/material/colors.dart';
export 'src/material/constants.dart';
void main() => runApp(new MyApp());
dart 的初始化运行函数为 main() 这里使用了箭头函数,实际上等同于下面的代码:
void main(){
return runApp(new MyApp());
}
其中 runApp()为 APP 中的入口函数,参数为名为 MyApp的类,下面我们会分析到。
class MyApp extends StatelessWidget {
这行定义了MyApp类,继承自名为StatelessWidget父类
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
为了方便,我们把注释删掉,这是build函数,它覆盖了父类的build函数,参数是默认的BuildContext类型的context。函数返回是 MaterialApp类的实例,定义了APP中本页面的一些全局信息,3个命名参数:title、theme、 home,其中 theme 名为 ThemeData 皮肤类,可以在里面定义一些类似颜色之类的东西,没有深入研究。home 定义了本页面的显示区域,为名为 MyhomePage 的类,并传入title值。
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
以上代码定义了MyHomePage的类,继承自StatefulWidget
类,MyHomePage():super()
调用的父类的构造函数赋值并扩展了它,这里是指新加了 title 参数或者在类中叫做属性。
final String title;
定义了 title
@override
_MyHomePageState createState() => new _MyHomePageState();`
这里覆盖了父类中的 createState
函数,用于实例化_MyHomePageState()
类
下面一行
class _MyHomePageState extends State<MyHomePage>
,定义了_MyHomePageState()
类,该类继承自MyHomePage类。这里我也不懂,需要更深入的了解dart语言。
int _counter = 0;
定义变量_counter,用于记录点击次数。
void _incrementCounter() {
setState(() {
_counter++;
});
}
这里定义了_incrementCounter 方法,注意一定要调用 setState 方法,这样 _counter 的改变才能被记录下来。
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}
这段代码是demo中实现逻辑和显示的主要代码,复写父类的build函数,返回Scaffold(脚手架)组件,仔细分析就会发现,Scaffold实例中 中包含三个命名参数,分别是 appBar,body和floatingActionButton,找到Scaffold类的构造函数的代码就会发现,不止这几项,如下所示:
Key key,
this.appBar,
this.body,
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
this.persistentFooterButtons,
this.drawer,
this.endDrawer,
this.bottomNavigationBar,
this.backgroundColor,
this.resizeToAvoidBottomPadding: true,
this.primary: true,
看名称就能知道是干什么用的,每一个属性都是一个widget。
appBar: new AppBar(
title: new Text(widget.title),
),
定义appBar,是一个 AppBar类,一个命名参数,赋值为父类中的title,这里有一点不明白,为什么是使用widget类来获取,希望大牛指点。
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
body 为页面显示的主要部分,为一个垂直居中显示widget,子widget为一个 Column widget,mainAxisAlignment: MainAxisAlignment.center,
该行定义了布局方式为居中,Column 的子widget为一个List,包含两个 text widget,其中style定义了text的样式,具体没有深入分析这里。
下面
floatingActionButton: new FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
这段代码定义了浮动按钮,onPressed为点击事件的方法,每点击一次_counter 加1,tooltip 为长按提示,子widget为一个Icon类的实例,具体没有分析。
经过一番分析,感到 flutter 设计巧妙,功能完善,是值得学习的。
有什么问题,可以加群:531488521 交流。