这是一篇关于自学Flutter的心得:
我从2019年4月份安装了Flutter环境.学习了Dart语言,敲了一个电影列表的简单Demo.
后来由于公司任务比较繁忙.一个人干着2个人的活,还需要管理移动端.每晚11点下班,所以耽误了学习.
现在由于疫情的情况,迟迟未能复工,需要在家自我隔离.加上公司目前在规划,所以开发没有那么紧张,只是维护与开会讨论需求.所以现在还是有时间的自我学习.提高自我.
2020年3月2号开始重新学了Dart语言,从Flutter重新搭建环境开始(去年我重装了系统,导致环境变量没有,那是用IDEA工具学习的,现在是使用Android Studio开发).
现在学到Flutter基础,先将整理一些知识分享给大家.后续学完将做一个完整的Demo.
学习的代码将上传到github有兴趣的同学可以下载:https://github.com/huagnzhiqiang/flutter_demo
还在继续学习中,后续将持续更新.
1.界面结构:
- Material 应用
- AppBar：工具栏上的图标按钮（IconButton）
- TabBar：用标签形式展示内容
- TabBar：自定义标签栏的样式
- Material：自定义按钮水波纹样式
- Drawer：抽屉（边栏）
- Drawer：在抽屉里使用 ListView， DrawerHeader，ListTile
- Drawer：抽屉的打开与关闭
- UserAccountDrawerHeader：抽屉里的用户帐号信息
- 用户帐户头部的背景图像
- 创建 DrawerDemo 小部件
- BottomNavigationBar：底部导航栏
- BottomNavigationBar：底部导航栏的激活状态
- StatefulWidget：有状态的小部件
2.基础部件:
- Text：文字与文字样式
- RichText：行内多样式的文字
- Container：容器
- BoxDecoration：装饰盒子
- BoxDecoration：边框（border）
- BoxDecoration：圆角（borderRadius）
- BoxDecoration：阴影（borderShadow）
- BoxDecoration：形状（shape）
- BoxDecoration：渐变（gradient）
- BoxDecoration：背景图像（image）
3.布局:
- 创建可配置的图标徽章（IconBadge）小部件
- Row（横排） 与 Column（竖排）
- mainAxis：主轴
- crossAxis：交叉轴
- SizedBox：固定尺寸的盒子
- Alignment：对齐
- Stack：一摞小部件
- AspectRatio：宽高比
- ConstrainedBox：带限制的盒子
4.视图:
- PageView：页面视图
- PageView：页面视图的属性
- PageView：用 PageController 调整页面的显示
- PageView.builder 按需生成页面
- GridView：网格视图（GridView.count）
- GridView.extent
- GridView.builder 按需生成视图项目
5.Sliver:
- SliverGrid：网格视图
- SliverPadding（内边距） 与 SliverSafeArea（安全区）
- SliverList：列表视图
- SliverAppBar：应用工具栏
- 带渐近动画的可伸缩空间
6.路由Route:
- 一堆路由
- 打开新页面并返回（push 与 pop）
- 带名字的路由（ Navigator.pushNamed）
- 初始路由：initialRoute
- InkWell：添加溅墨动画效果
7.表单Form:
- Theme：定制、使用、重置、覆盖主题
- TextField：文本字段
- TextField：文本字段样式（InputDecoration）
- TextField：监视文本字段的值的变化与提交
- TextField：使用 TextEditingController 监听文本字段变化
- Form：表单
- Form：保存与获取表单里的数据
- Form：验证表单里的数据
- Form：自动验证
- SnackBar：在屏幕底部动画弹出提示栏
8.按钮:
- FloatingActionButton：漂浮动作按钮
- BottomAppBar：底部工具栏
- 创建演示小部件用的页面
- FlatButton：文字按钮
- RaisedButton：按钮
- 按钮主题：颜色、形状
- OutlineButton：描边按钮
- 按钮容器 Container：有固定宽度的按钮
- 按钮容器 Expanded：占满可用宽度的按钮
- 按钮容器 ButtonBar：一组带边距的横排显示按钮
- PopupMenuButton：弹出式菜单按钮
9.输入:
- Checkbox：复选框
- CheckboxListTile：带标签与图标的复选框
- Radio：单选按钮
- RadioListTile：带标签与图标的单选按钮
- Switch：开关
- SwitchListTile：带标签与图标的开关
- Slider：滑动选择器
- 安装第三方包（演示安装 Intl 包）
- 显示格式化日期
- showDatePicker：选择日期
- showDatePicker：获取选择的日期（async）
- showTimePicker：时间选择器
- Future：异步程序
