main.dart
- 应用入口main函数，runApp功能是启动Flutter应用，它接受一个 Widget参数
void main() {
runApp(const MyApp());
}
-
MyApp
继承了 StatelessWidget类，可以看出应用本身也是一个widget。widget我的理解是，有点类型安卓的view/viewgroup。安卓调用draw方法绘制布局，flutter调用widget的build方法绘制布局。
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
//应用名称
title: '饮食记录',
theme: ThemeData(
//应用主题：紫色
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
//应用首页
home: const MyHomePage(title: '饮食记录'),
);
}
}
-
首页MyHomePage
继承自StatefulWidget类，表示它是一个有状态的组件。可以简单理解为StatefulWidget【有状态】可以变化内容，而StatelessWidget【无状态】不可以变化内容。
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
.......
}
Stateful widget 可以拥有状态，这些状态在 widget 生命周期中是可以变的，而 Stateless widget 是不可变的。
Stateful widget 至少由两个类组成：
- 一个StatefulWidget类。
- 一个 State类； StatefulWidget类本身是不变的，但是State类中持有的状态在 widget 生命周期中可能会发生变化。
_MyHomePageState类是MyHomePage类对应的状态类。看到这里，读者可能已经发现：和MyApp 类不同， MyHomePage类中并没有build方法，取而代之的是，build方法被挪到了_MyHomePageState方法中
大致先看下，后面看下_MyHomePageState就知道了。
-
_MyHomePageState
有一个需要变化的_counter变量，通过setState进行内容的变化，其实类似于livedata中，如果需要改变值，用livedata的setvalue。这里是setState。调用setState会通知 Flutter 框架，有状态发生了改变，Flutter 框架收到通知后，会执行 build 方法来根据新的状态重新构建界面（有点类似调用invalid重新调用draw绘制页面）。
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
//具体代码稍后再贴，是个UI界面
}
}
6.上面build方法，构建UI界面
下面就是5中稍后再贴的代码啦。Scaffold是Material 库中提供的页面脚手架，它提供了默认的导航栏、标题和包含主屏幕 widget 树（后同“组件树”或“部件树”）的body属性，组件树可以很复杂。
简单理解就是Scaffold是官方提供的一个自定义 viewGroup，这个viewGroup中有导航栏、标题等一些布局，可以通过方法更改布局样式。大家按着command键，就可以进入相应的源码进行查看哦。
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(//设置appbar样式
backgroundColor: Theme
.of(context)
.colorScheme
.inversePrimary,
title: Text(widget.title),
),
body: Center( //center用于居中
child: Column(//将其所有子组件沿屏幕垂直方向依次排列
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[//子view
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme
.of(context)
.textTheme
.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
后记
这里就大致的了解一下基础框架，下一节开始学习基础页面搭建。
主打一个快速上手，所以那些flutter绘制是由谁来完成等的原理这里都略过了。感兴趣的可以看https://book.flutterchina.club/chapter2/flutter_widget_intro.html#_2-2-2-widget-接口的第二章内容。
