直接开始干,没有为什么~
分析
Flutter 相关环境搭建好后,创建 Flutter 工程就可以看到官方这个默认的计数器Demo。

导包
这里导入Material UI库
import 'package:flutter/material.dart';
应用入口
-
main 函数作为程序入口,通过 runApp 启动 Flutter 应用,传入 Widget 参数(MyApp())。
-
=> 为 Dart 单行函数写法。
void main() => runApp(MyApp());
应用结构
-
这里使用 MaterialApp 构建了个 Material 设计风格的应用 MyApp ,在 MaterialApp 中可以设置应用名、主题颜色、默认 Home 界面、语言、路由以及一些调试开关等。
-
MyApp 继承 StatelessWidget(无状态组件),直接通过 Build 构建相应的 Widget
class MyApp extends StatelessWidget {
// 构建应用的根 Widget
@override
Widget build(BuildContext context) {
return MaterialApp(
// 多任务窗口应用名字
title: 'Flutter Demo',
// 应用主题
theme: ThemeData(
primarySwatch: Colors.blue,
),
// 应用默认显示的界面 Widget
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
Home 页实现
- MyHomePage 这个 Demo 真正的页面实现,由 parent 传入 title
- MyApp 继承 StatefulWidget(有状态组件),需要通过 createState 返回相应的 State
class MyHomePage extends StatefulWidget {
// title 由父类传入,且设置成 final 不可改变
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
- _MyHomePageState 继承 State,泛型为 MyHomePage,通过 build 构建 Widget
class _MyHomePageState extends State<MyHomePage> {
// 记录点击次数
int _counter = 0;
void _incrementCounter() {
// 调用 setState 将调用 build 重新绘制界面
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
// 构建 Widget
return Scaffold(
appBar: AppBar(
// appbar title.
title: Text(widget.title),
),
body: Center(
// Center 将子 Wiget 居中,这里即屏幕居中
child: Column(
// Column 将一组子 Widget 竖向排列
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.add),
),
// 悬浮按钮,按下改变 _counter 计数
);
}
}
至此,计数 Demo 分析完毕...
总结
Flutter 中大多数对象都是 Widget,而在这些 Widget 的实现类里都有其简单的使用示例。看了这个 Demo 效果,里面就使用到了如下 Widget :
- StatelessWidget
继承自 Widget 的抽象类,当有一个不需要改变状态的固定场景就可以继承 StatelessWidget 实现,在 build 方法中嵌套实现 UI。StatelessWidget 与 StatefulWidget 对应
- StatefulWidget
继承自 Widget 的 抽象类,当有一个需要改变状态的场景就可以继承 StatefulWidget 实现,在 createState 中返回需要的 State (继承 State 实现)。 在继承 State 后, 在 build 方法中嵌套实现 UI,在需要更新 UI 时 调用 setState 即可。 StatefulWidget 与 StatelessWidget 对应
- MaterialApp
MaterialApp 继承自 StatefulWidget,实现一个 Material Design(材料设计)风格的 App
- Scaffold
Scaffold 继承自 StatefulWidget,实现了基于材料设计的可视化布局结构,包含 appBar、body、drawer、 bottomNavigationBar 等
- AppBar
AppBar 继承自 StatefulWidget,实现了材料设计的应用程序栏
- Center
Center 继承自 Align 一步步跟踪下去,它依然是继承自 Widget,实现单一子部件居中显示。
- Column
Column 继承自 Flex 一步步跟踪下去,它依然是继承自 Widget,实现竖向数组显示 Widget
- Text
Text 继承自 StatelessWidget ,实现单一风格文本控件
- FloatingActionButton
FloatingActionButton 继承自 StatelessWidget,实现一个 Material Design(材料设计)风格的浮动按钮组件
- Icon
FloatingActionButton 继承自 StatelessWidget,实现一个 Material Design(材料设计)风格的图标组件