🌙 App 模板
调用 main() 函数，创建 MaterialApp
import 'package:flutter/material.dart';
// 主入口函数
void main() => runApp(MyApp());
// 无状态组件
class MyApp extends StatelessWidget {
// 构造函数
const MyApp({super.key});
// 无状态组件方法, 返回 MaterialApp
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Text('Hello World'),
)
)
)
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
🌙 组件分类
- statelessWidget 无状态组件，如：
Autocomplete
Dialog
Drawer
FlutterLogo
Icon
ListTitle
Navigator
SafeArea
Scrollbar
Spacer
Theme
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
- statefulWidget 有状态组件，如：
AppBar
Checkbox
CupertinoApp
EditableText
Form
FutureBuilder
Hero
Image
NavigationRail
Navigator
Material
MaterialApp
Radio
Scaffold
Snackbar
StreamBuilder
TabBar
TextButton
TextField
WidgetsApp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- RenderObjectWidget 渲染对象组件，如：
Align
AspectRatio
ColoredBox
CustomPaint
FittedBox
Opacity
Padding
SizedBox
Transform
Flex
Flow
ListBody
RichText
Stack
Viewport
Wrap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
这个是按照继承对象分类的，下面我按照个人理解分为 1. 内容型组件 2. 布局型组件 3. 交互型组件 4. 应用级组件 5. 其他
## 1. 内容型组件
### 1.1. Text普通文本
### 1.2. Icon图标
### 1.3. Button按钮
### 1.4. Image图片
### 1.5. SelectableText可选文本
### 1.5. RichText富文本
### 1.6. TextField文本输入框
### 1.7. TextFormField表单输入框
## 2. 布局型组件
### 2.1. Container
### 2.2. Column
### 2.3. Row
### 2.4. Stack
### 2.5. Wrap
### 2.6. Flex
### 2.7. Expanded
### 2.8. AspectRatio
### 2.9. FittedBox
### 2.10. Align
### 2.11. Center
### 2.12. ConstrainedBox
### 2.13. DecoratedBox
## 3. 交互型组件
### 3.1. Switch开关
### 3.2. Checkbox复选框
### 3.3. Radio单选框
### 3.4. Slider滑块
### 3.5. SwitchListTile开关列表
### 3.6. CheckboxListTile复选框列表
### 3.7. RadioListTile单选框列表
### 3.8. DropdownButton下拉菜单
### 3.9. DropdownButtonFormField下拉菜单
### 3.10. PopupMenuButton弹出菜单
### 3.11. PopupMenuButtonFormField弹出菜单
## 4. 应用级组件
### 4.1. AppBar
### 4.2. BottomNavigationBar
### 4.3. BottomSheet
### 4.4. Drawer
### 4.5. SnackBar
### 4.6. SnackBarAction
### 4.7. TabBar
🌙 路由导航 Navigation
🌙 非命名路由 Nameless routes
- 路由前进，使用
Navigator.of(context).push(XXX())
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const SecondPage(),
)
)
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- 路由后退，使用
Navigator.of(context).pop()
onPressed: () {
Navigator.of(context).pop();
}
1
2
3
2
3
🌙 命名路由 Named routes
- 要定义命名路由，需要在
MaterialApp的routes属性中定义Map<String, WidgetBuilder>，键为路由名称，值为页面构建器
const Map<String, WidgetBuilder> routes = {
'/': (context) => const HomePage(),
'/first': (context) => const FirstPage(),
'/second': (context) => const SecondPage(),
}
MaterialApp(
// 命名路由映射表
routes: routes,
// 初始路由
initialRoute: '/',
// home: const HomePage(),
)
onPressed: () {
// 命名路由传参
Navigator.of(context).pushNamed('/second', arguments: 'hello');
}
onPressed: () {
Navigator.pop(context);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
注意 routes、initialRoute 和 home 不建议同时配置，配置不当会产生冲突，导致错误发生。
🌙 滑动导航 PageView
作为无名路由和命名路由的替代方案，可以使用PageView进行导航，可以滑动切换页面。
PageView(
// 滚动方向 默认 Axis.horizontal
scrollDirection: Axis.vertical,
controller: PageController(),
children: [
Container(
color: Colors.blue,
),
Container(
color: Colors.red,
),
Container(
color: Colors.green,
),
],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
当然，我们也可以使用第三方路由，如：go_router (opens new window)、auto_route (opens new window)