2.Flutter打卡-基础知识（1）

计数器应用实例

在我们新建项目之后，会有一段程序代码，现在我通过我自己的理解，稍微说一下我在这段代码中所学到的东西，希望对大家也有所启发。代码如下:

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。

最后编辑于：2019.05.31 14:44:35