开发环境:
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
=================================================================