Flutter示例系列（一）之创建项目

开发环境：
Mac OS 10.14.5
VSCode 1.36.1

使用命令创建项目时自动生成示例，通过解析了解项目如何运行、组件如何创建以及有、无状态Widgets的区别。

使用VSCode创建第一个Flutter示例

1.点击 View -> Command Palette
2.输入 flutter，选择 Flutter:New Project
3.输入工程名，点击 Enter
4.选择存放路径，然后创建并等待完成

main.dart 文件

导入系统库，material 库是系统提供的常用组件集。material design（原质设计） 是谷歌提出的一种卡片式设计框架，用于统一各平台、各产品线的风格。

import 'package:flutter/material.dart';

main() 函数几乎是所有语言的主函数（入口）。flutter应用启动仅需调用 runApp() 方法，并且传入 widget 即可。UI 以 widget树 的形式呈现，此 widget 则成为树的根节点。

void main() => runApp(MyApp());

Flutter核心思想是通过 widget 构建UI界面。通过组件是否需要管理状态，创建的新组件继承自 StatelessWidget 和 StatefulWidget。
Widget 主要实现 build() 方法，用较低级别的 widget 来组成当前的 widget。
构建遵循 Meterial Design 的应用，当以 MeterialApp Widget 开始。然后设置 title（标识），theme（包含主题色、字体等），home（主界面）等，这些设置可以进入 MaterialApp 官方文档进行查看，还有许多其他设置。

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

MyHomePage的构造器，用于初始化该类的实例。

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

定义MyHomePage的实例变量。

final String title;

基于 StatefulWidget 的widget，需要重写 createState() 方法，返回下面新创建的State对象。

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

创建 MyHomePageState类，并实现 build() 方法构建widget。

class _MyHomePageState extends State<MyHomePage>

定义 _counter 变量计数。

int _counter = 0;

_incrementCounter() 方法，每次调用则对上面的_counter加1。
调用 setState() 方法，告诉Flutter库状态已改变，则重新运行 build() 方法更新当前显示的值。

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

与上面MyApp类不同，此处返回Scaffold布局组件，是一个可视化脚手架，通常会占满整个屏幕，其他小组件则在其中布局。
appBar（导航栏）：设置标题title，widget是MyHomePage的实例，所以可以获取其成员变量title。
body（主体部分）：Center是布局组件，表明主体UI居中显示，child表明Center层级下只有一个子组件，Column也是布局组件，表明下一级组件呈列状展示，MainAxisAlignment.center表明组件垂直居中，Children表明有多个组件，示例中是两个Text组件，第二个Text下的 ‘$_counter’ 展示变量_counter的值。
floatingActionButton（浮动按钮）：位置处于屏幕右下角，onPressed 是点击按钮后的回调函数，tooltip是长按后显示的文本，下面从Icons中选择系统提供的图标。

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

模拟器上运行

1.在VSCode底部菜单栏可以看到 No Device，点击

2.然后选择想要启动的模拟器（安卓要创建模拟器，苹果XCode会自带）

3.点击VSCode的 debug => starting debugging，运行在启动的模拟器上。（有时会不成功，多点几次）

总结

1.点击 No Device，若不出现可选择的模拟器（前提是模拟器已创建）
解决：VSCode 的 flutter 重装就出现了

2.出现
ideviceinfo returned an error:
ERROR: Could not connect to lockdownd, error code -13
解决：可能电脑连接了真机，拨出再次尝试。如果还是不行，若是iOS模拟器，用Xcode打开ios部分运行。

通过此示例我们发现：
1.应用通过 main() 函数启动
2.遵循 Material 设计，根widget一般使用 MaterialApp 组件
3.无需通过状态改变的组件继承 StatelessWidget，否则使用 StatefulWidget

=================================================================
个人博客
Github
个人公众号：Flutter小同学
个人网站