Flutter（三）-Counter 计数器项目示例说明

Android Studio  创建Flutter 计数器项目：

创建的项目结构如上图：

android 文件夹和我们原生app 的目录是一致的

ios 文件是ios 平台的原生项目结构

fluter 项目文件在哪呢，打开lib 文件夹，如下图：

这个文件夹包含我们Flutter 的项目文件

 

pubspec.yaml 这个文件是管理我们Flutter 的依赖

先提供一下项目源码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Counter(),
    );
  }
}

class Counter extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CounterState();
  }
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  void _min() {
    setState(() {
      _counter--;
    });
  }


  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Counter is '),
            Text('$_counter'),
            Center(
              child: Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    RaisedButton(
                      onPressed: _min,
                      child: Text('min'),
                    ),
                    Container(
                      padding: const EdgeInsets.fromLTRB(16.0, 0, 0, 0),
                      child:  RaisedButton(
                        onPressed: _increment,
                        child: Text('add'),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

项目分析：

import 'package:flutter/material.dart';

看到import 关键字，第一时间想到的是引入相关的包 

void main() {
  runApp(MyApp());
}

main 函数是程序的入口，每个单独的dart 文件如果包含 main() 函数可单独运行

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Counter(),
    );
  }
}

MyApp 继承了 StateLessWidget   

在Flutter 中所有的组件都可以看做为 widget ， widget 分为状态可变Widget(StatefulWidget) 和 不可变 widget （StatelessWidget），该项目中计数器用_counter 来计数 采用 statefulWidget,

class Counter extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CounterState();
  }
}

重写 createState 方法 ，同时需要创建一个State<Counter > 代码如下：

class _CounterState extends State<Counter>{}

以下两个方法是计数器增加和减小

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  void _min() {
    setState(() {
      _counter--;
    });
  }

setState方法的作用是通知Flutter框架，有状态发生了改变，Flutter框架收到通知后，会执行build方法来根据新的状态重新构建界面， Flutter 对此方法做了优化，使重新执行变的很快，所以你可以重新构建任何需要更新的东西，而无需分别去修改各个widget。

以上代码 _counter 中"_" 标识私有变量

Widget build(BuildContext context) {}

该方法是用来构建布局.