计数器应用实例
在我们新建项目之后，会有一段程序代码，现在我通过我自己的理解，稍微说一下我在这段代码中所学到的东西，希望对大家也有所启发。代码如下:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends 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'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _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),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
程序的入口
我们可以看见，在项目目录下的lib文件夹中有一个main.dart文件，打开这个文件，该程序中有这样一句源码：
void main() => runApp(new MyApp());
因为我是第一次接触Dart语言，先开始接触的时候就感觉有点莫名其妙，其实这句话展开以后，我们就理解了。
void main(){
return runApp(new MyApp());
}
从上面可以看出，在main函数中仅仅调用了runApp函数，该函数为Flutter框架的入口，如果没有这个，那么我们编写的程序就是一个通过Dart编写的控制台程序。
Widget
在主函数中，我们看见看见runApp传递进入了一个参数。runApp函数接受给定的Widget并使其成为widget树的根。Flutter 的核心设计思想便是即一切即Widget。那么在这里我们稍微理解一下widget。
初学的时候，我们可以把widget当做控件来看待，但是其实在flutter的世界里，包括views,view controllers,layouts等在内的概念都建立在Widget之上。widget是flutter功能的抽象描述。我们可以认为它是“声明和构建 UI 的方法”。它本身不是视图，并且不是直接绘制任何东西，而是对UI及其语义的描述。
其中在Widget主要分为两种：
无状态组件（Stateless Widget）：在这种状态中，它的所有属性是不可变的，意味着他的所有属性都是最终的。
有状态组件（Stateful Widget）：StatefulWidget持有的状态在Widget的生命周期内可能发生变化，实现它至少要实现两个类，StatefulWidget和State类。StatefulWidget类本身是不变的，但是 State类中持有的状态在widget生命周期中可能会发生变化。
在实例中，MyHomePage 是应用的首页，它继承自StatefulWidget类，表示它是一个有状态的widget（Stateful widget）。如何重写createState方法，如下所示：
_MyHomePageState createState() => new _MyHomePageState();
_MyHomePageState为它才状态类，状态类必须继承自State类，在实例中，我们定义了一个_counter作为计数器变量，然后通过FloatingActionButton的点击事件，执行_incrementCounter方法，该方法调用setState()方法。
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
setState方法的作用是通知Flutter框架，有状态发生了改变，Flutter框架收到通知后，会执行build方法来根据新的状态重新构建界面， Flutter 对此方法做了优化，使重新执行变的很快，所以你可以重新构建任何需要更新的东西，而无需分别去修改各个widget。
网友评论