第一个Flutter应用

基于AndroidStudio的Flutter项目目录结构介绍

 

如上图所示，就是一个Flutter工程目录结构。

• android------>包含Android特定文件的Android子工程

• build------>是运行项目的时候生成的编译文件，即Android和IOS的构建产物

• ios------>包含IOS特定文件的IOS子工程

• lib------>Flutter应用源文件目录，自己写的Dart文件都放进lib文件夹中

• test------>测试文件

• pubspec.yaml------>管理第三方库及资源的配置文件

 

lib/main.dart文件源代码介绍

用Android Studio或者VS code创建的Flutter应用模板默认是一个简单的计数器，在这个示例中，主要Dart代码是在lib/main.dat文件中。

1.导入了Material UI组件库

import 'package:flutter/material.dart';

2.应用程序入口 

void main(){
  runApp(MyApp());
}
//或者简写：使用（=>）符号，编写单行函数
void main() => runApp(MyApp());

• runApp函数它接收一个Widget参数（MyApp对象），MyApp()是Flutter应用的根组件。

• main函数中调用了runApp方法，它的功能是启动flutter应用。

3.应用结构

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'),
    );
  }
}

• MyApp类代表Flutter应用，它继承了StatelessWidget类，表示它是一个无状态的组件，这意味着应用本身也是一个widget。
• MaterialApp是Material库中提供的Flutter APP框架（也是一个widget），通过它可以设置应用的名称、主题、语言、首页及路由等。

  • title: 'Flutter Demo'：为应用名称

  • primarySwatch: Colors.blue：为蓝色主题

  • home: MyHomePage(title: 'Flutter Demo Home Page')：为应用首页路由

• Flutter在构建页面时，会调用组件的build()方法，widget的主要工作是提供一个build()方法来描述如何构建UI界面。

4.应用首页

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

• MyHomePage是Flutter应用的首页，它继承了StatefulWidget类，表示它是一个有状态的组件。它和无状态的组件（StatelessWidget）有两点不同：

  • StatefulWidget可以拥有状态，这些状态在widget生命周期中是可以变的，而StatelessWidget是不可变的。

  • StatefulWidget至少由两个类组成：

    • 一个StatefulWidget类。

    • 一个State类；StatefulWidget类本身是不变的，但是State类中持有的状态在widget生命周期中可能会发生变化。

• MyHomePage({Key key, this.title}) : super(key: key); 是构造函数，并且给成员变量title赋值，至于构造函数的Key key参数有点复杂，本篇文章不做介绍，后续补上。

• _MyHomePageState类是MyHomePage类对应的状态类。

5._MyHomePageState类介绍

• _MyHomePageState类继承了State类

class _MyHomePageState extends State<MyHomePage> 

• 定义一个_counter状态 ，用于记录按钮点击的总次数

int _counter = 0;

• 设置状态的自增函数

void _incrementCounter() {
  setState(() {
    //自增_counter
    _counter++;
  });
}

• 构建UI界面

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have clicked the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headline4,
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ),
  );
}

1. Scaffold是Meterial库中提供的页面脚手架，它提供了默认的导航栏、标题和包含主屏幕widget树的body属性。

2. body的组件树中包含了一个Center组件，Center可以将其子组件树对齐到屏幕中心。Center子组件是一个Column组件，Column的作用就是将其所有子组件沿屏幕垂直方向依次排序；Column子组件是两个Text，第一个Text显示固定文本”You have clicked the button this many times:“，第二个Text 显示_counter状态的数值。

3. floatingActionButton是程序运行之后页面右下角的带”+“的悬浮按钮，它的onPressed属性接收一个（前面定义的_incrementCounter状态的自增函数）回调函数，代表着它被点击后的处理器，tooltip属性是设置长按之后的提示”Increment“，child: Icon(Icons.add)是设置图标。

应用执行流程

当右下角的floatingActionButton悬浮按钮被点击之后，会调用incrementCounter方法，在incrementCounter方法中，首先会自增_counter，然后调用setState方法，setState方法通知Flutter框架状态发生变化，接着，Flutter框架会调用build方法以新的状态重新构建UI，最终显示在设备屏幕上。